姗姗来迟的富文本
前序：
- 当前文档展示的解决方案之一
- 在这什么都想网页展示的年代，dom元素承担了偏离它初衷的负担
- 选择这个富文本，皆因 Simple Job Simple App
- wangEditor官网
- 当前版本 v 3.1.1
- 源码很多注释，但是说真的还是2.X版本比较接地气，3.X从源码这些封装来说是好了很多，但是面向开发者，总是少了点味道
- 注意源码中大量的var使用导致很多不必要的变量赋值，有条件的，可以修改为let，以及更进一步定制自己的富文本插件
- 本文不作wangEditor基础使用介绍等等，仅为自己遇到的一些问题的汇总，慎看
一：wangEditor 3.X 的插件扩展方法：
- 这里采用直接修改源代码的做法，当然看懂了，你也可以外部封装，但是想不改动源码目前是想不出其他方法，即使有，但我觉得要是内部不开放接口，这么搞实在没意义，故下面仅供参考，做法过于幼稚，请勿下饭
- 修改压缩包release文件下的 wangEditor.js，至于改完要不要压缩自行选择
- 新增菜单插件 — 首项缩进 Indent
/*
menu - indent
*/
// 构造函数
function Indent(editor) {
this.editor = editor;
// 设置菜单的样式，文本，title仅为悬浮时显示名称，各位客官可看需添加
this.$elem = $('<div class="w-e-menu" title="首行缩进"><i class="w-e-icon-indent-right"></i></div>');
// 设置操作方式为点击还是选项面板
this.type = 'click';
// 当前是否 active 状态
this._active = false;
}
// 原型
Indent.prototype = {
constructor: Indent,
// 设置点击事件
onClick: function onClick(e) {
// 这里必须要注意，在纯文本没有外部元素包裹的时候，这里会把纯文本的父元素获取，
// 故后面设置的就往往不是你想要的，需要约定俗成，任意一行内容均需要一个元素包裹，
// 以便样式控制影响所在行，若想测试这种效果，请使用
// editor.txt.html('纯文本内容') 、
// editor.txt.html('<p>带元素的内容</p>') 分别试下
var $selectionElem = this.editor.selection.getSelectionContainerElem();
// 这里仅仅使用document.execCommand的缩进操作，至于精准的按当前字体大小以及设置缩进单位的，请自行研究
$($selectionElem).css('text-indent', '2em');
},
// 设置菜单切换状态
tryChangeActive: function tryChangeActive(e) {
var editor = this.editor;
var $elem = this.$elem ;
if (editor.cmd.queryCommandState('indent')) {
this._active = true;
$elem.addClass('w-e-active');
} else {
this._active = false;
$elem.removeClass('w-e-active');
}
}
};
MenuConstructors.indent = Indent;
// 覆盖还是修改取决于你自己，要是懒得找，可以外置这些字体设置，毕竟是样式定位
// 需要注意，内置css的 \ 转移符
// 修改的字体base64格式文本，后面省略，具体的看你拿到的字体转换后的base64为准
// 字体格式这边选择woff2，已跟原版不同，具体看自己选择
// 此处仅展示所在位置
@font-face { font-family: \'w-e-icon\'; src: url(data:application/font-woff2;charset=utf-8;base64...)format(\'woff2\'); font-weight: normal; font-style: normal;}
// 新增首项缩进的样式，样式代码也来自实际字体编号，切勿直接CV
.w-e-icon-indent-right:before { content: "\\e80f";}
- 最后补充说明下，首项缩进要是想和当前字体大小一致，其实加特殊空白字符，有字体大小去定义为最好，控制外边距这种不太好控制，想一模一样还是走了和字体那个一样，故干脆就是添加特殊空白字符就好了，如下：
// $($selectionElem).css('text-indent', '2em');
// 获取当前光标所在行的元素
let $selectionElem = this.editor.selection.getSelectionContainerElem()[0];
// 设置元素内容为前增的特殊空格的字符，注意这里不是敲空格得到的字符
$selectionElem.innerText = ' ' + $selectionElem.innerText;
二：保存后的富文本标签显示的解决方法：
- 当你尝试editor.txt.html发觉显示为带标签元素的文本时，那说明内容中特殊符号经过了转移，所以流程是先把已转义的符号改回正常的符号，在html化，网上找到的是其实是浏览器转移好的文本，再把文本取出给editor.txt.html，如下：
let box = document.createElement("div");
box .innerHTML = text;
editor.txt.html(box .innerText || box .textContent);
//使用完记得回收喔，环保从小事开始
box.remove();
网友评论