富文本是管理后台一个核心的功能,但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路,市面上常见的富文本都基本用过了,最终权衡了一下选择了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>

源码地址:https://gitee.com/xhs101/sa-token.git

Logo

前往低代码交流专区

更多推荐