Vue富文本编辑器 tinymce

╰+哭是因爲堅強的太久メ 2022-04-23 05:28 324阅读 0赞

## 1. 介绍tinymce ##

### 1.1 查看官网[https://www.tiny.cloud/][https_www.tiny.cloud] ###

### 1.2 查看样子 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx_size_16_color_FFFFFF_t_70][]

## 2 入门使用 ##

### 2.1 资源下载 ###

第一步：npm install @tinymce/tinymce-vue -S

第二步：npm install tinymce -S

### 2.2安装之后，在 node\_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 **static** 目录下 ###

### 2.3 tinymce 默认是英文界面，所以还需要下载一个中文语言包 ###

下载地址：[https://www.tiny.cloud/get-tiny/language-packages/][https_www.tiny.cloud_get-tiny_language-packages]

如图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx_size_16_color_FFFFFF_t_70 1][]

下载后解压提取：zh\_CN.js 并拷贝到**static/**tinymce/目录下面

![2019012411004140.png][]

最后目录结构为

![20190124110216197.png][]

## 3. 初始化页面 ##

导包

import tinymce from 'tinymce/tinymce'
    import 'tinymce/themes/modern/theme'
    import Editor from '@tinymce/tinymce-vue'

**注意** 这里的Editor是tinymce-vue 的一个组件 需要在自己的页面注册后使用

export default {
      name: 'Tinymce',
      components: { Editor },

### 3.2 添加页面代码 ###

### 3.3 编辑器需要一个 skin 才能正常工作，所以要设置一个 skin\_url 指向之前复制出来的 skin 文件 ###

editorInit: {
      language_url: '/static/tinymce/zh_CN.js',
      language: 'zh_CN',
      skin_url: '/static/tinymce/skins/lightgray',
      height: 300
    }

此段代码放在data()\{\}函数中，直接返回即可

data() {
        return { editorInit: { language_url: '/static/tinymce/zh_CN.js', language: 'zh_CN', skin_url: '/static/tinymce/skins/lightgray', height: 300 }}
      }

### 3.4 在mounted也要初始化一次 ###

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

## 4. 贴出完整的代码 ##

<template>
      <div class='tinymce'>
        <h1>tinymce</h1>
        <editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
        <div v-html='tinymceHtml'></div>
      </div>
    </template>
    
    <script>
    import tinymce from 'tinymce/tinymce'
    import 'tinymce/themes/modern/theme'
    import Editor from '@tinymce/tinymce-vue'
    export default {
      name: 'tinymce',
      data () {
        return {
          tinymceHtml: '请输入内容',
          init: {
            language_url: '/static/tinymce/zh_CN.js',
            language: 'zh_CN',
            skin_url: '/static/tinymce/skins/lightgray',
            height: 300,
            plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
            toolbar:
              'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
            branding: false
          }
        }
      },
      mounted () {
        tinymce.init({})
      },
      components: {Editor}
    }
    </script>

[https_www.tiny.cloud]: https://www.tiny.cloud/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx_size_16_color_FFFFFF_t_70]: /images/20220323/ab3e32ed96b4499b9f6d22136116ac04.png
[https_www.tiny.cloud_get-tiny_language-packages]: https://www.tiny.cloud/get-tiny/language-packages/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx_size_16_color_FFFFFF_t_70 1]: /images/20220323/28025ca09c104446bfe7f2d4270b09a0.png
[2019012411004140.png]: /images/20220323/e878c38cfca74c7cb037cd8a56727768.png
[20190124110216197.png]: /images/20220323/8f2cc0802d744fffbb264a2f8f2c40b6.png