首先tinymce本身是一款很强大的富文本编辑器,兼容传统的项目,也对目前的单页面应用做了适配,比如对vue单独做了适配,在vue项目里面也能快速的引入和开发,而且支持自定义和多语言,可满足市面上绝大部分的也无需求。
Mavon-editor是一款支持markdown的编辑器,可满足于不需要那么多复杂功能的场景,比如记录一下日常生活,不需要图文混排等,虽然它也支持。
调整的原因在是由于tinymce在vue项目下好像不支持获取编辑器里面的纯文本,这就带来一个问题,比如我想在文章列表显示摘要,导致我不得不在文章发表后对文章的内容进行处理,把html 标签剔除,再截取一定长度的文本作为摘要。所有选择了mavon-editor,它支持获取html文本,也支持纯文本,所以对我来说就省去了格式化的操作。
Mavon-editor人引入很简单,在vue项目下使用步骤:
1、安装:npm I mavon-editor -S
2、在页面引入,mode绑定的值就是html内容,在加上一个属性,ref=“mavon-Editor”,这个是用来获取编辑器的纯文本的。
3、提交内容的时候通过this.$refs.mavonEditor.d_render方法获取纯文本。
this.post({ htmlContent: this.form.content, //html 内容 content: this.$refs.mavonEditor.d_render // 纯文本 })
所以提交的时候可将有样式的内容跟纯文本一并保存,这样可以在有需要的时候各取所需。不用再对内容做特殊处理,列表显示摘要的时候就取content,详情就用v-html显示htmlContent就可以了。
领取专属 10元无门槛券
私享最新 技术干货