tinymce 编辑器踩坑之旅----------自定义插件

针对之前写的要更新一下，因为一直在本地开发，所以没想到最后打包会出现问题

这很显然，就是文件路径找不到了。

所以针对之前为了开发需求而来的办法显然是行不通的，就算行得通了，也会给自己留下大坑。

所以针对路径问题，我想了很多办法，显示换个地方放到public目录下面，打包之后还是找不到文件，依旧存在上述截图问题。

既然文件里面是require文件的，所以修改html问价 使用script方式引入是没问题的，但是总觉得在vue项目里面不应该这么干，于是找了老大讨论了一下。

针对vue-cli3官网和tinymce官网的文档来看，其实编辑器和我拆分写组件似乎没什么问题，于是我们可以把之前的js代码直接写成一个function，然后export一下，在使用的组件里面import之后调用一下，再试试打包。

这样一来，直接挂载都不用了，可以直接调用，然后打包，运行成功。

所以项目开发中遇到要自定义插件的话，千万不要投机取巧，按照规范开发，给自己避免大坑。

————————以下是原文章——————
先贴个官网地址 https://www.tiny.cloud/docs/

最近开发项目中产品有很多需求，比如说在编辑器里面html代码，本来一开始用的是vue集成的那个编辑器，然后就发现，不能显示table！！！！样式

无奈之下找了找好像tinymce这个编辑器可以满足，但是在此之前没用过，所以去通读了一边官方网址，了解了一些基本东西。

然后开干

最开始么肯定是先安装一下插件

npm install tinymce/tinymce-vue  --save
npm install tinymce  --save

然后在src文件夹下面创建components文件夹，在此文件夹下面创建我们要用的富文本编辑器的组件文件。

根目录下建一个index.js文件夹，输出公共组件

import Vue from 'vue'
const componentList = require.context('.', true, /index.vue/)

const hyphenate = (name) => {
   
  return name.replace(/\B([A-Z])/g, '-$1').toLowerCase()
}

componentList.keys().forEach(item => {
   
  const componentItem = componentList(item).default
  Vue.component(hyphenate(componentItem.name), componentItem)
})

tinymce 编辑器代码 ，组件传值什么都是自己封装的，所以根据需求而定
注意，全局这样输出组件名称的时候，文件内的name一定要和文件夹名称同名，否则就会报错

用法就直接在需要的地方注入就可以了

因为产品需求可能需要拔取别的网页下来改东西，所以很多扒下来的页面的样式写在内联或者style标签里面，所以导致了样式不显示！！！

为了解决这个问题翻遍官网，最后终于有一个可以实现，初始化的时候加上下面的代码

custom_elements:"style,html,head,body,title,meta",//允许自定义标签存在

只要加上这句，页面就可以正常回显

紧接着就是toolbar工具栏的问题，官网已经说的很清楚，toolbar可以根据自己需求而去配置相关的工具，所以有些需要引入一些插件

然后很有可能它现有的插件功能不是产品想要的，所以你还得改代码。

翻遍官网没有发现可以手动更在toolbar插件的方法，但是可以自定义，所以这个就需要自己动动手指改一下。

首先找到要改动的源码，复制一份放到static文件夹下面，建一个plugins的文件夹

我这里改的是插入链接的方法。

复制好了以后便可以对代码进行更改，于是需要熟读一边源码，不然牵一发动全身，console报错一片红。

自己自定义富文本编辑器插件的时候，需要挂在以下tinymce，不然报错，tinymce is not undefiend

import tinymce from 'tinymce/tinymce'
window.tinymce = tinymce

修改toolbar最重要的几个地方需要记录一下

第一个，引入插件

import '@/static/plugins/tinymce/fishLink'

使用

自定义一个Dialog对话框，也就是根据工具栏的icon 弹出窗。

var makeDialog = function (settings, onSubmit, editor) {
   
      var displayText = settings.anchor.text.map(function () {
   
        return {
   
          name: 'text',
          type: 'input',
          label: '请输入文本，该文本将会被转为超链接；点击后将跳转为您所配置的钓鱼页面'
        };
      }).toArray();
      var defaultTarget = Optional.from(getDefaultLinkTarget(editor));
      var initialData = getInitialData(settings, defaultTarget