Tinymce在传统项目及VUE项目中的使用

前言写给自己看，如有错误麻烦大佬指出

近期项目需要，决定在原有编辑器markdown的情况下增加一个富文本编辑器

调研了很多，因为运营需要的功能有些过分强大

所以决定使用万能的富文本编辑器Tinymce

因所有网站都会使用，所以vue和传统PC项目都需要做处理

传统PC项目

恰好我们的网站是个自适应网站，在嵌入之后简单看了一下，适配也是很稳妥的，太省心了

由于内外网开发，所以我并没有使用以script这种方式引入

我使用npm 引入

npm i tinymce -S

tinymce的版本为5.4.2

在使用到富文本框的JS中使用import引入

以下为必须要引入的内容

import tinymce from 'tinymce/tinymce';
import 'tinymce/icons/default';
import 'tinymce/themes/silver';

在此时我在css中手动引入了 (后面会写 这个是错误用法)

@import '~tinymce/skins/ui/oxide/skin.min.css'

由于npm下载下来并没有langs文件

所以我在官网单独下载了一份zh_CN.js文件，起初我尝试用language_url来指向我本地的文件

但是一直报错说找不到这个文件

于是我使用了

import './components/zh_CN';

解决了这个问题

在引入之后

const editor = tinymce.init({
    selector: '#editor',
    language: 'zh_CN';
})

此时这个编辑器就会出现在我们的页面中

我们在tinymce中设置toolbar工具栏

const editor = tinymce.init({
    selector: '#editor',
    language: 'zh_CN';
    toolbar: 'insertfile undo redo | styleselect | bold italic | emoticons', // 这边是功能按钮每一个按钮以|分隔符隔开
})

此时我们的编辑器有了更多的功能，但是我们增加的表情按钮emoticons并没有显示

原因是因为表情是一个插件

const editor = tinymce.init({
    selector: '#editor',
    language: 'zh_CN';
    toolbar: 'insertfile undo redo | styleselect | bold italic | emoticons', // 这边是功能按钮每一个按钮以|分隔符隔开
    plugins: `emoticons`,
})

同时引入

import 'tinymce/plugins/emoticons';
import 'tinymce/plugins/emoticons/js/emojis';

此时，我开始觉得好麻烦，但是我单独输入

import 'tinymce/plugins

又会报错，所以没有想到好的解决办法

加入标签之后，发现表情的搜索不支持中文搜索，于是我强制用css隐藏了搜索和旗帜表情

这不是最好的解决办法，但是文档并没有给我们描述如何通过参数删除

今天发现表情是存在这个文件里面

import 'tinymce/plugins/emoticons/js/emojis' 

于是我单独写了个文件做为表情文件，不引入官方文件，自定义表情，这样就不会有以上问题

然后我今天最大的坑来了

在处理锚点的时候发现锚点不出现在内容区域

定位到是相关css未引入

在控制台出现了相关报错，skin.min.css/content.min.css/content.css  404

通过链接可以得到tinymce.js中引入的文件有误

他想要的路径是public文件的路径

所以

在webpack.mix.js文件

加入代码

mix.copy('node_moudles/tinymce/skins', 'public/js/skins')

做了一个映射，解决了问题

处理图片上传

此处我没有使用当前编辑器默认的上传逻辑，使用类似自定义上传

tinymce.init({
   selector: '#editor',   images_upload_handler: (blobInfo, success, failure) => {
       // 打印blobInfo 能过知道这里拿到的是我们所需要的图片信息
       if (blobInfo.blob().sie > 110000) {
           failure('文件大小不合适'); 
       } else {
           uploadPic();
       }
       function uploadPic() {
           const formData = new FormData();
           formData.append('name',blobInfo.blob().name);
           formData.appded('fild', blobInfo.blob()); // 后端需要你传的参数
           $.ajax({
             url: '/api/xxx',
             type: 'post',
             data: formData,
            // 等一系列写法
             success(res){
               if (res.success) {
                   success(res.url)  // 重要的一步，把接口返还的链接填写到回调函数中
               }
             }
           })           

       }
   }
})

在vue中使用tinymce

引入文件

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

创建组件 rich-text-editor.vue

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

// 一定要添加的
import tinymce from 'tinymce/tinymce';
import editor from '@tinymce/tinymce-vue';
import  'tinymce/themes/silver';
import  'tinymce/icons/default';
// 引入汉化js文件/以及其他插件相关文件和传统项目一样

// 将node_modules包中的tinymce中的skins文件夹整个复制放到项目static文件夹下

data() {
   initDate: {
      language: 'zh_CN',
      skin_url: '../static/skins/ui/oxide,
      // 其他同传统项目做法
    }
}
components: {
   tinymce,
   editor,
}

以上这个组件就写完， 然后引用到对应的需要使用的地方就可以了

踩坑暂时结束