[JavaScript知识库]前端富文本编辑器 vue + tinymce超简单使用方法

vue项目中tinymce使用步骤如下：

前言

tinymce中文文档地址（不全）：tinymce.ax-z.cn/

tinymce英文原版文档地址：www.tiny.cloud/docs/demo/

1、npm 安装 tinymce 和 @tinymce/tinymce-vue

根据项目的vue版本选择安装：如果是vue3安装

npm install tinymce -S

npm install @tinymce/tinymce-vue -S

如果是vue2安装

npm install tinymce@5.1.0 -S

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

2、在node_modules中找到tinymce目录，将目录中skins和plugins文件夹复制到public文件夹下

3、如果需要汉化（可选）

下载汉化包 地址：zh_CN.js ，下载汉化包，将 下载的zh_CN.js文件直接放到public目录下
或者在我的资源免费下载下来使用即可

4、接下来开始使用（代码部分）

先来看效果图

（1）在template模板中

 <myEditor id="tinymce" v-model=" gist.description" :init="init" > </myEditor>

（2）script必要的引入

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

（3）script引入需要的插件（可选）

import "tinymce/plugins/image";  //引入图片插件
import "tinymce/plugins/link";   //引入超链接插件
import "tinymce/plugins/code";   //引入代码插件
import "tinymce/plugins/table";  //引入表格插件
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";

（4）data中

data(){
  return{
    init:{
          language_url: "/zh_CN.js",   // 语言包位置，因为放在public下所以可以省略public
          selector: "#tinymce", //tinymce的id
          language: "zh_CN", //语言类型,汉化
          skin_url: "/skins/ui/oxide",
          height: 500, //编辑器高度
          branding: false,// 隐藏品牌，隐藏状态栏中显示的“ Powered by Tiny ”链接,
          plugins: 'link image lists table wordcount code paste',// 需要用到的功能插件，如链接，列表等等
      // 工具栏 toolbar，根据需要写对应的工具名称，顺序及分割线等等
         toolbar: undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat',
         },
    gist:{description:'4448'},
  }
},

（5）components注册组件

components:{
  myEditor:Editor,
},

（6）mounted方法中

mounted () {
  tinymce.init({});
}

完整代码

<template>
  <div class="about" >
   <Divider>tinymce编辑器</Divider>
    <div>
      <myEditor id="tinymce" v-model=" gist.description" :init="init" > </myEditor>
    </div>
  </div>
</template>
<script>
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/plugins/image";  //引入图片插件
import "tinymce/plugins/link";   //引入超链接插件
import "tinymce/plugins/code";   //引入代码插件
import "tinymce/plugins/table";  //引入表格插件
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
export default {
  data(){
    return{
      value:'',
      init:{
            language_url: "/zh_CN.js",   // 语言包位置，因为放在public下所以可以省略public
            selector: "#tinymce", //tinymce的id
            language: "zh_CN", //语言类型,汉化
            skin_url: "/skins/ui/oxide",
            height: 500, //编辑器高度
            branding: false,// 隐藏品牌，隐藏状态栏中显示的“ Powered by Tiny ”链接,
            plugins: 'link image lists table wordcount code',
           // 工具栏toolbar，根据需要写对应的工具名称，顺序及分割线等等
           toolbar: 'undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat'
         },
      gist:{description:'4448'},
    }
  },
  components:{
    myEditor:Editor
  },
  methods:{},
  mounted () {
    tinymce.init({});
  }
}
</script>

以上就是tinymce简单的使用方法