参考tinymce文档:点击此处跳转

步骤一:在vue中引入tinymce(点击跳转查看资料

npm install @tinymce/tinymce-vue -S

步骤二:引入tinymce-vue进入到子组件中

import Editor from '@tinymce/tinymce-vue'

步骤三:注册tinymce-vue进入到组件中

 // 注册tinymce组件
  components: {
    'editor': Editor
  }

步骤四:渲染template组件

     <editor :init="init"></editor>

步骤五:初始化init tinymce

      init: {
        // 组件
        plugins:
          ' lists image colorpicker textcolor wordcount contextmenu autoresize',
        // 工具栏
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent  | undo redo | link unlink image  | removeformat ',
        branding: false,
        min_height: 300
      }

效果图:
在这里插入图片描述
优化:
怎么让组件汉化:
tinymce 汉化包下载:点击此处
首先发现tinymce-vue需要首费才能加入主体才能汉化,因此不得不用tinymce取代tinymce-vue

步骤一:安装tinymce

 npm install tinymce -S

检查是否已经安装了tinymce
在这里插入图片描述

步骤二:在node_modules文件下找到tinymce文档,复制tinymce放入项目的根目录下static的文件夹中

在这里插入图片描述

步骤三:把zh_CN.js放入根目录下static文件夹中

在这里插入图片描述

步骤四:初始化组件

代码


<template>
  <div class="tinymce">
    <h1>tinymce Children</h1>
    <editor  id="tinymce" v-model="tinymceHtml" :init="init"></editor>
  </div>
</template>

<script>
// 引入tinymce主件
import tinymce from './../../static/tinymce/tinymce'
// 必须引入主体才能汉化和显示
import './../../static/tinymce/themes/silver/theme'
// 引入tinymce-vue组件
import Editor from '@tinymce/tinymce-vue'
// 引入图片上传组件
import image from './../../static/tinymce/plugins/image'
export default {
  name: 'tinymce',
  data () {
    return {

      tinymceHtml: '',
      init: {
        // 引入汉化组件
        language_url: './../../static/zh_CN.js',
        // 设定语言为中文
        language: 'zh_CN',
        // 加入主题
        skin_url: './../../static/tinymce/skins/ui/oxide',
        // 注册功能组件
        plugins:
          ' lists image colorpicker textcolor wordcount contextmenu autoresize',
        // 注册工具栏
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent  | undo redo | link unlink image  | removeformat '

      }
    }
  },
  mounted () {
    // 页面加载的时候初始化组件
    tinymce.init({})
  },
  components: { Editor }
}
</script>
<style scoped>
</style>

最后呈现的效果图:
在这里插入图片描述
备注:图片,js,css等等一些类静态文件放在static文件下才会有效
(点击查看补充资料)

源码地址:https://github.com/gyfgyz/vue-tinymce

Logo

前往低代码交流专区

更多推荐