富文本编辑器的简单实现原理
<!-- -- 富文本编辑器的简单实现原理 -- 参考文档: -- 1. w3cshool:https://www.w3cschool.cn/javascript/javascript-execcommand.html -- 2. 火狐开发者中心:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand -- -- 要点:1. 添加div标签的一个属性contenteditable设置为true,使该div元素可编辑; -- 2. js调用document.execCommand(指令参数[命令], false, 动态参数[值])函数, -- 3. 函数中第二个参数应始终为false,因为参数为true会显示对话框,而火狐并不支持。 -- 4. document.execCommand("paste"); 为粘贴命令,浏览器默认未开启,需要在user.js配置文件中开启。 --> <!DOCTYPE html> <html> <head> <title>富文本编辑器实现原理</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> <style> #edit{ height:260px; width:100%; overflow: scroll; border:solid 1px black } </style> </head> <body> <div id="edit" name="edit" contenteditable="true"></div> <br> <button name="button-edit" data-name="justifyCenter">居中</button> <button name="button-edit" data-name="justifyLeft">左对齐</button> <button name="button-edit" data-name="justifyRight">右对齐</button> <button name="button-edit" data-name="indent">添加缩进</button> <button name="button-edit" data-name="outdent">去掉缩进</button> <button name="button-edit" data-name="fontname" data-value="宋体">宋体</button> <button name="button-edit" data-name="fontsize" data-value="5">大字体</button> <button name="button-edit" data-name="forecolor" data-value="red">红色字体</button> <button name="button-edit" data-name="backColor" data-value="lightgreen">浅绿背景</button> <button name="button-edit" data-name="bold">加粗</button> <button name="button-edit" data-name="italic">斜体</button> <button name="button-edit" data-name="underline">下划线</button> <button name="button-edit" data-name="copy">复制</button> <button name="button-edit" data-name="cut">剪切</button> <!--paste命令浏览器默认未开启,需要在user.js配置文件中开启,详见火狐开发者中心文档--> <!--链接:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand--> <button name="button-edit" data-name="paste">粘贴</button> <button name="button-edit" data-name="selectAll">全选</button> <button name="button-edit" data-name="delete">删除</button> <button name="button-edit" data-name="forwarddelete">后删除</button> <button name="button-edit" data-name="removeFormat">清空格式</button> <button name="button-edit" data-name="redo">前进一步</button> <button name="button-edit" data-name="undo">后退一步</button> <button name="button-edit" data-name="print">打印</button> <button name="button-edit" data-name="formatblock" data-value="div">插入div</button> <button name="button-edit" data-name="inserthorizontalrule">插入hr</button> <button name="button-edit" data-name="insertorderedlist">插入ol</button> <button name="button-edit" data-name="insertunorderedlist">插入ul</button> <button name="button-edit" data-name="formatblock" data-value="p">插入p</button> <button name="button-edit" data-name="inserttext" data-value="这是我插入的内容!">插入文本</button> <button name="button-edit" data-name="insertimage" data-value="http://images.cnblogs.com/cnblogs_com/qingsong/545927/o_39.gif">插入图像</button> <button name="button-edit" data-name="createlink" data-value="https://www.w3cschool.cn/javascript/javascript-execcommand.html">增加链接</button> <button name="button-edit" data-name="unlink">删除链接</button> <input type="button" onclick="isPaste()" value="检测paste粘贴命令是否支持"> <input type="button" value="代码获取" onclick="showContent()"> <script>
/** 当文档载入完毕后,在富文本框内设置焦点, * 并且在第一行插入p标签。 **/ window.onload = function(){ edit.focus(); document.execCommand("formatblock", false, "p"); } /** 在编辑框内,当键盘输入时自动在当前行插入p标签, * 也可以自动插入其它标签, * 当编辑框内检测到</li>标签时禁止插入p标签。 */ edit.onkeydown = function(){ var str = edit.innerHTML; var val = str.search(/<\/li>/i); if(val < 0){ document.execCommand("formatblock", false, "p"); } } var btns = document.getElementsByName('button-edit'); /** 编辑按钮的js操作命令接口。 * 按钮的data-name属性存放命令,data-value属性存放值。 * 也可用其它标签代替。 **/ for(var i = 0; i < btns.length; i++){ btns[i].onclick = function(){ if(this.getAttribute('data-value') == ""){ document.execCommand(this.getAttribute('data-name')); }else{ document.execCommand(this.getAttribute('data-name'),false,this.getAttribute('data-value')); } } } /** 富文本内的值是通过div的innerHTML获取的, * 表单提交时需提前用js转移到隐藏域里,然后提交, * 为了便于理解富文本的结构,这里省略这一步了。 **/ function showContent() { alert(edit.innerHTML); } /** 检测浏览器是否开启或支持paste命令, * 函数反回值为Boolean, * true为支持,false为未开启或不支持paste粘贴命令 * paste粘贴命令需要在user.js配置文件中开启。 * 详见火狐开发者中心相关文档: * https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand **/ function isPaste(){ if(document.execCommand("paste")) { alert("浏览器支持或开启了paste粘贴命令!"); }else{ alert("浏览器不支持paste粘贴命令,\n或未在user.js配置文件中开启!"); } } </script> </body> </html>
注意事项:
用a或span元素添加onclick事件来执行document.execCommand()函数命令会失效,要用button或<input type="button">添加onclick事件来执行才会成功。尤其添加font awesome字体图标时,button能够添加字体图标,但input不能添加字体图标。如:
引入图标字体:
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
添加链接按钮图标:
<button class="fa fa-link" onclick="addLink()"></button>
js函数执行:
function addLink(){ var lineVal=prompt("请输入链接地址:",""); if(lineVal != null && lineVal != ''){ var patt=/[http|https]+:\/\/[^\s]*/i; if(patt.test(lineVal)){ document.execCommand("createlink", false, lineVal); }else{ alert("链接地址输入格式错误,请重新输入!"); } } }
但不能用
<span class="fa fa-link" onclick="addLink()"></span>
来执行,否则document.execCommand()函数执行的命令不成功。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· .NET 8.0 + Linux 香橙派,实现高效的 IoT 数据采集与控制解决方案
· DeepSeek处理自有业务的案例:让AI给你写一份小众编辑器(EverEdit)的语法着色文件
2015-12-20 html页面插入flash代码