HTML和JS实现富文本编辑器及其原理

最新推荐文章于 2023-05-05 16:19:09 发布

gqkmiss

最新推荐文章于 2023-05-05 16:19:09 发布

阅读量2.2k

点赞数 3

分类专栏：富文本编辑器 HTML javascript 文章标签：富文本编辑器 html execCommand contenteditable

本文链接：https://blog.csdn.net/guoqiankunmiss/article/details/103224293

版权

javascript 同时被 3 个专栏收录

67 篇文章 2 订阅

订阅专栏

HTML

30 篇文章 1 订阅

订阅专栏

富文本编辑器

1 篇文章 0 订阅

订阅专栏

富文本编辑器

eg：wangEditor富文本编辑器

原理

contenteditable 属性

给一个标签加上 contenteditable=“true” 的属性

<div contenteditable="true">

</div>

即可在这个div元素里面进行编辑。

兼容：

浏览器兼容性

contenteditable兼容性

Method of making any HTML element editable.

使任何HTML元素可编辑的方法。

实现：

document.execCommand 方法

MDN document.execCommand

语法

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

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

在调用一个命令前，不要尝试使用返回值去校验浏览器的兼容性

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

命令

命令	解释	参数
backColor	修改文档的背景颜色。需要一个类型的字符串值作为参数传入。	#ff0000
bold	开启或关闭选中文字或插入点的粗体字效果。	null
copy	拷贝当前选中内容到剪贴板。	null
createLink	将选中内容创建为一个锚链接。	http://www.baidu.com
cut	剪贴当前选中的文字并复制到剪贴板。	null
delete	删除选中部分.	null
fontName	在插入点或者选中文字部分修改字体名称.	Arial
fontSize	在插入点或者选中文字部分修改字体大小. 需要提供一个HTML字体尺寸 (1-7) 作为参数。	6
foreColor	在插入点或者选中文字部分修改字体颜色. 需要提供一个颜色值字符串作为参数。	#ff0000
formatBlock	添加一个HTML块式标签在包含当前选择的行	< H1 >
forwardDelete	删除光标所在位置的字符。和按下删除键一样。	null
heading	添加一个标题标签在光标处或者所选文字上。	H6
hiliteColor	更改选择或插入点的背景颜色。	#dddddd
indent	缩进选择或插入点所在的行	null
insertHorizontalRule	在插入点插入一个水平线	null
insertHTML	在插入点插入一个HTML字符串	< p>I Am A P< /p>
insertImage	在插入点插入一张图片	图片链接
insertOrderedList	创建一个有序列表	null
insertUnorderedList	创建一个无序列表	null
insertParagraph	在选择或当前行周围插入一个段落	null
insertText	在光标插入位置插入文本内容或者覆盖所选的文本内容。	插入内容
italic	在光标插入点开启或关闭斜体字。	null
justifyCenter	对光标插入位置或者所选内容进行文字居中。	null
justifyFull	对光标插入位置或者所选内容进行文本对齐。	null
justifyLeft	对光标插入位置或者所选内容进行左对齐。	null
justifyRight	对光标插入位置或者所选内容进行右对齐。	null
outdent	对光标插入行或者所选行内容减少缩进量。	null
paste	在光标位置粘贴剪贴板的内容。	null
redo	重做被撤销的操作。	null
removeFormat	对所选内容去除所有格式	null
selectAll	选中编辑区里的全部内容。	null
strikeThrough	在光标插入点开启或关闭删除线。	null
subscript	在光标插入点开启或关闭下角标。	null
superscript	在光标插入点开启或关闭上角标。	null
underline	在光标插入点开启或关闭下划线。	null
undo	撤销最近执行的命令。	null
unlink	去除所选的锚链接的标签	null
contentReadOnly	通过传入一个布尔类型的参数来使能文档内容的可编辑性。(IE浏览器不支持)	true
decreaseFontSize	给选中文字加上 < small > 标签，或在选中点插入该标签。	null
defaultParagraphSeparator	更改在可编辑文本区域中创建新段落时使用的段落分隔符。	标记生成的差异
enableInlineTableEditing	启用或禁用表格行和列插入和删除控件。	null
enableObjectResizing	启用或禁用图像和其他对象的大小可调整	null
increaseFontSize	在选择或插入点周围添加一个BIG标签。	null

demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>富文本编辑器</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            outline: none;
            box-sizing: border-box;
        }
    </style>
</head>
<script src="./../js/jquery3.0.min.js"></script>
<body>
    <style>
        .con1{
            width: 100%;
            height: 300px;
            border: 1px solid red;
            font-family: '微软雅黑';
        }
    </style>
    <div class="div con1" contenteditable="true"></div>
    <button class="but" id="backColor" type="#ff0000">backColor</button>
    <button class="but" id="but">Bold</button>
    <button class="but">copy</button>
    <button class="but" type="http://www.baidu.com">createLink</button>
    <button class="but">cut</button>
    <button class="but">delete</button>
    <button class="but" type="Arial">fontName</button>
    <button class="but" type="6">fontSize</button>
    <button class="but" type="#ff00ff">foreColor</button>
    <button class="but" type="<H1>">formatBlock</button>
    <button class="but">forwardDelete</button>
    <button class="but" type="H6">heading</button>
    <button class="but" type="#dddddd">hiliteColor</button>
    <button class="but">indent</button>
    <button class="but">insertHorizontalRule</button>
    <button class="but" type="<p>I Am A P</p>">insertHTML</button>
    <button class="but" type="https://img.alicdn.com/imgextra/i3/282199655/O1CN01r1q16q2LC2Zg6NCWL_!!282199655.png">insertImage</button>
    <button class="but">insertOrderedList</button>
    <button class="but">insertUnorderedList</button>
    <button class="but">insertParagraph</button>
    <button class="but" type="哈哈哈哈哈 text">insertText</button>
    <button class="but">italic</button>
    <button class="but">justifyCenter</button>
    <button class="but">justifyFull</button>
    <button class="but">justifyLeft</button>
    <button class="but">justifyRight</button>
    <button class="but">outdent</button>
    <button class="but">paste</button>
    <button class="but">redo</button>
    <button class="but">removeFormat</button>
    <button class="but">selectAll</button>
    <button class="but">strikeThrough</button>
    <button class="but">subscript</button>
    <button class="but">superscript</button>
    <button class="but">underline</button>
    <button class="but">undo</button>
    <button class="but">unlink</button>
    <button class="but">contentReadOnly</button>
    <button class="but">decreaseFontSize</button>
    <button class="but" type="div">defaultParagraphSeparator</button>
    <button class="but">enableInlineTableEditing</button>
    <button class="but">enableObjectResizing</button>
    <button class="but">increaseFontSize</button>
    <hr />
    <button id="getHTML">点击获取html</button>
</body>
<script>
    $('.but').click(function () {
        let name = this.innerHTML
        let type = this.getAttribute('type')
        console.log(name, type)
        document.execCommand(name, false, type)
    })
    $('#getHTML').click(function () {
        console.log($('.con1').html())
    })
</script>
</html>