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

日升
2,612 阅读4分钟

富文本编辑器

富文本编辑器 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将选中内容创建为一个锚链接。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>
avatar
文章
阅读
粉丝