vue项目中使用tinymce富文本编辑器(vite初始化项目)

简介

TinyMCE是一款是一个轻量级的基于浏览器的所见即所得编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持

TinyMCE英文文档and*TinyMCE中文文档*中英文文档奉上

编辑器含有付费插件及拓展服务,不过大部分功能都可以通过官方下载免费下载引入使用即可. 下面介绍编辑器的具体安装使用

使用vite初始化以一个vue项目这样会使你的项目快的飞起！！！vite初始化vue2

vue中添加富文本编辑器tinymce

前言：***TinyMCE文档*官方文档中之叙述了CDN的引入方式，想要使用vue来实现tinymce却不知道如何下手，三秒钟教你使用。博主真帅，博主真帅！！！

1. 安装tinymce依赖项

引入安装：tinymce ,@tinymce/tinymce-vue 插件

// 使用npm  必须安装好node.js
npm install tinymce @tinymce/tinymce-vue -S             // vue3
npm install tinymce @tinymce/tinymce-vue@3.2.6 -S       // vue2
​
// 使用yarn
yarn add tinymce @tinymce/tinymce-vue -S                // vue3
yarn add tinymce @tinymce/tinymce-vue@3.2.6 -S          // vue2

vue2和vue3安装的方式不同，我这里采用3.2.6版本，这里主要以vue2实现！！！

2. 手动引入

.
├── public  
│   ├── tinymce
│       ├── langs
│           ├── zh_CN.js      // 中文汉化包
│       ├── plugins           // 插件
│       ├── skins             // 工作栏
│   ├── favicon.ico       

在node_modules中找到tinymce目录将目录中skins和plugins文件夹复制到public/tinymce文件夹下，提供插件和工作栏更多插件请查看

*[中文汉化包](www.tiny.cloud/get-tiny/la…)*`，下载解压langs/zh_CN.js

不要问我为什么这么做，因为这样做能跑！！！

3. 在Home.vue组件引入及使用

<--! HTML部分 -->
  <template>
    <div>
        <Editor :id="tinymceId" v-model="myValue" :init="init" :disabled="disabled"></Editor>
    </div>
</template>

script部分 import

<--! script部分 import -->
<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/models/dom' 
​
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/advlist'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/preview'
</script>

script部分 component

// 注册组件
components: {
   Editor
},

script部分 data

data() {
        return {
            myValue: '',
            tinymceId: '',
            init: {
                selector: '#tinymce',
                language_url: './tinymce/langs/zh_CN.js', //汉化路径是自定义的
                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', //字体大小
                height: 500, //高度
                placeholder: '富文本文件',
                branding: false, //隐藏右下角技术支持
            }
        }
    },

script部分 props

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',
        },
    }

script剩余部分

//监听内容变化
value(newValue) {
   this.myValue = newValue || ''
},
mounted() {
   tinymce.init({})
},

这样就实现成功了！！！!

绑定的值为myValue，值是HTML + css数据！！！

最后

vite下一代前端开发与构建工具，真的很快，建议使用 ！！！vite + vue2教程

最近项目使用到富文本工具，用户只需要自己填写内容，就可以实现统一模版，这样就大大的减少了开发量！！！

一鸣惊人，毋庸置疑！！！

新时代搬砖人\