正文

事前准备：

首先引入layui的一系列css，js文件：layui.css，layui.js，layedit.js。

原生功能：

根据layedit.js，我们可以看到，这款富文本插件非常简洁，自然功能就不多。期待下一次更新后的功能。

目前主要有13个功能，如字体加粗，文字基本排版功能，上传文件等功能：

针对目前的功能，一般的文字编辑已是不在话下，不过面对各种层出不穷的需求，我们也可以对layedit进行相对应的拓展。

一、拓展插入代码高亮功能

提示：这里的让代码显示高亮与layedit本身功能并没有关联，实现这个功能的是highlight.js插件。我们需要结合两者一起使用。备注：highlight.js是一个用于在任何web页面上着色显示各种示例源代码语法的JS项目。支持 92 种语言，49 种代码格式化风格。

例如个人博客当中，我们一般需要与人分享代码时，我们更希望在页面上呈现的代码块，能与在IDE编辑器中显示效果一致，或是类似。即“代码高亮”，将明显的函数等用其他颜色标注出来，方便与人查看。

解决方案：

1.下载插件

请戳官网https://highlightjs.org/download/

进入官网下滑，直接戳Downloa，下载到本地。

以个人博客网站举例。我们的需求是后台管理编辑文章，插入代码块，然后在前台页面显示代码高亮。即后台管理编辑器这里我们只需要修改插入代码的条件，然后在前台引用highlightjs，就可以正常显示了。

2.拓展插入代码功能

打开后台管理系统引用的layedit.js，Ctrl+F找到下面的代码：

code: function(e) {
	k.call(o, function(i) {
		v.call(t, "pre", {
			text: i.code,//i.code就是你插入的代码块 
			"lay-lang": i.lang//这个是你插入的时候选择的语言,不过它本身没有高亮功能。 
			}, e) })
}
			

修改成这样式儿的：

code: function(e) {
	k.call(o, function(i) {
		v.call(t, "pre", {
			text: "" + i.code + "",
			//"lay-lang": i.lang//之所以注释这玩意，完全是因为这个没用，删除即可，阅后即焚。 
			}, e) }) 
},
			

注释：highlightjs实现代码高亮的基础，就是pre标签+code标签，所以我们给他加上code标签即可。

3.前台界面引用
最后在前台页面引用CSS即可，由于插入的代码语言可能并非一种，所以一般引入default.css，默认就行了。

实现效果：

二、拓展查看源码功能：

介玩意吧，需要的人呢就需要，不需要的就扯淡。

不过呢，既然layedit没有，我们就尝试拓展一下。先看看实现效果：

解决方案：

1.给工具栏追加HTML标签：

//动态添加编辑器源码查看编辑功能
function setHtmlCodeToEdit(ele, id) {
	$("#" + ele).next().find('div.layui-layedit-tool').append('<i class="layui-icon layui-icon-code-circle" title="查看源码" 
style="font-size: 18px!important;" onclick="getHtmls(this,' + id + ')">&#xe64b;</i>  ');//&#xe64b;是LayUI的字体图标
}

2.添加实现查看源码的功能（原理：用浏览器内部转换器实现html转码

//显示原Demo，实现上文追加的onclick方法
getHtmls = function(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", "查看源码");
		}
	});
}

//转码方法
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;
	}
};

3.初始化编辑器，并追加方法

var index = layedit.build('Content',
tool: ["strong", "italic", "underline", "del", "|", "left", "center", "right", "|", "face", "link", "unlink", "image", "code", "preview"],
//这是初始化富文本工具栏，preview是下文的预览功能字段，code是插入代码功能
height: 600); //初始化 
setHtmlCodeToEdit('Content', index); //就是第一步给工具栏追加HTML标签，你直接用jq追加也行，例如$(".layui-unselect .layui-layedit-tool").append(' ');

4.提交之前验证：如果是HTML编码的，解码后再提交数据到后台(看个人需求)

var context = $.trim(layedit.getContent(index));
//编辑器的内容 
if (context.length > 0) {
	if (context.indexOf('<') >= 0) {
		//需要进行解码 
		$(document.getElementById("LAY_layedit_" + index)).contents().find("body").html(HtmlUtil.htmlDecode(context));
	}
	//同步到编辑框 
	layedit.sync(index);
}

你如果是from表单自动提交的，就可以写一个提交按钮的单击事件去判断一下，如果是ajax那就更没啥可说，直接判断完事。

三、预览功能拓展：

其实就是弹出一个弹窗，将你编辑器的内容显示到上面去。可做可不做，实现原理都是去改layedit.js，去追加工具栏，然后实现具体方法就行了，直接上DEmo：

$(".layui-unselect .layui-layedit-tool").append('<i class="layui-icon layedit-tool-preview" title="在线预览" ></i>');
$(".layedit-tool-preview").click(function () { 
	layer.open({		
		title: '在线预览',//标题 
		shade: 0.2, 
		content: layedit.getContent(index),//编辑器内容
		offset: 'auto', 
		area: ['90%', '90%'],//(top.window.innerHeight * 0.80).toString()] 
	});
}); 

参考：是阿凡吖

延伸阅读

1. 个人博客部署补充
2. MVC站点安全开发