layui.layedit富文本编辑器自定义内容框css的方法

2022-04-06 10:05 栏目:技术开发 查看(6836)

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

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

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

QQ截图20220403182012

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

QQ截图20220403182941

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

QQ截图20220403183217

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

QQ截图20220403183354

解压组件源代码,可以找到源码中定义这些样式的位置(大概在15900行左右):

QQ截图20220403183516

我们可以在此处添加一点代码即可添加一个参数是设置项,源代码为(红框中的为添加的代码):

QQ截图20220403184045

这样在调用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上,不进行修改,是不能通过设置项直接完成操作的,通过微调源码,增加参数项也可以完成这样的需求,当然前提是你能读懂理解组件的源代码。

与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:layui.layedit富文本编辑器自定义内容框css的方法 - 微构网络
分享: