本篇文章给大家带来的内容是关于layedit 富文本编辑器中如何添加显示源码功能（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
由于项目需要用到富文本编辑器，并且要有显示源码功能，但layui现在没有这个功能，所以自己想办法添加了这个功能，基本实现了
有这方面需要的，大家可以参考
效果如下:
实现步骤如下:
1。在自己的页面上添加以下两个方法代码
//动态添加编辑器源码查看编辑功能 function sethtmlcodetoedit(ele,id) { $("#" + ele).next().find('div.layui-layedit-tool').append('<span class="layedit-tool-mid"></span>'); $("#" + ele).next().find('div.layui-layedit-tool').append('<i class="layui-icon layui-icon-code-circle" title="查看源码" style="font-size: 18px!important;" onclick="gethtml(this,'+id+')"></i> '); } //显示原代码 function gethtml(boj,index) { layui.use('layedit',function() { var layedit = layui.layedit, $ = layui.jquery; var context = layedit.getcontent(index); if ($(boj).hasclass('layui-icon-code-circle')) { $(document.getelementbyid("lay_layedit_" + number(index))).contents().find("body") .html(htmlutil.htmlencode(context)); $(boj).removeclass("layui-icon-code-circle"); $(boj).addclass("layui-icon-layouts"); $(boj).attr("title","查看html"); } else if($(boj).hasclass('layui-icon-layouts')){ $(document.getelementbyid("lay_layedit_" + number(index))).contents().find("body") .html(htmlutil.htmldecode(context)); $(boj).removeclass("layui-icon-layouts"); $(boj).addclass("layui-icon-code-circle"); $(boj).attr("title","查看源码"); } }); }
2。通过官方的layedit创建方法获取到index后，调用以下方法添加显示源码功能
index = layedit.build('introduction', opt1);//初始化 sethtmlcodetoedit('introduction',index);//设置源码菜单
3。在提交数据时，需要判断一下，如果是html编码的，解码后再提交数据到后台
var context = layedit.getcontent(index);//这里是前面获取到index if (context.length > 0) { if (context.indexof('<') >= 0) {//需要进行解码 $(document.getelementbyid("lay_layedit_" + index)).contents().find("body") .html(htmlutil.htmldecode(context)); } //同步到编辑框 layedit.sync(index);
4。编码，解码方法（也可以用自己的库，或者自己网上找）
var htmlutil = { /*1.用浏览器内部转换器实现html转码*/ htmlencode:function (html){ //1.首先动态创建一个容器标签元素，如div var temp = document.createelement ("div"); //2.然后将要转换的字符串设置为这个元素的innertext(ie支持)或者textcontent(火狐，google支持) (temp.textcontent != undefined ) ? (temp.textcontent = html) : (temp.innertext = html); //3.最后返回这个元素的innerhtml，即得到经过html编码转换的字符串了 var output = temp.innerhtml; temp = null; return output; }, /*2.用浏览器内部转换器实现html解码*/ htmldecode:function (text){ //1.首先动态创建一个容器标签元素，如div var temp = document.createelement("div"); //2.然后将要转换的字符串设置为这个元素的innerhtml(ie，火狐，google都支持) temp.innerhtml = text; //3.最后返回这个元素的innertext(ie支持)或者textcontent(火狐，google支持)，即得到经过html解码的字符串了。 var output = temp.innertext || temp.textcontent; temp = null; return output; }};
相关推荐：
富文本中如何选择一个图片插入编辑器（附代码）
使用富文本编辑器上传图片弹出层的代码实现
以上就是layedit富文本编辑器中如何添加显示源码功能（代码）的详细内容。