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

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:4px 8px;}[contenteditable] {padding:4px 16px;background:#eee;}</style>
</head><body>
<div class="editButtons"><span title="STYLES"><!-- 加粗 --><button data-edit="bold"><b>B</b></button><!-- 斜体 --><button data-edit="italic"><i>I</i></button><!-- 下划线 --><button data-edit="underline"><u>U</u></button><!-- 中划线 --><button data-edit="strikeThrough"><s>S</s></button></span><span title="TEXT FORMAT"><!-- 字体标签设置 --><button data-edit="formatBlock&p">P</button><button data-edit="formatBlock&H1">H1</button><button data-edit="formatBlock&H2">H2</button><button data-edit="formatBlock&H3">H3</button></span><span title="FORE COLOR"><!-- 字体大小设置 --><button data-edit="foreColor&yellow">字体颜色</button></span><span title="BACK COLOR"><!-- 字体大小设置 --><button data-edit="backColor&red">背景色</button></span><span title="FONT SIZE"><!-- 字体大小设置 --><button data-edit="fontSize&1">s</button><button data-edit="fontSize&3">M</button><button data-edit="fontSize&5">L</button></span><span title="CREAT LINK"><!-- 字体大小设置 --><button data-edit="createLink&https://www.baidu.com">超链接</button></span><span title="INSERT IMAGE"><!-- 字体大小设置 --><button data-edit="insertImage&https://profile.csdnimg.cn/1/5/0/3_qq_34231078">图片</button></span><span title="LISTS"><!-- 列表格式设置 --><button data-edit="insertUnorderedList">UL</button><button data-edit="insertOrderedList">OL</button></span><span title="ALIGNMENT"><!-- 文本对齐设置 --><button data-edit="justifyLeft">&#8676;</button><button data-edit="justifyCenter">&#8596;</button><button data-edit="justifyRight">&#8677;</button></span><span title="CLEAR FORMATTING"><!-- 清除文本 --><button data-edit="removeFormat">&times;</button></span><span title="COPY"><!-- 复制选中文本 --><button data-edit="copy">C</button></span>
</div><div contenteditable id="textbox"><p>文本编辑器</p>
</div></body>
<script>document.querySelectorAll("[data-edit]").forEach(btn =>btn.addEventListener("click", function (ev) {ev.preventDefault();console.log(this.getAttribute("data-edit"))const cmd_val = this.getAttribute("data-edit").split("&");if(cmd_val[0] == 'copy'){ // 复制选中的文本document.execCommand(cmd_val[0]);}else{document.execCommand(cmd_val[0], false, cmd_val[1]);}}));</script></html>

关注公众号“web学习吧”，一起学习进步

原生js写一个简单的编辑器相关推荐

使用原生js写一个简单的注册登录页面
目录 1.注册页面 2.登录页面 1.首先是我们的注册页面这是我们的html骨架 <!DOCTYPE html> <html lang="en">< ...
HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
原生js完成一个简单的抽奖功能
文章目录前言实现过程 1.前期准备 2.CSS美化 3.使用 js 完成抽奖功能 3.1 随机数模块 3.2 随机奖品 3.3 开始抽奖 3.4 点击开始抽奖完整代码 HTML部分 CSS部分 ...
原生JS实现一个简单的打字小游戏
原生JS实现一个简单的打字小游戏利用javascript制作一个简单的打字小游戏之前写了一个贪吃蛇小游戏好像反响不错今天我来写一个比贪吃蛇更low更简单的打字小游戏打字小游戏原理接下来咋们直 ...
JS写一个简单的五星评价
JS写一个简单的五星评价在做前端网页页面的时候很多时候回有遇到星级评价的模块,用到的地方挺多所以自己就上传下方便大家和自己使用(不支持半星评价因为没有半星的图). 效果图如下: 下面是我们的代码: ...
js 取得input绑定的datalist中的值_原生JS写一个ToDo Demo
周六加班没什么事,于是乎...上班摸鱼,用原生JS写了一个ToDo Demo,废话少叙,直接看效果: 如图,实现了以下需求(以下的具体实现我会一一道来): 0.页面的基本布局: 1.rem布局.在不同 ...
js 写html代码编辑器,原生JS写一个功能强大的编辑器
因为一个同学,要做一个能加入图片的留言板功能,类型与QQ空间留言板和百度贴吧发帖的那种形式,同时在网上找了找发生网上对这方面的交流很少,所以发表这篇文章抛砖引玉,希望能帮助广大的学习者,也同时希望大佬 ...
用原生JS写一个网页版的2048小游戏（兼容移动端）
这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...
使用Node.js写一个简单的api接口
引入Http模块默认你已经安装了Node.js Node当中内置了Http模块: 可以使用 var http= require("http"); 复制代码引入http模块: H ...

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

代码案例：

原生js写一个简单的编辑器相关推荐

最新文章

热门文章