推荐一款适合移动端使用的富文本插件tinymce

一、推荐原因

    推荐原因主要是因为WangEditor富文本编辑器的官方版本目前并不支持移动端。WangEditor主要是基于PC端浏览器的使用，其页面布局和功能设计更适用于桌面环境。在移动端，由于屏幕大小和交互方式的限制，WangEditor可能无法正常展示和使用。

二、文档

TinyMCE中文文档中文手册 (ax-z.cn)

三、基本使用

安装和使用

首先安装 npm install tinymce -S

其次根据项目的vue版本选择tinymce-vue版本,如果你使用的Vue3.0可直接

npm install @tinymce/tinymce-vue -S

使用Vue2.x的项目则需安装较低的版本,我在项目采用的版本是 "3.2.6"的版本,则安装

npm install @tinymce/tinymce-vue@3.2.6 -S

接下来在static新建tinymce文件夹创建以下文件夹

下载tinymce完成后在node_modules中找到tinymce目录将目录中skins和plugins文件夹复制至我们新建的tinymce文件夹中,使用编辑器的主题样式及扩展插件,后续有需要使用到拓展插件和主题都可以下引入,文档中有提供更多实用的的插件可供 参考地址

接着下载中文汉化包 链接 官方提供许多中汉化包,中文文档下载地址

在创建的tinymce-editor组件中引入依赖

<template>
<Editor :id="tinymceId" v-model="myValue" :init="init" :disabled="disabled"></Editor>
</template>

<script>
import tinymce from 'tinymce/tinymce' //tinymce默认hidden，
import Editor from '@tinymce/tinymce-vue' //编辑器引入
import 'tinymce/themes/silver/theme' //编辑器主题
import 'tinymce/icons/default' //引入编辑器图标icon
import 'tinymce/plugins/textcolor'//颜色
import 'tinymce/plugins/advlist' //高级列表
import 'tinymce/plugins/autolink' //自动链接
import 'tinymce/plugins/link' //超链接
import 'tinymce/plugins/image' //插入编辑图片
import 'tinymce/plugins/lists' //列表插件
import 'tinymce/plugins/charmap' //特殊字符
import 'tinymce/plugins/media' //插入编辑媒体
import 'tinymce/plugins/wordcount' // 字数统计
import 'tinymce/plugins/table'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/imagetools' 


init: {
        selector: '#tinymce',
        language_url: '/tinymce/langs/zh_CN.js', //汉化路径是自定义的，一般放在public或static里面
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide', //皮肤
        plugins: this.plugins, //插件
        //工具栏
        toolbar: this.toolbar,
        toolbar_location: '/',
        fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', //字体大小
        font_formats: fonts.join(';'),//引入字体如['宋体=宋体','微软雅黑=微软雅黑'],
        height: 500, //高度
        placeholder: '在这里输入盖伦好帅~',
        branding: false, //隐藏右下角技术支持
      }

props: {
    //内容
    value: {
      type: String,
      default: '',
    },
    //是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    //插件
    plugins: {
      type: [String, Array],
      default: 'advlist autolink link image lists charmap table fullscreen imagetools preview',
    },
    //工具栏
    toolbar: {
      type: [String, Array],
      default:
        'undo redo |  formatselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent lists image | fullscreen | preview',
    },
    
    //监听内容变化
    value(newValue) {
      this.myValue = newValue || ''
    },


mounted() {
    tinymce.init({})
},
</script>