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

国内外有许多优秀、强大的HTML编辑器,但普遍都有一个共性:异常地臃肿(少则几千行,多则上万行代码)、UI陈旧,并且基本都好几年没更新了。而现在,随着Layui的发布,我们有必要重新为富文本做一些新的定义。LayEdit仍旧遵循极简的设计风格,无论是UI上,还是接口使用上,都尽可能地避免一些繁杂的功能和配置。如果你正苦苦寻找一款轻量的Web富文本编辑器,那么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 设定编辑器的初始高度
uploadImage Object 设定图片上传接口,如:uploadImage: {url: '/upload/', type: 'post'}

通过下述方式可自定义编辑器的工具Bar

layedit.build('id', {
  tool: ['left', 'center', 'right', '|', 'face']
});      
      

目前layedit可选的Bar有(顺序可以自由排列):

tool: [
  'strong' //加粗
  ,'italic' //斜体
  ,'underline' //下划线
  ,'del' //删除线
  
  ,'|' //分割线
  
  ,'left' //左对齐
  ,'center' //居中对齐
  ,'right' //右对齐
  ,'link' //超链接
  ,'unlink' //清除链接
  ,'face' //表情
  ,'image' //插入图片
  ,'help' //帮助
]
      

LayEdit提供了向编辑器插入图片的支持,前提是配置了 uploadImage,如:

layedit.set({
  uploadImage: {
    url: '' //接口url
    ,type: '' //默认post
  }
});
//注意:layedit.set 一定要放在 build 前面,否则配置全局接口将无效。
layedit.build('demo'); //建立编辑器
      

也就是说LayEdit并不提供服务端的图片接受,但你需要在图片上传成功后对LayEdit返回如下格式的JSON信息:

{
  "code": 0 //0表示成功,其它失败
  ,"msg": "" //提示信息 //一般上传失败后返回
  ,"data": {
    "src": "图片路径"
    ,"title": "图片名称" //可选
  }
}
      

也许你会觉得LayEdit的功能实在有点少吧,尤其是跟百度的UE这些重量级编辑器相比。是的,LayEdit的工具Bar还并不多,这主要是受制于Layui第一个版本的发布时间,一个功能丰富的编辑器需要较长时间的打磨,而Layui 1.0显然等不及。但我们会在后续版本视情况针对LayEdit进行功能升级,其中会包括:HTML源代码编辑、字体颜色、字体大小、字体格式、插入表格、插入列表、插入引用块、插入代码、插入附件、分割线、预览、二次开发工具Bar的接口支持等等

在保证功能完备的同时,也会格外注重代码的轻量性。

layui - 用心与你沟通