Hello, everyone, I am Hancao 😈, a grass code ape 🐒, if you like my article, you can follow ➕ to like it, and grow up with me. Add my wechat: Hancao97, invite you to join the group, learn and communicate with us, and become a better engineer

To begin – is this really an adventure story? !

Hello everyone, I am great cold grass 🌿, why say I am great cold grass, because I have been rich text these two days of the head are big, one by one unexpected bug forced me to experience:

  • With the old loveQuillHit the pit
  • Forced to find someone new
  • With new sweetheartTinyMCEHit the pit

Therefore, although this article is on the surface of the practice of trample pits, but in fact, it is an adventure story full of three forces love and hate entanglements.

To Quill — the old love I fought with

The story began when our team received a request to support rich text editing in a mail template originally intended for presentation. We already had a component based on The Quill wrapper in our system, and I was told, “Just use that component.”

So the first step is very easy, take the doctrine good, but things gradually deviated from my original idea, I encountered the first problem began!

BUG1: The style does not take effect in the actual message

It wasn’t long before I got my first bug, the style changes in rich text that didn’t work in the actual email sent!

I was stunned when I received this bug. This component based on The Quill package was used to edit the body of the email in my previous business.

I was doubting myself at the time

But after I checked, well, the bug was historical, so I started looking for the cause.

There is only one truth

The style in the rich text is written in class, but the rich text that we edit to the server does not carry the style in Quill, not to mention the class incompatibility in the message.

The first reaction is to look at the official website to see if there is a configuration that converts class to inline style. Sure enough, kung Fu is not smart boy. I read this in the official document:

It turns out that you can convert an inline style by referencing it and registering it in ‘attributors/style/ XXX ‘. Excited, I looked at Quill’s source code, which frustrated me.

Only support:

  • align
  • background
  • color
  • direction
  • font
  • size

However, the actual use of more than these several, such as: indentation.

I was already looking for a Quill replacement, and that’s when I found TinyMCE.

But the product said, “Ok,” and the product not only reduced my workload, but also continued the story of Quill and me.

BUG2: Some mail template contents cannot be displayed in rich text

My love-hate relationship with Quill has just been perpetuated by the product’s tolerance. But then came a bug that forced me to abandon my beloved Quill.

Product: “I just went to test online. Why didn’t part of the content show up?”

My first thought was, “Did the test change the numbers again?”

Yeah, I’m a stupid human being who thinks it’s so easy.

However, after positioning, I found that the content that could not be displayed was UL internally nested OL. Then I would first consider whether there was a problem with our secondary packaging of components, so I went to the official website to try:

No, so I have reason to think that, with Quill, we will not be able to show ul’s nested OL structure back. Due to the urgency of the project, I decided to get around the bug with another rich text for the time being

Vue-quill actually does not have this question, I am also very confused 🤔 ~ if I have the opportunity I will give the answer to this question ✨

The last

At the end of the song, sorry Quill 💔, can only say love, love. Sorry about the emergency.

To TinyMCE, my new love and hate

Why TinyMCE

Why TypeMCE? There are two things to ensure when selecting a rich text component:

  • The rich text component needs to support the existing functions of rich text in all practical systems
  • This solves two problems mentioned above, namely that all styles support inline mode and that the DOM structure of UL nested OL can be displayed normally

Also, I actually saw another member of our team say that TinyMCE is ugly and tacky. But below this scene now I feel quite good with, that ok ☁️

introduce

The following introduction is from the Chinese official website

TinyMCE is an easy-to-use, powerful WYSIWYG rich text editor. Similar programs include: UEditor, Kindeditor, Simditor, CKEditor, wangEditor, Suneditor, Froala, etc.

TinyMCE’s advantages:

  • Open source commercially available, based on LGPL2.1
  • Plug-ins are rich, with plug-ins covering daily functions
  • Rich interface, strong scalability, the ability to expand functions indefinitely
  • Nice interface, in line with the modern aesthetic
  • Provide classic, inline, immersion without interference three modes
  • Excellent standard support (since V5)
  • Multi-language support, dozens of languages can be downloaded from the official website.

The installation

  • npm i @tinymce/tinymce-vue -S
  • npm i tinymce -S

There is a vue version of Tinymce on NPM. To make it easier to use in VUE, we can install @tinymce/ Tinymce-vue together with the complete editor package tinymce.

Note: @tinymce/tinymce-vue 4 or later cannot be used in vue2; For example: NPM install@tinymce /[email protected] -s The tinymce package version does not matter

use

Notice the order of reference first:

import tinymce from 'tinymce/tinymce';
import TinymceEditor from '@tinymce/tinymce-vue';
import 'tinymce/tinymce.min.js';
import 'tinymce/themes/silver/theme';
Copy the code

Note: Inconsistent order of references can cause problems

Then introduce styles:

import 'tinymce/skins/ui/oxide/content.css';
import 'tinymce/skins/ui/oxide/content.inline.css';
import 'tinymce/skins/ui/oxide/skin.css';
Copy the code

Note: styles must be referenced in order for the editor to display properly, the editor needs a skin!

Mounted also needs to be initialized:

mounted () {
    tinymce.init({inline: true});
},
Copy the code

Also configure inline to true here

Template using the direct v-model method is ok

<tinymce-editor
    v-model="editContent"
    :init="init"
/>
Copy the code

My configuration in init is as follows:

{
    height: 300.language: 'zh_CN'.toolbar: 'fontselect | fontsizeselect | bold italic underline strikethrough | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | link '.plugins: 'link lists image code table colorpicker textcolor contextmenu'.branding: false.relative_urls: false.remove_script_host: false
};
Copy the code

Of course, if you want to use the plug-in, you need to reference in the path as follows:

import 'tinymce/plugins/image';
import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/contextmenu';
import 'tinymce/plugins/colorpicker';
import 'tinymce/plugins/textcolor';
Copy the code

Note: Z-index needs to be configured if the font drop-down selection cannot be displayed

.tox-tinymce-aux {
    z-index: 709826033 ! important;
}
.tox-tinymce-inline {
    z-index: 709826032 ! important;
}
Copy the code

To the end. – The adventure story that never ends

So, this article is basically over, cold grass sing a song for everyone:

✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨

More annoyed more annoyed more annoyed recently

Strange city where there is my expectation

Say goodbye to my hometown buddy “Quill”

Now I feel more alone

✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨

My friends, welcome to focus on my article, I will bring you more interesting content! See you next time