28 09 2020
正文

事前准备:

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

原生功能:

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

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

undefined

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

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

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

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


解决方案:

1.下载插件

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

undefined

进入官网下滑,直接戳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,默认就行了。

实现效果:

undefined


二、拓展查看源码功能:

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

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

undefined

解决方案:

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. 部分想说的话
发表评论