web网页嵌入富文本编辑器

tinymce对于vue提供一个tinymce组件

@tinymce/tinymce-vue

呈现效果

1.先把tinymce下载下来

npm install tinymce --save

2.下载组件

npm install @tinymce/tinymce-vue --save

3.下载中文语言包

语言包

把下载好的语言包放assets里面

4.在组件里面引入tinymce组件

```

<editor id="tinymce" v-model="tinymceHtml" :init="init"></editor>

```

```import tinymce from "tinymce/tinymce";

import "tinymce/themes/silver/theme";

import Editor from "@tinymce/tinymce-vue";

import 'tinymce/skins/ui/oxide/skin.min.css';

import '@/assets/tinymce/zh_CN.js';

import "tinymce/plugins/image";

import "tinymce/plugins/link";

import "tinymce/plugins/code";

import "tinymce/plugins/table";

import "tinymce/plugins/lists";

import "tinymce/plugins/contextmenu";

import "tinymce/plugins/wordcount";

import "tinymce/plugins/colorpicker";

import "tinymce/plugins/textcolor";

import "tinymce/plugins/save";`

data() {

return{

`tinymceHtml: "请输入内容",`

}

}

components: {

Editor,

},

init: {

language: "zh_CN",

height: 300,

plugins:

"link lists image code table colorpicker textcolor wordcount contextmenu save",  //自定义配置功能

toolbar:

"bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat | save",//自定义配置功能

branding: false, 

autoRefresh: true,

inputStyle:'textarea'

},

mounted () {

tinymce.init({

})

},```