富文本编辑器文档 - 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以外的全部浏览器。

<a href="https://www.sojson.com/layui/" target="_blank">Layui</a>是一款由贤心个人原创的UI框架，这正是我们对高质量的承诺。尽管现在市面上有太多依托在 Vue/React 光环下的前端方案，但我们仍然定位现在这样一个模式，是为了呈现一个极简的解决手段，那就是无需依赖过多看似逼格的工具，直接信手即用。而恰是因为原创，有些事情远比人们想象中的那么简单，尤其是在追求尽善尽美的强迫症的引领下，我常常徘徊在轮子的制造、摧毁又重建的漩涡中，所以<a href="https://www.sojson.com/layui/" target="_blank">Layui</a>一拖再拖，从计划到现在，似乎已经接近1年。在我全职接近两个月的SOHO后，Layui的第一个版本终于发布！ 2016.10.14

基础方法

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

通过下述方式可自定义编辑器的工具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": "图片名称" //可选
  }
}

声明：

Layui官网（www.layui.com）于2021年10月13日下线，本站前端采用 Layui ，固保留 layui文档。

layui 相关权益与本站毫无关系，本站只是万千Layui用户中的一员而已，您有任何疑问请在码云直接向作者提问。

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

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