layui富文本编辑器
发布于2021-05-30 12:20 阅读(1363) 评论(0) 点赞(12) 收藏(1)
国内外有许多优秀、强大的HTML编辑器，但普遍都有一个共性：异常地臃肿、UI陈旧，随着Layui的发布，将重新为富文本做一些新的定义。LayEdit遵循极简的设计风格，无论是UI上，还是接口使用上，都尽可能地避免一些繁杂的功能和配置。
首先我们需要引入相关的layui插件：layui.css、layui.js、ace.js插件
<link rel="stylesheet" type="text/css" href="${ctx}/layui/css/layui.css" />
<script type="text/javascript" src="${ctx}/layui/js/layui.js"></script>
<script type="text/javascript" src="${ctx}/layui/js/ace.js"></script>
然后需要放置一个textarea文本域作为编辑器的目标元素。
<textarea id="demo" name="demo"></textarea>
然后调用 layedit.build(‘id’)。
<script>
layui.use('layedit', function(){
var layedit = layui.layedit;
layedit.build('demo'); //建立编辑器
});
</script>
你会看到下面这样的一个编辑器，它跟Layui的所有存在体一样，兼容IE6/7以外的全部浏览器。
除此之外，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": "图片名称" //可选
}
}
我们还可以通过下面的方式自定义编辑器的工具Bar:
layedit.build('id', {
tool: ['left', 'center', 'right', '|', 'face']
});
在建立编辑器的方法 layedit.build(id, options) 的第二个参数（options）中，允许我们对编辑器进行一些设置,options可提供支持的参数如下表:
LayEdit还提供了相当精简的方法:
原文链接:https://blog.csdn.net/weixin_44540681/article/details/117281393
所属网站分类: 技术文章 > 博客
作者：前端黄柠檬
链接：http://www.qianduanheidong.com/blog/article/116034/abb45594a4718557cf4b/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力