如何在vue项目中引入tinymce富文本并运行

1. 在vue项目中安装tinymce 

npm install @tinymce/tinymce-vue -S

npm install tinymce -S

 2. 安装完成之后，在node_modules中找到tinymce/skins目录，把skins目录拷贝到public文件下。

3.tinymce默认是英文界面，所以需要下载一个中文的语言包https://www.tiny.cloud/get-tiny/language-packages/

4.在页面中引入一下文件

把tinymce封装成一个组件

<template>

<div >

<!-- <div>{{myValue}}</div> -->

<editor v-model = "myValue" :init="init" :disabled="disabled" @onClick="onClick"></editor>

<!-- <button @click="clear">清空内容</button>

<button @click="disabled = true">禁用</button> -->

</div>

</template>

 

<script>

import tinymce from 'tinymce/tinymce'

import Editor from '@tinymce/tinymce-vue'

import 'tinymce/themes/silver'

import 'tinymce/plugins/image'//插入上传图片插件

import 'tinymce/plugins/media'//插入视频插件

import 'tinymce/plugins/table'//插入表格插件

import 'tinymce/plugins/lists'//列表插件

import 'tinymce/plugins/wordcount'//字数统计插件

export default {

components: {

Editor

},

props: {

value: {

type: String,

default: ''

},

disabled: {

type: Boolean,

default: false

},

plugins: {

type: [String, Array],

default: 'lists image media table wordcount'

},

toolbar: {

type: [String, Array],

default: 'undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat'

}

},

name: 'portal',

data: function() {

return {

shortcuts: [],

reports: [],

init: {

language_url: '/tinymce/langs/zh_CN.js',

language: 'zh_CN',

skin_url: '/tinymce/skins/ui/oxide',

// skin_url: '/tinymce/skins/ui/oxide-dark',//暗色系

height: 300,

plugins: this.plugins,

toolbar: this.toolbar,

branding: false,

menubar: false,

// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，

// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler

images_upload_handler: (blobInfo, success, failure) => {

const img = 'data:image/jpeg;base64,' + blobInfo.base64()

success(img)

}

},

myValue: this.value

}

},

mounted() {

tinymce.init({})

},

methods: {

// 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events

// 需要什么事件可以自己增加

onClick (e) {

this.$emit('onClick', e, tinymce)

},

// 可以添加一些自己的自定义事件，如清空内容

clear () {

this.myValue = ''

},

// 鼠标单击的事件

onClick (e) {

this.$emit('onClick', e, tinymce)

},

// 清空内容

clear () {

this.myValue = ''

}

},

watch: {

value (newValue) {

this.myValue = newValue

},

myValue (newValue) {

this.$emit('input', newValue)

}

}

}

</script>

 

5.使用组件

<Tinymce v-model="form.contents" :disabled="disabled" @onClick="onClick" ref="editor"></Tinymce>

//鼠标单击的事件

onClick(e, editor) {

},