在互联网中，开源的富文本编辑器有很多，比如我个人喜欢使用的就是WordPress自带的TinyMCE，而国内使用最广泛的应该就属ueditor、ckeditor、kindeditor等，这些主流编辑器其实功能都非常强大，功能强大也就意味着体积臃肿。

layui是一款经典前端技术构建的前端框架，虽然官网都下线了，但是对于很多后端开发人员来说还是很不错的，使用起来非常简单，当然在某些场景下对于前台开发也是非常便捷的，并不是每个场景的开发都需要使用新的技术方案，要知道技术本质上还是服务我们的。而如果使用了layui的项目，且只需要进行简单的富文本编辑工作，个人觉得就没必要再另外引入其他的独立编辑器了。

因为layui自带了一个简单的layedit组件，可以支持加粗、斜体、下划线、删除线、左对齐、右对齐、居中对象、超链接、删除超链接、表情、插入图片、插入代码等日常需要使用的格式化功能，当然也可以根据自己需要在此基础上进行定制。当然layedit组件自带支持的功能还是很少，但少意味着简单，而且对于比如编辑一条简单格式的图文消息一类的场景还是够用了。也许是由于他比较简单，所以配置项很少，根据其官方文档基本就只有如下几个参数设置：

比如默认的富文本框的样式，是在源码中内联的style 样式决定的，没有参数项在调用组件时设置自定义的css，只能是下图的默认样式：

而我们有时候期望的需要跟我们前端自定义的css一致，也就是所见即所得，这个时候就需要我们自定义编辑框的css。如下图：

因此需要自己动手修改源代码（该框架许可协议允许用户修改源代码），通过前端观察可以看到，编辑器默认css样式是style内联的，所以源代码应该在组件js中约定的。

解压组件源代码，可以找到源码中定义这些样式的位置（大概在15900行左右）：

我们可以在此处添加一点代码即可添加一个参数是设置项，源代码为（红框中的为添加的代码）：

这样在调用layui.layedit组件的时候，我们可以设置的参数多了一个(多的参数为css)，这样我们在调用的时候可以这样设置自定义css了。

layedit.set({
   height:height
   ,css:Config.layui_exts+'edit.css'  //这是自定义css，原来是没有这个可设置参数的
   ,uploadImage: {
	url: API.editImageAPI //接口url
	,type: 'post' //默认post
   }
});

这样就可以完成layui.layedit组件自定义css了，当然也可以直接修改源码中style部分，但个人觉得直接添加一个css参数设置项更优雅一点。其实除此之外其他的地方也可以根据自己需要进行修改，比如插入图片的参数项uploadImage默认情况下可以设置的参数很有限，如果不修改不能完成更复杂的图片上传，比如前端拉取上传凭证token直传到七牛云OSS上，不进行修改，是不能通过设置项直接完成操作的，通过微调源码，增加参数项也可以完成这样的需求，当然前提是你能读懂理解组件的源代码。