甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
因为最近有个需求，在从后台定时获取数据后展示，可以加粗和改变字体颜色，并且支持redo和undo，但不支持编辑文字，其实就是加个富文本但不能编辑。我刚拿到需求想，这不是很简单的需求，但后来发现这就是个坑。。
创新互联长期为上千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为红山企业提供专业的做网站、网站制作，红山网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。
1、刚一开始，我用了项目原本使用的富文本编辑器 vue-html5-editor ,但发现并不能实现不编辑文字又能改样式，这时的我还没有意识到事情的严重性，以为只是个例，于是我又找了另一款富文本编辑器。
2、 wangeditor 是一款国人开发的富文本编辑器，轻量、强大，但它也不支持不编辑文字又能改样式，于是我觉得我得明白这些编辑器的原理到底是怎样的。
3、在查看了源码后，我终于明白上面的两款编辑器为什么不能不编辑文字又能改样式。上面的编辑器实现原理是根据 contenteditable 这个属性来使一个div变为可编辑状态，并且利用 execCommand 方法实现粗体、字体等一系列样式实现，但这个方法只在div是可编辑状态时可用，所以当我把contenteditable改为false后，execCommand就不管用了，所以才改不了样式。
4、知道了这点后，我明白应该寻找一款不依赖execCommand的富文本编辑器，我找到了 tiptap 和 ckeditor5 。
5、在对这两款进行了一定研究后，我发现了另一问题--它们会清除元素中的自定义属性。
例如这样的数据，会变为这样
这是我不能接受的，我开始了漫长的寻找解决办法之路。
经过了很长时间的看源码--查资料--看源码，终于解决了这个问题。
我使用的是 element-tiptap ，其实直接使用tiptap也可以，但因为我的项目就是使用的element-ui，所以我直接使用了这个库。
首先需要
然后
具体的我就不说了，我主要说自己写的span这个节点
attrs里就是需要保留的属性，parseDOM就是解析dom时所触发的方法，可以在这里获取到属性，在toDOM生成DOM是把这些属性加上。
======================================================================================》
最后我还是使用了quill，因为delta。。。
quill配置如下：
后台的数据处理与实时联动用到了ShareDB和richText
处理数据时使用 wss动态给到delta数据，然后使用setContents显示到页面上
使用text-change监听事件监听文本改动并返回
记录一下。
// 全局组件名称，使用new VueHtml5Editor(options)时该选项无效 // global component name name: "vue-html5-editor",// 是否显示模块名称，开启的话会在工具栏的图标后台直接显示名称 // if set true,will append module name to toolbar after icon showModuleName: false,// 自定义各个图标的class，默认使用的是font-awesome提供的图标 // custom icon class of built-in modules,default using font-awesome icons: { text: "fa fa-pencil", color: "fa fa-paint-brush", font: "fa fa-font", align: "fa fa-align-justify", list: "fa fa-list", link: "fa fa-chain", unlink: "fa fa-chain-broken", tabulation: "fa fa-table", image: "fa fa-file-image-o", hr: "fa fa-minus", eraser: "fa fa-eraser", undo: "fa-undo fa", "full-screen": "fa fa-arrows-alt", info: "fa fa-info",
},// 配置图片模块 // config image module image: { // 文件最大体积，单位字节 max file size sizeLimit: 512 * 1024, // 上传参数,默认把图片转为base64而不上传
// upload config,default null and convert image to base64 upload: { url: null, headers: {}, params: {}, fieldName: {}
}, // 压缩参数,默认使用localResizeIMG进行压缩,设置为null禁止压缩
// compression config,default resize image by localResizeIMG ()
// set null to disable compression compress: { width: 1600, height: 1600, quality: 80
}, // 响应数据处理,最终返回图片链接
// handle response data，return image url
uploadHandler(responseText){ //default accept json data like {ok:false,msg:"unexpected"} or {ok:true,data:"image url"}
var json = JSON.parse(responseText)
if (!json.ok) {
alert(json.msg)
} else {
return json.data
}
}
},// 语言，内建的有英文（en-us）和中文（zh-cn） //default en-us, en-us and zh-cn are built-in language: "zh-cn",// 自定义语言 i18n: { //specify your language here
"zh-cn": { "align": "对齐方式", "image": "图片", "list": "列表", "link": "链接", "unlink": "去除链接", "table": "表格", "font": "文字", "full screen": "全屏", "text": "排版", "eraser": "格式清除", "info": "关于", "color": "颜色", "please enter a url": "请输入地址", "create link": "创建链接", "bold": "加粗", "italic": "倾斜", "underline": "下划线", "strike through": "删除线", "subscript": "上标", "superscript": "下标", "heading": "标题", "font name": "字体", "font size": "文字大小", "left justify": "左对齐", "center justify": "居中", "right justify": "右对齐", "ordered list": "有序列表", "unordered list": "无序列表", "fore color": "前景色", "background color": "背景色", "row count": "行数", "column count": "列数", "save": "确定", "upload": "上传", "progress": "进度", "unknown": "未知", "please wait": "请稍等", "error": "错误", "abort": "中断", "reset": "重置"
}
},// 隐藏不想要显示出来的模块 // the modules you don't want hiddenModules: [],// 自定义要显示的模块，并控制顺序 // keep only the modules you want and customize the order. // can be used with hiddenModules together visibleModules: [ "text", "color", "font", "align", "list", "link", "unlink", "tabulation", "image", "hr", "eraser", "undo", "full-screen", "info",
],// 扩展模块，具体可以参考examples或查看源码 // extended modules modules: { //omit,reference to source code of build-in modules }
Html是英文HyperTextMarkupLanguage的缩写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或FrontPageEditor等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件，既简单又方便，它通常使用标志名/标志名来表示标志的开始和结束(例如html/html标志对)，因此在Html文档中这样的标志对都必须是成对使用的。
Html的基本标志： 1.html/html html标志用于Html文档的最前边，用来标识Html文档的开始。而/html标志恰恰相反，它放在Html文档的最后边，用来标识Html文档的结束，两个标志必须一块使用。 2.head/head head和/head构成Html文档的开头部分，在此标志对之间可以使用title/title、script/script等等标志对，这些标志对都是描述Html文档相关信息的标志对，head/head标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。 3.body/body body/body是Html文档的主体部分，在此标志对之间可包含p、/p、h1、/h1、br、hr等等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。body标志中还可以有以下属性：属性 用途 示例 bodybgcolor="#rrggbb"设置背景颜色。bodybgcolor="red"红色背景 bodytext="#rrggbb"设置文本颜色。bodytext="#0000ff"蓝色文本 bodylink="#rrggbb"设置链接颜色。bodylink="blue"链接为蓝色 bodyvlink="#rrggbb"设置已使用的链接的颜色。bodyvlink="#ff0000" bodyalink="#rrggbb"设置正在被击中的链接的颜色。bodyalink="yellow" 说明:以上各个属性可以结合使用，如bodybgcolor="red"text="#0000ff"。引号内的rrggbb是用六个十六进制数表示的RGB(即红、绿、蓝三色的组合)颜色，如#ff0000对应的是红色。此外，还可以使用Html语言所给定的常量名来表示颜色：Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal，如bodytext="Blue"表示body/body标志对中的文本使用蓝色显示在浏览器的框内。 4.title/title 使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，只要在title/title标志对之间加入您要显示的文本即可。注意：title/title标志对只能放在head/head标志对之间。
1.
Mercury
:
HTML5
Powered
WYSIWYG
Editor
Mercury
是个全功能的编辑器，包含TinyMCE和CKEditor同样的功能，但又有不同的特性。与iFrames有所不同，它使用了HTML5内容可编辑功能等。Mercury
是由
CoffeeScript
代码编写
自1999年以后HTML 4.01 已经改变了很多，今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。
为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如： 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等。 video标记
定义和用法：
/video 标签定义视频，比如电影片段或其他视频流。
audio 标记
定义和用法
/audio 标签定义声音，比如音乐或其他音频流。
实例：
一段简单的HTML5 音频
audio src=
您的浏览器不支持 audio 标签。
/audio
canvas 标记
定义和用法：
canvas 标签定义图形，比如图表和其他图像。
HTML5 的 canvas 元素使用JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
实例：
通过 canvas 元素来显示一个红色的矩形：
canvas id=myCanvas/canvas
script type=text/javascript
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
/script 除了原先的DOM接口，HTML5增加了更多API,如：
1． 用于即时2D绘图的Canvas标签
2． 定时媒体回放
3． 离线数据库存储
4．文档编辑
5． 拖拽控制
6． 浏览历史管理 新的解析顺序新的元素：section, video, progress, nav, meter, time, aside, canvasinput
元素的新属性：日期和时间，email, url。
新的通用属性：ping, charset, async
全域属性：id, tabindex, repeat。
移除元素：center, font, strike。 就是Html标注的属性里加上runat=server所构成的控件，至于Html标注和Html控件之间的区别很明显，Html控件是运行于服务器端，Html标注是运行于客户端。
基本Html控件有：HtmlTexArea\HtmlTable\HtmlImage\HtmlButton\HtmlSelect\HtmlForm\HtmlInput。
自定义的Html控件是根据自己的需求定义。当自主开发效率低，可以从技术社区、源码网站下载需要的控件。比如，需要插入table, image, links 等标签。不必自己开发，可以使用：ComponentOne Wijmo Editor等。
免费HTML5图表库——.Net图表控件Chart FX，深受大家喜爱，相信大家已经非常熟悉了。而且还从Chart FX的开发商SoftwareFX获得一个激动人心的消息：该公司已推出一套为HTML5，jQuery和JavaScript开发者设计的图表库——jChartFX，而且jChartFX是免费的！ .Net图表控件Chart FX相信大家已经非常熟悉了。Chart FX的开发商SoftwareFX推出的一套为HTML5、jQuery和JavaScript开发者设计的免费HTML5图表库——jChartFX！
jChartFX亮点： jChartFX充分利用了HTML5，CSS和SVG，让您能够在浏览器提供美观优越的图表和更丰富的最终用户体验。 jChartFX拥有很多令人振奋的功能，它在无插件纯JavaScript的浏览器上运行，这意味着在提高了网站安全性和速度的同时，最大程度的减少了网站服务器的负荷。 jChartFX还能够自动整合到jQuery UI ThemeRoller，自动读取并解释jQuery的主题和CSS文件，能够快速适应您的页面布局和设计，无需一行代码。 jChartFX支持JSON，JSON能够帮助您实现，任何数据源中的数据都可以展现到图表中。 jChartFX还支持超过40种的2D、3D图表类型，免费的图表控件中支持如此之多的图表展示类型实属难得。 注：在下面表格中4: 指在HTML 4.01 中定义了该元素 5: 指在HTML 5 中定义了该元素 按字母顺序排列的标签列表标签 描述 !--...-- 定义注释 4 5 !DOCTYPE 定义文档类型 4 5 a 定义超链接 4 5 abbr 定义缩写 4 5 acronym HTML 5 中不支持 4 address 定义地址元素 4 5 applet 定义 applet（HTML 5 中不支持） 4 area 定义图像映射中的区域 4 5 article 定义 article 5 aside 定义页面内容之外的内容 5 audio 定义声音内容 5 b 定义粗体文本 4 5 base 定义页面中所有链接的基准URL 4 5 basefont HTML 5 中不支持，请使用CSS 代替 4 bdo 定义文本显示的方向 4 5 big 定义大号文本（HTML 5 中不支持） 4 blockquote 定义长的引用 4 5 body 定义 body 元素 4 5 br 插入换行符 4 5 button 定义按钮 4 5 canvas 定义图形 5 caption 定义表格标题 4 5 center 定义居中的文本（HTML 5 中不支持） 4 cite 定义引用 4 5 code 定义计算机代码文本 4 5 col 定义表格列的属性 4 5 colgroup 定义表格列的分组 4 5 command 定义命令按钮 5 datalist 定义下拉列表 5 dd 定义定义的描述 4 5 del 定义删除文本 4 5 details 定义元素的细节 5 dfn 定义定义项目 4 5 dir 定义目录列表（HTML 5 中不支持） 4 div 定义文档中的一个部分 4 5 dl 定义定义列表 4 5 dt 定义定义的项目 4 5 em 定义强调文本 4 5 embed 定义外部交互内容或插件 5 fieldset 定义 fieldset 4 5 figcaption 定义 figure 元素的标题 5 figure 定义媒介内容的分组，以及它们的标题 5 font HTML 5 中不支持 4 footer 定义 section 或 page 的页脚 5 form 定义表单 4 5 frame 定义子窗口（框架）（HTML 5 中不支持） 4 frameset 定义框架的集（HTML 5 中不支持） 4 h1 to h6 定义标题1 到标题6 4 5 head 定义关于文档的信息 4 5 header 定义 section 或 page 的页眉 5 hgroup 定义有关文档中的 section 的信息 4 5 html 定义 html 文档 4 5 i 定义斜体文本 4 5 iframe 定义行内的子窗口（框架） 4 5 img 定义图像 4 5 input 定义输入域 4 5 ins 定义插入文本 4 5 keygen 定义生成密钥 5 isindex 定义单行的输入域（HTML 5 中不支持） 4 kbd 定义键盘文本 4 5 label 定义表单控件的标注 4 5 legend 定义 fieldset 中的标题 4 5 li 定义列表的项目 4 5 link 定义资源引用 4 5 map 定义图像映射 4 5 mark 定义有记号的文本 4 5 menu 定义菜单列表 4 5 meta 定义元信息 4 5 meter 定义预定义范围内的度量 5 nav 定义导航链接 5 noframes 定义 noframe 部分（HTML 5 中不支持） 4 noscript 定义 noscript 部分 4 5 object 定义嵌入对象 4 5 ol 定义有序列表 4 5 optgroup 定义选项组 4 5 option 定义下拉列表中的选项 4 5 output 定义输出的一些类型 5 p 定义段落 4 5 param 为对象定义参数 4 5 pre 定义预格式化文本 4 5 progress 定义任何类型的任务的进度 5 q 定义短的引用 4 5 rp 定义若浏览器不支持 ruby 元素显示的内容 5 rt 定义 ruby 注释的解释 5 ruby 定义 ruby 注释 5 s 定义加删除线的文本（HTML 5 中不支持） 4 samp 定义样本计算机代码 4 5 script 定义脚本 4 5 section 定义 section 4 5 select 定义可选列表 4 5 small 定义小号文本 4 5 source 定义媒介源 4 5 span 定义文档中的 section 4 5 strike 定义加删除线的文本（HTML 5 中不支持） 4 strong 定义强调文本 4 5 style 定义样式定义 4 5 sub 定义下标文本 4 5 summary 定义 details 元素的标题 5 sup 定义上标文本 4 5 按字母顺序排列的标签列表标签 描述 4: 指在HTML 4.01 中定义了该元素
5: 指在HTML 5 中定义了该元素 table 定义表格 4 5 tbody 定义表格的主体 4 5 td 定义表格单元 4 5 textarea 定义 textarea 4 5 tfoot 定义表格的脚注 4 5 th 定义表头 4 5 thead 定义表头 4 5 time 定义日期/时间 5 title 定义文档的标题 4 5 tr 定义表格行 4 5 tt 定义打字机文本 4 5u 定义下划线文本（HTML 5 中不支持） 4 ul 定义无序列表 4 5 var 定义变量 4 5 video 定义视频 5 xmp 定义预格式文本（HTML 5 中不支持） 4 HTML 5 元素可拥有事件属性，这些属性在浏览器中触发行为，比如当用户单击一个HTML 5元素时启动一段 JavaScript。下面列出的事件属性，可以把它们插入 HTML 标签来定义事件行为。
HTML 5 中的新事件属性：onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。
4: 指在HTML 4.01 中定义了该元素。
5: 指在HTML 5 中定义了该元素。
HTML 5不再支持的 HTML 4.01 属性：onreset。 事件属性属性 值 描述 4 5 onabort script 发生 abort 事件时运行脚本。 5 onbeforeonload script 在元素加载前运行脚本。 5 onblur script 当元素失去焦点时运行脚本。 4 5 onchange script 当元素改变时运行脚本。 4 5 onclick script 在鼠标点击时运行脚本。 4 5 oncontextmenu script 当菜单被触发时运行脚本。 5 ondblclick script 当鼠标双击时运行脚本。 4 5 ondrag script 只要脚本在被拖动就运行脚本。 5 ondragend script 在拖动操作结束时运行脚本。 5 ondragenter script 当元素被拖动到一个合法的放置目标时，执行脚本。 5 ondragleave script 当元素离开合法的放置目标时。 5 ondragover script 只要元素正在合法的放置目标上拖动时，就执行脚本。 5 ondragstart script 在拖动操作开始时执行脚本。 5 ondrop script 当元素正在被拖动时执行脚本。 5 onerror script 当元素加载的过程中出现错误时执行脚本。 5 onfocus script 当元素获得焦点时执行脚本。 4 5 onkeydown script 当按钮按下时执行脚本。 4 5 onkeypress script 当按键被按下时执行脚本。 4 5 onkeyup script 当按钮松开时执行脚本。 4 5 onload script 当文档加载时执行脚本。 4 5 onmessage script 当 message 事件触发时执行脚本。 5 onmousedown script 当鼠标按钮按下时执行脚本。 4 5 onmousemove script 当鼠标指针移动时执行脚本。 4 5 onmouseover script 当鼠标指针移动到一个元素上时执行脚本。 4 5 onmouseout script 当鼠标指针移出元素时执行脚本。 4 5 onmouseup script 当鼠标按钮松开时执行脚本。 4 5 onmousewheel script 当鼠标滚轮滚动时执行脚本。 5 onreset script 当表单重置时执行脚本。不支持。 4 onresize script 当元素调整大小时运行脚本。 5 onscroll script 当元素滚动条被滚动时执行脚本。 5 onselect script 当元素被选中时执行脚本。 4 5 onsubmit script 当表单提交时运行脚本。 4 5 onunload script 当文档卸载时运行脚本。 5 HTML 5标签拥有属性。在每个标签的参考页中可以找到相应的特殊属性。这里列出的属性是通用于每个标签的核心属性和语言属性（有个别例外）。
4: 指在HTML 4.01 中定义了该元素
5: 指在HTML 5 中定义了该元素
HTML 5标签中的新属性有：contenteditable, contextmenu, draggable, irrelevant, ref,registrationmark, template
HTML 5 中不再支持的属性：accesskey 标签属性属性 值 描述 4 5 acceskey a character 设置访问一个元素的键盘快捷键。不支持。 4 class class_ruleorstyle_rule 元素的类名。 4 5 contenteditable true
false 设置是否允许用户编辑元素。 5 contentextmenu id of a menu element 给元素设置一个上下文菜单。 5 dir ltr
rtl 设置文本方向。 4 5 draggable true
false
auto 设置是否允许用户拖动元素。 5 id id_name 元素的唯一 id。 4 5 irrelevant true
false 设置元素是否相关。不显示非相关的元素。 5 lang language_code 设置语言码。 4 5 ref urlorelementID 引用另一个文档或文档上另一个位置。仅在 template 属性设置时使用。 5 registrationmark registration mark 为元素设置拍照。可规定于任何 rule 元素的后代元素，
除了 nest 元素。 5 style style_definition 行内的样式定义。 4 5 tabindex number 设置元素的 tab 顺序。 4 5 template urlorelementID 引用应该应用到该元素的另一个文档或本文档上另一个位置。 5 title tooltip_text 显示在工具提示中的文本。 4 5 HTML5可以提供:
1.提高可用性和改进用户的友好体验;
2.有几个新的标签，这将有助开发人员定义重要的内容；
3.可以给站点带来更多的多媒体元素(视频和音频)；
4.可以很好的替代FLASH和Silverlight；
5.当涉及到网站的抓取和索引的时候，对于SEO很友好；
6.将被大量应用于移动应用程序和游戏。
谷歌和HTML5
2010年5月22日，谷歌创建了一个涂鸦来纪念Pac Man的视频游戏。这个涂鸦是一个动画，同时也是一个可以玩的Pac Man的游戏。这个涂鸦就是谷歌通过使用HTML5标准制作的，当然谷歌也提供一个FLASH版本来支持不兼容HTML5的浏览器。我敢打赌，这是大多数 互联网网民第一次和HTML5的接触。对于个人来说，这是一个兴奋的消息。以我的观点，这个涂鸦提供了一个机会可以窥视未来互联网、网页、移动应用软件和游戏等发展趋势。对于搜索引擎优化，他开辟了我更多的想象，它让我思考HTML5在SEO领域的潜力。网站转移到HTML5标准对于SEO有什么优势?
HTML 5开发领域的领军人物包括Sencha，Adobe，Appcelerator，appMobi及Facebook，亚马逊，Google三大巨头。不管你是想开发出新型视频应用的开发商如Brightcover还是想开发新型音频应用的开发商如Soundcloud，不论是桌面应用还是移动应用，HTML 5都是创新的主旋律。
HTML5与SEO
一：使搜索引擎更加容易抓取和索引
对于一些网站，特别是那些严重依赖于FLASH的网站HTML5是一个大福音。如果你有一个都是FLASH的站点，你就一定会看到切换到HTML5的 好处。首先，搜索引擎的蜘蛛将能够抓取你的站点和索引你的内容。所有嵌入到动画中的内容将全部可以被搜索引擎读取。在搜索引擎优化的基本理论中，这一方面将会驱动你的网站获得更多的右击流量。
二：提供更多的功能，提高用户的友好体验
使用HTML5的另一个好处就是它可以增加更多的功能。对于HTML5的功能性问题，我们从全球几个主流站点对它的青睐就可以看出。社交网络大亨Facebook已经推出他们期待已久的基于HTML5的iPad应用平台，潘多拉也推出他们基于HTML5的音乐播放器的新版本。游戏平台 Zynga也在推出了三款新的在移动设备浏览器上运行的基于HTML5的游戏等等。每天都有不断的基于HTML5的网站和HTML5特性的网站被推 出。保持站点处于新技术的前沿，也可以很好的提高用户的友好体验。
三：可用性的提高，提高用户的友好体验
最后我们可以从可用性的角度上看，HTML5可以更好的促进用户于网站间的互动情况。多媒体网站可以获得更多的改进，特别是在移动平台上的应用，使用 HTML5可以提供更多高质量的视频和音频流。到目前为止，事实就是iPhone和iPad将不会支持FLASH，同时ADOBE公司也公开声明将 停止FLASH基于移动平台的开发，可以这么说——移动平台日后视频音频是HTML5的天下！