Tinymce

Tinymce is a rich text editor with a rich base of components that are constantly updated. Its Github project profile describes itself as follows:

The world’s #1 JavaScript library for rich text editing. Available for React, Vue and Angular

In short: I’m the number one editor in the universe, and I support the three most popular frameworks right now.

I will divide it into three articles:

  1. Basic use of the editor and some simple plug-in configuration
  2. Configuration of some complex plug-ins, and integration with Vue
  3. Write custom plug-ins

Why Tinymce

  • Rich basic components, simple configuration can be used;
  • It has paid version and free version, which can be profitable to ensure its continuous maintenance and innovation, and the development version is also fully enough;
  • The development and expansion API provided is relatively simple, suitable for continuous integration;
  • The development documentation, though in English, is concise, full of examples, and updated in real time with the version, which is much better than other editors on the market

Begin to use

The version used in this article is 5.0.13

The installation

The Tinymce core file is separate from plug-ins, skins, theme styles, etc. To use it, you simply import the core file (tinymce.js) into your HTML.

<script src="https://fe.120yibao.com/common/tinymce/5.0.13/tinymce.min.js"></script>
Copy the code

When creating a new editor instance, you need to pass in a configuration file. Tinymce automatically introduces the corresponding plug-in, skin, and theme files according to the configuration, using a relative path (relative to tinymce.js) by default.

const editor = Tinymce.init({
    // The link plugin is automatically introduced
    / / https://fe.120yibao.com/common/tinymce/5.0.13/plugins/link/plugin.min.js
    plugins: ['link'].// The Silver theme is automatically introduced
    / / https://fe.120yibao.com/common/tinymce/5.0.13/themes/silver/theme.min.js
    theme: 'silver'.// Will automatically introduce the oxide skin
    / / https://fe.120yibao.com/common/tinymce/5.0.13/skins/ui/oxide/skin.min.css
    skin: "oxide"
})
Copy the code

The relationship between these relative paths is the same as the relationship between NPM packages.

npm i tinymce
Copy the code

Let’s look at the directory structure of the NPM package

. ├ ─ ─ jquery. Tinymce. Js ├ ─ ─ jquery. Tinymce. Min. Js ├ ─ ─ the plugins │ ├ ─ ─ advlist │ │ ├ ─ ─ index. The js │ │ ├ ─ ─ plugin. Js │ │ └ ─ ─ Plugin. Min. Js │ ├ ─ ─ the anchor │ │ ├ ─ ─ index. The js │ │ ├ ─ ─ plugin. Js │ │ └ ─ ─ plugin. Min. Js │ ├ ─ ─ autolink │ │ ├ ─ ─ index. The js │ │ ├ ─ ─ plugin. Js │ │ └ ─ ─ plugin. Min. Js ├ ─ ─ skins │ ├ ─ ─ the content │ │ ├ ─ ─ the default │ │ │ ├ ─ ─ content. CSS │ │ │ └ ─ ─ The content. Min. CSS │ │ ├ ─ ─ the document │ │ │ ├ ─ ─ content. CSS │ │ │ └ ─ ─ content. min. CSS │ │ └ ─ ─ writer │ │ ├ ─ ─ content. CSS │ │ └ ─ ─ content. Min. CSS │ └ ─ ─ the UI │ ├ ─ ─ oxide │ │ ├ ─ ─ content. CSS │ │ ├ ─ ─ content. the inline. CSS │ │ ├ ─ ─ content. the inline. Min. CSS │ │ ├ ─ ─ content. Min. CSS │ │ ├ ─ ─ content. mobile. The CSS │ │ ├ ─ ─ content. mobile. Min. CSS │ │ ├ ─ ─ fonts │ │ │ └ ─ ─ Tinymce - mobile. Woff │ │ ├ ─ ─ skin. The CSS │ │ ├ ─ ─ skin. Min. CSS │ │ ├ ─ ─ skin. Mobile. The CSS │ │ └ ─ ─ skin. Mobile. Min. CSS │ └ ─ ─ Oxide-dark │ ├─ content.css │ ├─ content.inline. CSS │ ├─ content.inline Content. Mobile. CSS │ ├ ─ ─ content. mobile. Min. CSS │ ├ ─ ─ fonts │ │ └ ─ ─ tinymce - mobile. Woff │ ├ ─ ─ skin. The CSS │ ├ ─ ─ Skin. Min. CSS │ ├ ─ ─ skin. Mobile. The CSS │ └ ─ ─ skin. Mobile. Min. CSS ├ ─ ─ themes │ ├ ─ ─ mobile │ │ ├ ─ ─ index. The js │ │ ├ ─ ─ theme. Js │ │ └ ─ ─ theme. Min. Js │ └ ─ ─ silver │ ├ ─ ─ index. The js │ ├ ─ ─ theme. Js │ └ ─ ─ theme. Min. Js ├ ─ ─ tinymce. Js └ ─ ─ tinymce. Min. JsCopy the code

CDN

So, if you want to use TINymce as a CDN, just upload it in this directory format.

npm

NPM can also be used for import, but each plug-in, theme, and skin must be imported separately, which is troublesome and is not recommended.

// Import TinyMCE
import tinymce from 'tinymce/tinymce';

// A theme is also required
import 'tinymce/themes/silver';

// Any plugins you want to use has to be imported
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';

// Initialize the app
tinymce.init({
  selector: '#tiny'.plugins: ['paste'.'link']});Copy the code

Quick start

<template>
	<div class="default-tinymce">
		<textarea id="editor"></textarea>
	</div>
</template>
<script>
import Tinymce from 'tinymce'
export default {
  name: 'DefaultTinymce',
  mounted () {
    Tinymce.init({
      selector: '#editor'}}})</script>
Copy the code

  • This example is configured with a unique required configuration selector, the identity of the Textarta element, whose value supports a parameter format similar to CSS selectors.

  • In addition to using the entry file (tinymce.js), this example also introduces the default theme and skin files.

  • After initialization, the textarea value is bound to an IFrame. Operations in the rich text editing area are actually operations in the IFrame, and the contents are automatically synchronized to the TextaREA.

Three models

Tinymce has three modes to choose from: Classic (default), inline (Distraction-free), or inline (Distraction-free).

The classic mode is the most common, that is, the toolbar with input area, through the toolbar buttons to insert, modify, format content, we also choose this mode as the main mode of business.

The latter two modes also have their own characteristics, but they do not match our actual application scenarios, so I will not introduce them again. You can find out by yourself if you are interested.

Multiple editors

If you need more than one editor on a page, there are two ways to do it:

One is to use tinymce’s init method once, combined with the className selector, to generate multiple instances that share a set of configurations.

Sample code:

<template>
	<div class="default-tinymce">
        <h2>The editor 1</h2>
		<textarea class="editor"></textarea>
        <h2>The editor 2</h2>
		<textarea class="editor"></textarea>
	</div>
</template>
<script>
import Tinymce from 'tinymce'
export default {
  mounted () {
    Tinymce.init({
      selector: '.editor'}}})</script>

Copy the code

Alternatively, if you need several editors, you can use Tinymce’s init method to generate several instances that are independent of each other

Sample code:

<template>
	<div class="default-tinymce">
        <h2>The editor 1</h2>
		<textarea class="editor1"></textarea>
        <h2>The editor 2</h2>
		<textarea class="editor2"></textarea>
	</div>
</template>
<script>
import Tinymce from 'tinymce'
export default {
  mounted () {
    Tinymce.init({
      selector: '.editor1'
    })
    Tinymce.init({
      selector: '.editor2'}}})</script>

Copy the code

Editor configuration

Configuration language

The editor language can be configured to be Chinese

tinymce.init({
    selector: '#myTextarea'.language: 'zh_CN'
})

Copy the code
  • You can set thelanguage_urlOverrides the default address.
tinymce.init({
    selector: '#myTextarea'.language_url: 'https://fe.120yibao.com/common/tinymce/5.0.13/langs/zh_CN_01.js'
})
Copy the code
  • You can also configure language files in your project:
import Language from './language'
Tinymce.addI18n('zh_CN_01', Language)

tinymce.init({
    selector: '#myTextarea'.language: 'zh_CN_01'
})
Copy the code

Attached: official multi-language file download address

Basic configuration

The following configuration roughly covers the basic configuration of Tinymce, which I will explain in sections below

tinymce.init({
    selector: '#myTextarea'.// Editor skin, with oxide-dark
    skin: 'dark'.// Editor width and height
    width: 600.height: 300.// The plugin to use
    plugins: [
      'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker'.'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking'.'save table contextmenu directionality emoticons template paste textcolor'].// Edit the area content style
    content_css: 'css/content.css'.// Toolbar configuration items
    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons'
  });
Copy the code

The use of plug-in

In addition to the default configuration, if you want to extend the editor’s capabilities, Tinymce offers plugins.

The official plugins are rich and well documented, and in most cases I just need the official plugins.

Activating the plug-in is also simple and requires only the appropriate configuration.

For example, if we wanted to extend the ability to view the HTML source code for the editor’s content, we would only need the following configuration:

tinymce.init({
  selector: '#editor'.plugins: 'code'
})

Copy the code

In the position of Menubar, there is a group of Tool, and there is a source code item in the group. Click to view the source code

If we are not used to using Menubar and are used to using the Toolbar instead, we just need the following configuration:

tinymce.init({
  selector: '#editor'.toolbar: 'code'.plugins: 'code'
})

Copy the code

There is an icon in the toolbar location to view the source code. Click to do the same

Sometimes, these basic functions may not meet our needs, and we may configure these plug-ins.

tinymce.init({
  selector: '#editor'.toolbar: "numlist bullist".plugins: 'lists'
})

Copy the code

In the example, we configured the List component, which supports unordered (UL) lists and ordered lists, but the list style is fixed and we can introduce the new plug-in advList and configure it

tinymce.init({
  selector: '#editor'.toolbar: 'bullist numlist'.plugins: 'lists advlist'
})
Copy the code

At this point, we find that we can select a style. There are many styles to choose from. If we want to fix a style, we can configure it like this:

tinymce.init({
  selector: '#editor'.toolbar: 'bullist numlist'.plugins: 'lists advlist'.advlist_number_styles: 'lower-alpha'
})
Copy the code

We found that there was only one option left

The official documents describe the configuration items, parameters, and values of each plug-in in detail

Custom editor UI

We’ll just use the default theme and skin without messing around.

From the examples above, we also know that almost everything can be customized, such as hiding unused Menubars, adjusting the location of buttons in the toolbar, and so on.

tinymce.init({
  selector: '#editor'./ / hide menubar
  menubar: false./ / hide the statusbar
  statusbar: false.// Hide the brand logo
  branding: false.// Set maximum width and height
  max_height: 500.max_width: 500.// Set minimum width and height
  min_height: 100.min_width: 400
})

Copy the code

These configurations are not very important and generally do not change after a single configuration.

The plug-in configuration

Here is a description of the plugins used by the editor, configuration, and use. Plugins that are too simple and useless are not explained here.

Advanced Code Editor

This plug-in is a paid plug-in

This plug-in beautifies the code preview view and has the ability to close/expand tabs. After configuring this plug-in, you need to remove the Code plug-in.

tinymce.init({
  selector: "textarea".// change this value according to your HTML
  plugins: "advcode".toolbar: "code"
});
Copy the code

AutoLink

This plug-in automatically converts text to hyperlinks when a link of the form “www.qq.com” is entered, triggering both Spaces and newlines

tinymce.init({
  selector: "textarea".// change this value according to your HTML
  plugins: "autolink"
});
Copy the code

nonbreaking

The Tab key on the keyboard defaults to focus, which switches to the next element. This can change the default behavior.

Note that the table plug-in also has code that changes the default behavior, so reference the table plug-in after it.

tinymce.init({
  selector: "textarea".// change this value according to your HTML
  plugins: "nonbreaking".// This configuration changes the default behavior by adding three Spaces after the cursor.
  nonbreaking_force_tab: true
});
Copy the code

autosave

This plug-in automatically saves the editor’s contents to localStorage. Two fields are stored at the same time, one for content and one for storage time.

You can set the automatic saving interval, usually in seconds. You can also set the expiration time of the content storage, usually in minutes. After the expiration time, data will be deleted from the localStorage.

tinymce.init({
  selector: "textarea".// change this value according to your HTML
  plugins: "autosave".// Automatic save interval
  autosave_interval: '30s'.// The maximum time for automatic data storage
  autosave_retention: '30m'
});
Copy the code

powerpaste

This plug-in is a paid plug-in

This plug-in preserves the style of clipboard content, document structure.

tinymce.init({
  selector: "textarea".// change this value according to your HTML
  plugins: "powerpaste"./** * Whether to keep the text style * before pasting@param 'clean' does not retain *@parma 'merge' keep *@parma 'prompt' asks the user */
  powerpaste_word_import: 'prompt'.powerpaste_html_import: 'prompt'./** * You can modify the pasted content before pasting it into rich text. The content is DOM formatted *@param plugin
   * @param args
   * @returns {Promise<void>}* /
  paste_postprocess (plugin, args) {}
});
Copy the code

Tinymce – The first rich text Editor in the universe? [2]

reference

  1. Tinymce official documentation