且从 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 - 在每一个细节中,用心与你沟通