【vue】vue 项目中使用tinymce+tinymce-vue
vue 项目中使用tinymce+tinymce-vue
富文本是管理后台一个核心的功能,但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路,市面上常见的富文本都基本用过了,最终权衡了一下选择了Tinymce。
这里在简述一下推荐使用 tinymce 的原因:tinymce 是一家老牌做富文本的公司(这里也推荐 ckeditor,也是一家一直做富文本的公司,新版本很不错),它的产品经受了市场的认可,不管是文档还是配置的自由度都很好。在使用富文本的时候有一点也很关键就是复制格式化,之前在用一款韩国人做的富文本 summernote 被它的格式化坑的死去活来,但 tinymce 的去格式化相当的好,它还有一些增值服务(付费插件),最好用的就是
powerpaste
,非常的强大,支持从 word 里面复制各种东西,而且还帮你顺带格式化了。富文本还有一点也很关键,就是拓展性。楼主用 tinymce 写了好几个插件,学习成本和容易度都不错,很方便拓展。最后一点就是文档很完善,基本你想得到的配置项,它都有。tinymce 也支持按需加载,你可以通过它官方的 build 页定制自己需要的 plugins。
以上描述来自:富文本 | vue-element-admin
效果图:
tinymce官方文档:Quick start | Docs | TinyMCE
tinymce官方github:GitHub - tinymce/tinymce: The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular
1.安装 tinymce
vue2.X版本
npm install tinymce@5.1.0 -S
npm install @tinymce/tinymce-vue@3.0.1 -S
2.再然后把node_modules/tinymce下的skins 文件夹复制到public文件夹下
3.下载中文语言包
Language Packages | Trusted Rich Text Editor | TinyMCE
把解压后的中文语言包zh_CN.js复制到public文件夹下
4.新建一个富文本编辑器的页面 tinymce.vue
<template>
<div class='app-container'>
<h1>tinymce</h1>
<editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
<div v-html='tinymceHtml'></div>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'
export default {
name: 'tinymce',
data () {
return {
tinymceHtml: '请输入内容',
init: {
language_url: '/tinymce/zh_CN.js',
language: 'zh_CN',
skin_url: '/tinymce/skins/ui/oxide',
height: 300,
plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
toolbar:
'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
branding: false
}
}
},
mounted () {
tinymce.init({})
},
components: {Editor}
}
</script>
更多推荐
所有评论(0)