利用 javascript 实现富文本编辑器

节点卡片到编辑中。这里我们借助 document.execCommand('insertHTML', false, html); 来插入内容。为了防止div被编辑，要设置 contenteditable="false" 哦。

处理 paste 粘贴

在富文本编辑器中，粘贴效果默认采用如下规则：

如果是带有格式的文本，则保留格式(格式会被转换成html标签的形式)

粘贴图文混排的内容，图片可以显示，src 为图片真实地址。

通过复制图片来进行粘贴的时候，不能粘入内容

粘贴其他格式内容，不能粘入内容

为了能够控制粘贴的内容，我们监听 paste 事件。该事件的 event 对象中会包含一个 clipboardData 剪切板对象。我们可以利用该对象的 getData 方法来获得带有格式和不带格式的内容，如下。

let plainText = event.clipboardData.getData('text/plain'); // 无格式文本

let plainHTML = event.clipboardData.getData('text/html'); // 有格式文本

之后调用 document.execCommand('insertText', false, plainText); 或 document.execCommand('insertHTML', false, plainHTML; 来重写编辑上的paste效果。

然而对于规则 3 ，上述方案就无法处理了。这里我们要引入 event.clipboardData.items 。这是一个数组包含了所有剪切板中的内容对象。比如你复制了一张图片来粘贴，那么 event.clipboardData.items 的长度就为2：

items[0] 为图片的名称，items[0].kind 为 ‘string’, items[0].type 为 ‘text/plain’ 或 ‘text/html’。获取内容方式如下：

items[0].getAsString(str => {

// 处理 str 即可

})

items[1] 为图片的二进制数据，items[1].kind 为’file’， items[1].type 为图片的格式。想要获取里面的内容，我们就需要创建 FileReader 对象了。示例代码如下：

let file = items[1].getAsFile();

// file.size 为文件大小

let reader = new FileReader();

reader.onload = function() {

// reader.result 为文件内容，就可以做上传操作了

}

if(/image/.test(item.type)) {

reader.readAsDataURL(file); // 读取为 base64 格式

}

处理完图片，那么对于复制粘贴其他格式内容会怎么样呢？在 mac 中，如果你复制一个磁盘文件，event.clipboardData.items 的长度为 2。 items[0] 依然为文件名，然而 items[1] 则为图片了，没错，是文件的缩略图。

输入法处理

当使用输入发的时候，有时候会发生一些意想不到的事情。 比如百度输入法可以输入一张本地图片，为此我们需要监听输入法产生的内容做处理。这里通过如下两个事件处理：

compositionstart: 当浏览器有非直接的文字输入时, compositionstart事件会以同步模式触发

compositionend: 当浏览器是直接的文字输入时, compositionend会以同步模式触发

修复移动端的问题

在移动端，富文本编辑器的问题主要集中在光标和键盘上面。我这里介绍几个比较大的坑。

自动获取焦点

如果想让我们的编辑器自动获得焦点，弹出软键盘，可以利用 focus() 方法。然而在 ios 下，死活没有结果。这主要是因为 ios safari 中，为了安全考虑不允许代码获得焦点。只能通过用户交互点击才可以。还好，这一限制可以去除：

[self.appWebView setKeyboardDisplayRequiresUserAction:NO]

iOS 下回车换行，滚动条不会自动滚动

在 iOS 下，当我们回车换行的时候，滚动条并不会随着滚动下去。这样光标就可能被键盘挡住，体验不好。为了解决这一问题，我们就需要监听 selectionchange 事件，触发时，计算每次光标编辑器顶端距离，之后再调用 window.scroll() 即可解决。问题在于我们要如何计算当前光标的位置，如果仅是计算光标所在父元素的位置很有可能出现偏差(多行文本计算不准)。我们可以通过创建一个临时 元素查到光标位置，计算 元素的位置即可。代码如下：

function getCaretYPosition() {

let sel = window.getSelection(),

range = sel.getRangeAt(0);

let span = document.createElement('span');

range.collapse(false);

range.insertNode(span);

var topPosition = span.offsetTop;

span.parentNode.removeChild(span);

return topPosition;

}

正当我开心的时候，安卓端反应，编辑器越编辑越卡。什么鬼？我在 chrome 上线检查了一下，发现 selectionchange 函数一直在运行，不管有没有操作。

在逐一排查的时候发现了这么一个事实。 range.insertNode 函数同样触发 selectionchange 事件。这样就形成了一个死循环。这个死循环在 safari 中就不会产生，只出现在 safari 中，为此我们就需要加上浏览器类型判断了。

键盘弹起遮挡输入部分

网上对于这个问题主要的方案就是，设置定时器。局限与前端，确实只能这采用这样笨笨的解决。最后我们让 iOS 同学在键盘弹出的时候，将 webview 高度减去软键盘高度就解决了。

CGFloat webviewY = 64.0 + self.noteSourceView.height;

self.appWebView.frame = CGRectMake(0, webviewY, BDScreenWidth, BDScreenHeight - webviewY - height);

插入图片失败

在移动端，通过调用 jsbridge 来唤起相册选择图片。之后调用 insertImage 函数来向编辑器插入图片。然而，插入图片一直失败。最后发现是因为早 safari 下，如果编辑器失去了焦点，那么 selection 和 range 对象将销毁。因此调用 insertImage 时，并不能获得光标所在位置，因此失败。为此需要增加， backupRange() 和 restoreRange() 函数。当页面失去焦点的时候记录 range 信息，插入图片前恢复 range 信息。

backupRange() {

let selection = window.getSelection();

let range = selection.getRangeAt(0);

this.currentSelection = {

"startContainer": range.startContainer,

"startOffset": range.startOffset,

"endContainer": range.endContainer,

"endOffset": range.endOffset

}

}

restoreRange() {

if (this.currentSelection) {

let selection = window.getSelection();

selection.removeAllRanges();

let range = document.createRange();

range.setStart(this.currentSelection.startContainer, this.currentSelection.startOffset);

range.setEnd(this.currentSelection.endContainer, this.currentSelection.endOffset);

// 向选区中添加一个区域

selection.addRange(range);

}

}

在 chrome 中，失去焦点并不会清除 seleciton 对象和 range 对象，这样我们轻轻松松一个 focus() 就搞定了。

重要问题就这么多，限于篇幅限制其他的问题省略了。总体来说，填坑花了开发的大部分时间。

其他功能

基础功能修修补补以后，实际项目中有可能遇到一些其他的需求，比如当前光标所在文字内容状态啊，图片拖拽放大啊，待办列表功能，附件卡片等功能啊，markdown切换等等。在了解了js 富文本的种种坑之后，range 对象的操作之后，相信这些问题你都可以轻松解决。这里最后提几个做扩展功能时候遇到的有去的问题。

回车换行带格式

前面已经说过了，富文本编辑器的机制就是这样，当你回车换行的时候新产生的内容和之前的格式一模一样。如果我们利用 .card 类来定义了一个卡片内容，那么换行产生的新的段落都将含有 .card 类且结构也是直接 copy 过来的。我们想要屏蔽这种机制，于是尝试在 keydown 的阶段做处理(如果在 keyup 阶段处理用户体验不好)。然而，并没有什么用，因为用户自定义的 keydown 事件要在 浏览器富文本的默认 keydown 事件之前触发，这样你就做不了任何处理。

为此我们为这类特殊的个体都添加一个 property 属性，添加在 property 上的内容是不会被copy下来的。这样以后就可以区分出来了，从而做对应的处理。

获取当前光标所在处样式

这里主要是考虑 下划线，删除线之类的样式，这些样式都是用标签类描述的，所以要遍历标签层级。直接上代码：

function getCaretStyle() {

let selection = window.getSelection(),

range = selection.getRangeAt(0);

aimEle = range.commonAncestorContainer,

tempEle = null;

let tags = ["U", "I", "B", "STRIKE"],

result = [];

if(aimEle.nodeType === 3) {

aimEle = aimEle.parentNode;

}

tempEle = aimEle;

while(block.indexOf(tempEle.nodeName.toLowerCase()) === -1) {

if(tags.indexOf(tempEle.nodeName) !== -1) {

result.push(tempEle.nodeName);

}

tempEle = tempEle.parentNode;

}

let viewStyle = {

"italic": result.indexOf("I") !== -1 ? true : false,

"underline": result.indexOf("U") !== -1 ? true : false,

"bold": result.indexOf("B") !== -1 ? true : false,

"strike": result.indexOf("STRIKE") !== -1 ? true : false

}

let styles = window.getComputedStyle(aimEle, null);

viewStyle.fontSize = styles["fontSize"],

viewStyle.color = styles["color"],

viewStyle.fontWeight = styles["fontWeight"],

viewStyle.fontStyle = styles["fontStyle"],

viewStyle.textDecoration = styles["textDecoration"];

viewStyle.isH1 = Util.findParentByTagName(aimEle, "h1") ? true : false;

viewStyle.isH2 = Util.findParentByTagName(aimEle, "h2") ? true : false;

viewStyle.isP = Util.findParentByTagName(aimEle, "p") ? true : false;

viewStyle.isUl = Util.findParentByTagName(aimEle, "ul") ? true : false;

viewStyle.isOl = Util.findParentByTagName(aimEle, "ol") ? true : false;

return viewStyle;

}

最后说一句

该项目目前提测中，所以呢，一但发现有意思的坑，我会及时补充的。

参考内容

MDN – document.execCommand

MDN – selection

MDN – range

input 事件兼容处理以及中文输入法优化

js获取剪切板内容，js控制图片粘贴

iOS UIWebView 全属性详解

来自：http://eux.baidu.com/blog/2017/11/利用-javascript-实现富文本编辑器

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。