且从 Layui v2.8.0 开始,layedit 组件正式从内置组件中移除,详见:layedit 组件剔除公告
跟那些过往的编辑器一样,你需要放置一个标签(一般为textarea文本域)作为编辑器的目标元素,然后调用 layedit.build('id') 即可,如下所示:
<textarea id="demo" style="display: none;"></textarea>
<script>
layui.use('layedit', function(){
var layedit = layui.layedit;
layedit.build('demo'); //建立编辑器
});
</script>
然后你会看到一个如下模样(部分工具Bar未配置出来),它跟Layui的所有存在体一样,兼容IE6/7以外的全部浏览器。
LayEdit提供了相当精简的方法,如下:
| 方法名 | 描述 |
|---|---|
| var index = layedit.build(id, options) |
用于建立编辑器的核心方法
index:即该方法返回的索引 参数 id: 实例元素(一般为textarea)的id值 参数 options:编辑器的可配置项,下文会做进一步介绍 |
| layedit.set(options) |
设置编辑器的全局属性
即上述build方法的options |
| layedit.getContent(index) |
获得编辑器的内容
参数 index: 即执行layedit.build返回的值 |
| layedit.getText(index) |
获得编辑器的纯文本内容
参数 index: 同上 |
| layedit.sync(index) |
用于同步编辑器内容到textarea(一般用于异步提交)
参数 index: 同上 |
| layedit.getSelection(index) |
获取编辑器选中的文本
参数 index: 同上 |
在建立编辑器的方法 layedit.build(id, options) 的第二个参数(options)中,允许我们对编辑器进行一些设置,如:
layedit.build('id', {
height: 180 //设置编辑器高度
});
options可提供支持的参数如下表
| 属性 | 类型 | 描述 |
|---|---|---|
| tool | Array | 重新定制编辑器工具栏,如: tool: ['link', 'unlink', 'face'] |
| hideTool | Array | 不显示编辑器工具栏,一般用于隐藏默认配置的工具bar |
| height | Number | 设定编辑器的初始高度 |
通过下述方式可自定义编辑器的工具Bar
layedit.build('id', {
tool: ['left', 'center', 'right', '|', 'face']
});
目前layedit可选的Bar有(顺序可以自由排列):
tool: [
'strong' //加粗
,'italic' //斜体
,'underline' //下划线
,'del' //删除线
,'|' //分割线
,'left' //左对齐
,'center' //居中对齐
,'right' //右对齐
,'link' //超链接
,'unlink' //清除链接
,'help' //帮助
]
layui - 在每一个细节中,用心与你沟通