Preface write oneself see, if have mistake trouble big guy points out

For a recent project, we decided to add a rich text editor to the existing markdown editor

I did a lot of research, because the functional requirements for operations are a little bit too powerful

So I decided to use Tinymce, the versatile rich text editor

Both VUE and traditional PC projects need to be handled because all websites use it

Traditional PC Project

Just our website is an adaptive site, after a simple look at the embedded, adaptation is also very safe, too worry

Because of extranet development, I didn’t use script to introduce it

I use NPM import

npm i tinymce -S
Copy the code

Tinymce is available as 5.4.2

Use import in JS that use rich text boxes

Here’s what must be introduced

import tinymce from 'tinymce/tinymce';
import 'tinymce/icons/default';
import 'tinymce/themes/silver';
Copy the code

At this point I’m going to manually introduce it in CSS.

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

There is no LANGs file downloaded by NPM

So I downloaded a separate zh_cn.js file from the official website and initially tried using language_URL to point to my local files

But I kept getting an error saying I couldn’t find the file

So I used it

import './components/zh_CN';
Copy the code

Solved the problem

After the introduction

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

The editor will now appear on our page

We set up the Toolbar toolbar in Tinymce

const editor = tinymce.init({ selector: '#editor', language: 'zh_CN'; The toolbar: 'insertfile undo redo | styleselect | bold italic | emoticons', / / this is the function button every button separated with a | separator})Copy the code

At this point our editor has more features, but the emoticons buttons we added are not displayed

The reason is because emoji is a plugin

const editor = tinymce.init({ selector: '#editor', language: 'zh_CN'; Toolbar: 'insertfile undo redo | styleselect | bold italic | emoticons', / / this is the function button every button to | delimiter separated plugins: ` emoticons `,})Copy the code

At the same time the introduction of

import 'tinymce/plugins/emoticons';
import 'tinymce/plugins/emoticons/js/emojis';
Copy the code

At this point, I’m starting to feel a lot of trouble, but I’ll type it separately

import 'tinymce/plugins
Copy the code

Errors will be reported again, so there is no good solution

When I added the tag, I found that emoticons didn’t support Chinese search, so I forced CSS to hide the search and flag emoticons

This is not the best solution, but the documentation does not describe how to delete by parameter

Today I found that the expression is in this file

import ‘tinymce/plugins/emoticons/js/emojis’ 

So I wrote a separate document as an expression file, not to introduce official documents, custom expression, so that there will be no problems above

And then came my biggest hole of the day

Anchor points are not present in the content area while processing them

Locate if the related CSS is not introduced

Relevant error appeared in the console, skin. Min. The CSS/content. min. The CSS/content. CSS 404

The link shows that the file introduced in tinymce.js is incorrect

The path he wants is the path of the public file

so

In webpack. Mix. Js file

Add the code

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

We did a mapping, and we solved the problem

Handle image upload

Instead of using the current editor’s default upload logic, I use something like custom uploads

tinymce.init({ selector: '#editor', images_upload_handler: (blobInfo, success, If (blobinfo.blob ().sie > 110000) {failure(' file size is not appropriate '); } 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 (res){if (res.success) {success(res.url) // Important step, the interface return link to fill in the callback function}}})}}})Copy the code

Use Tinymce in VUE

The introduction of the file

npm install  tinymce -S
npm install  @tinymce/tinymce-vue -S
Copy the code

Create the component rich-text-editor.vue

<template> <editor :init="initData"></editor> </template> // Must add import tinymce from 'tinymce/tinymce'; import editor from '@tinymce/tinymce-vue'; import 'tinymce/themes/silver'; import 'tinymce/icons/default'; // Copy the skins folder of tinymce in node_modules to the static folder data() {initDate: {language: 'zh_CN', skin_url: '.. }} components: {tinymce, editor,}Copy the code

The above component is finished, and then reference to the corresponding need to use the place can be

The pit is over for the time being