200字范文 > HTML5 - contenteditable 富文本编辑器

HTML5 - contenteditable 富文本编辑器

时间：2019-02-17 22:12:18

简介

上图是我自己没事用 contenteditable 写着玩的，一个有点像 VS Code
的脚本编辑器。主要是脚本要根据类型高亮，比如方法名黄色、关键字紫色。

contenteditable 是 HTML5 中的新属性。属性值为true 可以编辑元素内容，false 无法编辑元素内容。例：

<p contenteditable="true">这里可编辑</p>

来由

textarea无法满足需求

textarea不能像div一样高度自适应，高度保持不变，内容大于高度时就会出现滚动条。textarea只支持文本输入，不支持在编辑区域插入图片，链接，视频。

兼容性

MDN截图

使用说明

编辑器初始内容，就一行;我是注释123456789

<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是注释123456789</span></div></div>

1.回车、删除

以谷歌浏览器为例

行首回车

<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">**<br>**</span></div><div class="lineText"><span style="color: green;">;我是注释123456789</span></div></div>

行尾回车

会多出一个div，并复制上一行的内容，也就是span,span里面有一个 br（空标签，一个简单的换行符。）

<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是注释123456789</span></div><div class="lineText"><span style="color: green;">**<br>**</span></div></div>

行中回车并删除

会多出一个div，把之前的一分为2.

//按回车变两行<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是</span></div><div class="lineText"><span style="color: green;">注释123456789</span></div></div>//按删除删除回车，变一行，但是是两个span<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是</span><span style="color: green;">注释123456789</span></div></div>

2.输入内容

行首、行中、行末输入效果一致，再长都不会创建新元素。

<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是注释123456789我是谁</span></div></div>

3.命令document.execCommand

/zh-CN/docs/Web/API/Document/execCommand

当一个HTML文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。比如设置字体、加粗等，并可以插入图片等内容。

语法

*bool* = document.execCommand(*aCommandName*, *aShowDefaultUI*, *aValueArgument*)

返回值

一个Boolean，如果是false则表示操作不被支持或未被启用。

参数

aCommandName：一个DOMString，命令的名称。可用命令列表请参阅命令。aShowDefaultUI：一个Boolean，是否展示用户界面，一般为 false。Mozilla 没有实现。aValueArgument：一些命令（例如insertImage）需要额外的参数（insertImage需要提供插入image的url），默认为null。

设置命令

insertBrOnReturn

是否在回车时插入br。控制当按下Enter键时，是插入 br 标签还是把当前块元素变成两个。(IE浏览器不支持)

document.execCommand("insertBrOnReturn", true, false);

使用命令insertBrOnReturn命令，最后参数为true，会产生

，为false则根据当前行创建。

<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: white;">888</span></div><div class="lineText"><br></div></div>

defaultParagraphSeparator

更改在可编辑文本区域中创建新段落时使用的段落分隔符。有关更多详细信息，请参阅标记生成的差异。

插入命令

insertHorizontalRule在插入点插入一个水平线（删除选中的部分）insertImage在插入点插入一张图片（删除选中的部分）。需要一个 URL 字符串作为参数。这个 URL 图片地址至少包含一个字符。空白字符也可以（IE会创建一个链接其值为null）insertOrderedList在插入点或者选中文字上创建一个有序列表insertUnorderedList在插入点或者选中文字上创建一个无序列表。

insertParagraph 插入段落

在光标所在当前行后插入一个段落。(IE会在插入点插入一个段落并删除选中的部分.)

和按回车键效果类似。

document.execCommand("insertParagraph", true);//在光标处插入一个新div ,会包含一个 br行末<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是注释123456789</span></div><div class="lineText"><span style="color: green;">**<br>**</span></div></div>行中<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是注释</span></div><div class="lineText"><span style="color: green;">123456789</span></div></div>行首<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">**<br>**</span></div><div class="lineText"><span style="color: green;">;我是注释123456789</span></div></div>

insertText 在当前段落中插入

在光标插入位置插入文本内容或者覆盖所选的文本内容。

document.execCommand("insertText", true, '#IF'); 行末<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是注释123456789#IF</span></div></div>行中<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是注释#IF123456789</span></div></div>行首<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">#IF;我是注释123456789</span></div></div>

insertHTML 插入html

在光标所在当前行插入文本内容或者覆盖所选的文本内容。

直接插入内容，效果和insertText一致。document.execCommand("insertHTML", true,'#IF' );

那么插入html 字符串呢？是在光标所在当前行插入 html元素。

document.execCommand("insertHTML", true,'<span style='color:red;'>#IF</span>' );行末<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是注释123456789</span><span style="color: red;">#IF</span></div></div>行中<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是注释</span><span style="color: red;">#IF</span><span style="color: green;">123456789</span></div></div>行首<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: red;">#IF</span><span style="color: green;">;我是注释123456789</span></div></div>