HTML5富文本API


自从创建这公众号,我朋友fmq就和我提到,每天写一篇文章,还要有内容原创,真的会很难。建议我按类型分别写,比如先来各个语言和C语言做下比较,再从头教一教C基础,然后一个一个语言、一个一个库类、一个一个项目写着走。

行吧,本上火就这样写(shui)了3天。我朋友又说到,光这样写意义不大,要我把我以前那堆坑补补,然后每周推一篇补坑的内容,就算实作中的干货吧。好吧,好吧,那本上火就每周星期天推一篇补坑的记录吧。

这时上火那朋友又说,他忍不了实验库里面那富文本编辑器了。也对,那东西临时放在网站发文章那里,应急一下也不是啥办法。那就这样吧,今天本上火就来重新用HTML5的富文本API,给这博客发文章页面重新做个富文本编辑器吧。至于实验库里面那编辑器,就扔回我实验库好了。


进入正题:


其实HTML5有这样一个富文本API是相当的鸡肋,如果说这个API有用,或许确实有用,大大的简化了我们开发网页富文本的工作量。如果说这个API没用,它又真的没用,说是HTML5,但API产生的内容却是HTML4.1的,甚至让人不禁怀疑这是HTML4.1的API。如果让这API实现个这API中另外的富文本需求,比如字体的大小换个单位,这API不能实现不说,还没有一个中间的方案,一旦要自行实现,必然要涉及与直接开发富文本相当的工作量。如此的话,这API的意义又何在?

虽然这个API对于要求高的富文本需求相当鸡肋,但是做个简单的富文本还是足够了。


首先为了我们使用这个API的函数更加方便,让我先重写个函数来给这个API的参数位置等微微调整一下。

这个execCommand函数一共有3个参数,而第二个参数在,我将实现的这个简单的富文本中,是恒定为“真”的,同时每次执行API后,我们都要把焦点回到富文本的编辑区。于是我写了这样一个函数:

函数 设置HTML编辑区(富文本API中要使用的命令,命令需要的额外参数)

   function setHtmlEdit(aCommandName, aValueArgument){

    document.execCommand(aCommandName, true, aValueArgument);

    code.focus();  //code元素是文本编辑区

   }

接着我们就可以尽情的调用这个API了,其实。。。自从用上这个API,上火就无时无刻不感觉自己在打酱油。


本来还想面向对象装波比,结果,算了算了,直接在html代码里面加onclick事件直接调用这函数即可。

本来今天忙了一天,晚上这两个小时本想休息一下,我那朋友还催我写文章,写简单点得了。因此,请不要骂这段代码烂,拜托拜托。

稍微麻烦点的就是要输入参数的API,我们先新建个变量,然后弹窗向用户请求参数,判断参数不为空,那么发给API即可。

var i prompt("请输入要链接到的URL地址""http:\/\/")//弹窗向用户要求输入一个链接地址

if(i && i != "" && i != "http://"){ //带漏洞的判断链接地址不为空

 setHtmlEdit("createLink"i);

}


这有个漏洞就是,如果用户输入不合法参数,那么,跳转到不知名的地方,或者注入代码攻击。不过因为这本来就在前端完成的内容,如果真要去玩这个漏洞,其实F12就足够了。等以后哪天真要讲这漏洞时再详细谈谈,一个一般用户接触不到的,无法危害到服务端任何内容的漏洞就先放一边了。

同理实现超链接和字体背景颜色。



至此,整个富文本API调用基本完成,这整个富文本API可以实现的基本功能大致如下表:

命令功能附加参数备注
backColor修改文档的背景颜色一个color值
bold粗体文字

contentReadOnly文档内容的可编辑性
不建议使用
copy复制选中内容

createLink创建链接一个URLa标签
cut剪切选中内容

decreaseFontSize给选中内容加上small标签

delete删除选中部分

enableInlineTableEditing启用或禁用表格编辑控件

enableObjectResizing启用或禁用图像和其他对象编辑控件

fontName设置选中文本字体
字体名
fontSize设置选中文本字体大小

foreColor设置选中文本字体颜色

formatBlock添加一个HTML块式标签在选中行一个HTML标签名如H1,P等
forwardDelete基本等同于按下键盘的Backspace键

heading添加一个标题标签在选中处一个HTML标签名如H1,H6等
hiliteColor设置选中范围背景颜色一个color值
increaseFontSize给选中内容加上big标签

indent添加缩进

insertBrOnReturn按下Enter键时插入情况控制
不建议使用
insertHorizontalRule插入一个hr标签

insertHTML插入一段HTML

insertImage插入一个图片一个指向图片的URL地址
insertOrderedList插入一个有序列表

insertUnorderedList插入一个无序列表

insertParagraph插入一个段落

insertText插入一段文本内容内容
italic给选中内容加上i标签

justifyCenter文本居中

justifyFull文本对齐

justifyLeft文本左对齐

justifyRight文本右对齐

outdent减少缩进

paste粘贴
需要配置,一般没法用
redo重做被撤销的操作

removeFormat清除格式

selectAll全选

strikeThrough给选中内容加上删除线

subscript给选中内容加上下角标

superscript给选中内容加上上角标

underline给选中内容加上下划线

undo撤销

unlink给选中内容去除a标签
与createLink创建链接相反
useCSS旧版的styleWithCSS
已废弃
styleWithCSS切换使用HTML还是CSS标记富文本一个布尔值通常为避免生成富文本为HTML4.1,都需要开头时使用一次这个


在实现富文本后,我们再加一个源码的转换,以便直接粘贴HTML进富文本:

if(this.title=="源码"){

this.title="文本";

displayCode(true); //使用本上火之前写的富文本与HTML互转函数,将富文本转换为HTML源码

}

else{

this.title="源码";

displayCode(false); //将源码转换为富文本

}



因为今晚时间有限,整个网站文章发布用的富文本就先做到这里,有空的时间再慢慢完善。之前其实上火有写过一个实验性的富文本编辑器,虽然支持的富文本编辑功能更多,但因为对浏览器的的兼容没处理好,那个富文本编辑器就先丢回我的实验库吧。先就这样了,各位晚安。2018-6-24,21:32