实现:将富文本编辑器tinymce带html标签的字符串内容显示在表格单元格内
自己在用iview做一个内部管理系统时用到到了富文本编辑器tinymce,一般富文本编辑器最终的内容都是带html标签的字符串,然后存入数据库,前端再显示,如果在一般组件或块内显示这种带html格式的文本,可以直接用Vue的指令v-html即可,但是iview的table组件API中显示列的数据的话要么纯文本,要么用Render渲染特殊的文本,例如像官方例子中的按钮:
但是像下图中tinymce中生成的带html结构的文本如何渲染?
编辑器中的内容:
实际生成的html结构的内容:
肯定不能用v-html,千万别想着用该指令去渲染,切记:在Vue的Render函数中本身不存在指令不指令的。
那么该如何实现?用html的innerHtml属性,方法如下:
用createElement函数第二个参数数据对象中的domProps属性!
createElement函数以及Render渲染详细知识见我另外一篇文章
通过上面的方法渲染后的结果如下:
达到要求!
ps: 对于将tinymce封装为vue组件有问题的童鞋可以给我留言,我也遇到了不少坑。