原生js写一个简单的编辑器

最新推荐文章于 2024-05-07 17:09:49 发布

qq_34231078

最新推荐文章于 2024-05-07 17:09:49 发布

阅读量2.6k

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/qq_34231078/article/details/106221781

版权

js原生写的编辑器，主要是使用document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)来实现的
如果该指令不被支持或停用将会返回 false 的 Boolean 值。例如document.execCommand(‘saveas’)
第一个参数可以为

1. backColor 设置或获取当前选中区的背景颜色。  
2. Bold 切换当前选中区的粗体显示与否。  
3. ClearAuthenticationCache  清除所有选取中的验证。
4. contentReadOnly 使內容文件成为只读。此指令需要提供布尔值 true/false 作为参数。（Internet Explorer 不支援）。
5. Copy 将当前选中区复制到剪贴板。  
6.CreateLink 在当前选中区上插入超级链接，或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL。  
7.Cut 将当前选中区复制到剪贴板并删除之。  
8.decreaseFontSize 在选取区域的前后加入一個个<small> 标签（ Internet Explorer 不支援）
9.defaultParagraphSeparator 变更可编辑文字区域新增段落时的段落分隔器。
10.Delete 删除当前选中区。  
11.enableAbsolutePositionEditor 启用或停用移动绝对定位元素的抓取器。
12.enableInlineTableEditing 启用或停用表格的列 / 行的插入及刪除。
13.enableObjectResizing  启用或停用图片、表格、绝对定位元素、其他可重设大小物件的重设大小处理
14.FontName 设置或获取当前选中区的字体。  
15.FontSize 设置或获取当前选中区的字体大小。  
16.ForeColor 设置或获取当前选中区的前景(文本)颜色。  
17.FormatBlock 设置当前块格式化标签。  
18.forwardDelete 刪除游标位置后的字元，等同与在 Windows 按下 Delete 键盘按键。
19.heading 在选区区域或插入点前后加入一个标题元素。此指令需要标题名的字串作为参数
20.hiliteColor 变更选区区域或插入点的背景色彩
21.increaseFontSize 在选区区域或插入点前后加入一个 <big> 标签（Internet Explorer 不支援）。
22.Indent 增加选中文本的缩进。  
23.insertBrOnReturn 控制 Enter 按键按下时在目前区块元素中插入 <br> 元素或分割成为两个元素（Internet Explorer 不支援）。
24.InsertHorizontalRule 用水平线覆盖当前选中区。
25.insertHTML 在插入点插入一个 HTML 字串（会删除选取內容）需要一个有效的 HTML 字串作为参数（Internet Explorer 不支援）。
26.InsertImage 用图像覆盖当前选中区。  
27.InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。 
28.InsertUnorderedList 切换当前选中区是项目符号列表还是常规格式化块。  
29.InsertParagraph 用换行覆盖当前选中区。 
30.insertText 在插入点处插入给予的纯文字（选取內容将被刪除）。
31.Italic 切换当前选中区斜体显示与否。 
32.JustifyCenter 将当前选中区在所在格式化块置中。  
33.JustifyFull 目前尚未支持。  
34.JustifyLeft 将当前选中区所在格式化块左对齐。  
35.JustifyRight 将当前选中区所在格式化块右对齐。  
36.Outdent 减少选中区所在格式化块的缩进。  
37.Paste 用剪贴板内容覆盖当前选中区。  
38.Print 打开打印对话框以便用户可以打印当前页。  
39.Redo 重做。  
40.Refresh 刷新当前文档。  
41.RemoveFormat 从当前选中区中删除格式化标签。  
42.SelectAll 选中整个文档。  
43.strikeThrough 切換選取區域或插入點的刪除線開關。  
44.Subscript 切換選取區域或插入點的 subscript 開關。 
45.Superscript 切換選取區域或插入點的 superscript 開關。
46.Underline 切换当前选中区的下划线显示与否。  
47.Undo 撤消。  
48.Unlink 从当前选中区中删除全部超级链接。  
49.useCSS 針對產生的 markup 使用 HTML 標籤或 CSS。此指令需要一個布林值 true/false 作為引數值。
50.styleWithCSS 取代 useCSS 的指令。 true 會在 markup 修改 / 產生 style 屬性， false 會產生展示用的元素。

代码案例：

<!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>Document</title>
    <style>
        .editButtons span{
   
            display:inline-block;
            white-space:nowrap;
        }
        [data-edit] {
   
            float:left;
            border:0;
            font: 12px/1 monospace;
            background:#ddd;
            padding:

最低0.47元/天解锁文章

qq_34231078

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生js写一个简单的编辑器

js原生写的编辑器，主要是使用document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)来实现的如果该指令不被支持或停用将会返回 false 的 Boolean 值。例如document.execCommand(‘saveas’)第一个参数可以为1. backColor 设置或获取当前选中区的背景颜色。 2. Bold 切换当前选中区的粗体显示与否。 3. ClearAuthenticationCache 清除所有选取
复制链接

扫一扫