Vue引⽤Tinymce富⽂本
html富文本框这⾥以Vue CLI为例。
1.使⽤NPM安装Tinymce Vue.js 集成：
  （1）查看Vue版本：
    项⽬根⽬录下的 package.json ⽂件中 dependencies 对象中的 "vue" 就是当前Vue版本。
    （ $ npm list vue ）也可以查看。
1 "dependencies": {
2    "vue": "^2.5.2",
3    "vue-resource": "^1.5.3",
4    "vue-router": "^3.0.1"
5  }
  （2）根据Vue版本安装对应版本的Tinymce：
    tinymce-vue包的版本 4⽀持 Vue.js 3.x，但不⽀持 Vue.js 2.x。对于 Vue.js 2.x 应⽤程序，请使⽤tinymce-vue版本 3。    Vue.js 3.x 版本： $ npm install --save "@tinymce/tinymce-vue@^4"
    Vue.js 2.x 版本： $ npm install --save "@tinymce/tinymce-vue@^3"
    (3) 安装完成之后，到 node_modules ⽬录下的 tinymce\skins，将 skins ⽂件夹拷贝到 static ⽂件下
    (4)下载中⽂语⾔包
    static⽂件夹下，新建tinymce ⽂件，将下载的语⾔包放到tinymce中。
2.引⽤Tinymce：
  （1）引⼊ tinymce ：
1 import tinymce from "tinymce/tinymce";
2 import "tinymce/themes/silver/theme";
3 import Editor from "@tinymce/tinymce-vue";
4 import "tinymce/icons/default/icons";
  （2）tinymce-vue 是⼀个组件，需要先注册再使⽤：
1 components: { Editor }
1<editor id="tinymce" v-model="tinymceHtml" :init="tinymceInit"></editor>
  (3)初始化：
1 tinymceInit: {
2        language_url: "/static/tinymce/langs/zh_CN.js",
3        language: "zh_CN",
4        skin_url: "/static/tinymce/skins/ui/oxide",
5        height: 300
6 },
现在⼤体的界⾯就出来了：
完整代码：
1<template>
2<div class="tinymce">
3<h1>tinymce</h1>
4<editor id="tinymce" v-model="tinymceHtml" :init="tinymceInit"></editor>
5<div v-html="tinymceHtml"></div>
6</div>
7</template>
8
9<script>
10 import tinymce from "tinymce/tinymce";
11 import "tinymce/themes/silver/theme";
12 import Editor from "@tinymce/tinymce-vue";
13 import "tinymce/icons/default/icons";
14 export default {
15  name: "Tinymce",
16  data() {
17return {
18      tinymceHtml: "请输⼊内容",
19      tinymceInit: {
20        language_url: "/static/tinymce/langs/zh_CN.js",
21        language: "zh_CN",
22        skin_url: "/static/tinymce/skins/ui/oxide",
23        height: 300
24      },
25    };
26  },
27  mounted() {
28    tinymce.init({});
29  },
30  components: { Editor }
31 };
32</script>
总结⼀下踩过的坑：
加载界⾯时如出现 Uncaught SyntaxError: Unexpected token '<'
检查⼀下这⼏个地⽅的引⽤是否正确；
theme、icons、language_url 的引⽤路径出错都会出现上⾯的报错。错误界⾯点击去就能看出个⼤概了。我这个是icon路径应⽤错误。
如果发现⽪肤界⾯没出来，⼀⽚空⽩，像这样
这种情况请检查⼀下初始化⾥的 skin_url 路径是否正确。
先写到这。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。