富文本编辑器文档 - layui.layedit

该 layedit 组件早在 2017 年发布的 layui 2.0 版本中就已被弃用,请选择第三方更成熟的编辑器组件替代

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