HTML在线⽂本编辑器实现原理，富⽂本编辑器的简单实现原理DOCTYPE html>
富⽂本编辑器实现原理title>
style>
head>
div>
居中button>
左对齐button>
右对齐button>
添加缩进button>
去掉缩进button>
宋体button>
asp富文本编辑器⼤字体button>
红⾊字体button>
浅绿背景button>
加粗button>
斜体button>
下划线button>
复制button>
剪切button>
粘贴button>
全选button>
删除button>
后删除button>
清空格式button>
前进⼀步button>
后退⼀步button>
打印button>
插⼊divbutton>
插⼊hrbutton>
插⼊olbutton>
插⼊ulbutton>
插⼊pbutton>
插⼊⽂本button>
插⼊图像button>
增加链接button>
删除链接button>
* 并且在第⼀⾏插⼊p标签。
**/window.οnlοad= function(){
edit.focus();
}/** 在编辑框内，当键盘输⼊时⾃动在当前⾏插⼊p标签，
* 也可以⾃动插⼊其它标签，
* 当编辑框内检测到标签时禁⽌插⼊p标签。*/edit.οnkeydοwn= function(){varstr=edit.innerHTML;varval=str.search(//i);if(val< 0){
}
}ElementsByName('button-edit');/** 编辑按钮的js操作命令接⼝。
* 按钮的data-name属性存放命令，data-value属性存放值。
* 也可⽤其它标签代替。
**/
for(vari= 0; i
btns[i].οnclick= function(){Attribute('data-value')== ""){
}else{
}
}
}/** 富⽂本内的值是通过div的innerHTML获取的，
* 表单提交时需提前⽤js转移到隐藏域⾥，然后提交，
* 为了便于理解富⽂本的结构，这⾥省略这⼀步了。
**/
functionshowContent() {alert(edit.innerHTML);
}/** 检测浏览器是否开启或⽀持paste命令，
* 函数反回值为Boolean，
* true为⽀持，false为未开启或不⽀持paste粘贴命令
* paste粘贴命令需要在user.js配置⽂件中开启。
* 详见⽕狐开发者中⼼相关⽂档：
**/
functionisPaste(){Command("paste")) {
alert("浏览器⽀持或开启了paste粘贴命令！");
}else{
alert("浏览器不⽀持paste粘贴命令，\n或未在user.js配置⽂件中开启！"); }
}script>
body>
html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。