background

The uEditor of Baidu was used in the author’s project previously. Due to the lack of maintenance and the high cost of transformation on the original basis, the author considers replacing a new editor. As for the selection of a new editor, the author considers the following points

  • There are many open source projects on the Internet, some of which belong to individuals and some of which belong to organizations. When making a choice, I will look at the time of the latest update and the number of issues on Github to judge whether it is still being updated
  • Whether to provide custom image upload function, rich text of many open source projects don’t provide custom upload file functions, of course, for the average upload, most of the project is to support, is the author of the file is placed in the ali cloud oss, when uploading and don’t want to through their own servers, through the server upload oss (this is not a waste of IO ) I ended up with Tinymce for the following reasons:
  • Configuration is simple
  • Support framework (vue\ Angular \ React)
  • Commercialized (that is, it will be updated all the time, and it has a free feature that I can use)

Refer to the address

Thank you!!!!! Official documents, which can be translated into Chinese by a third party

version

The name of the The version number
angular 8 +
tinymce 5.1.5

use

Installation steps

English description: www.tiny.cloud/docs/integr…

  • Install the Tinymce-Angular package and save it to your package.json using –save
npm install --save @tinymce/tinymce-angular
Copy the code
  • Add EditorModule to app.module.ts, as shown below
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { EditorModule } from '@tinymce/tinymce-angular';
 import { AppComponent } from './app.component';

 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
     EditorModule
   ],
   providers: [].bootstrap: [AppComponent]
 })
 export class AppModule {}Copy the code
  • Use the sample
 <editor
   id="oneweek-editor"
   initialValue="<p>This is the initial content of the editor</p>"
   [init]="{
        height: 500,
        menubar: false,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount'
        ],
        toolbar:
          'undo redo | formatselect | bold italic backcolor | \
          alignleft aligncenter alignright alignjustify | \
          bullist numlist outdent indent | removeformat | help'
      }"
   >
 </editor>
Copy the code

Run the project and you will see the editor in the corresponding route

The plug-in

Customize uploading files (Configuration information)

    {
      // The id of the editor note is oneweek-editor
      selector: '#oneweek-editor'.// Plugins are various tinymce plugins
      plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu codesample'.// Customize file upload
      images_upload_handler: (blobInfo, success, failure) = > {
        // blobinfo.blob () is file, blobinfo.blob ().name is the name of the file.
        console.log('Upload picture');
      },
      / / define the toolbar shortcut bar operations, | to separate display
      toolbar: 'image | codesample | bullist numlist | bold italic underline strikethrough | alignleft'
        + ' aligncenter alignright alignjustify | undo redo'.// Here are some language options for code blocks that don't seem to support typescript yet
      codesample_languages: [
        {text: 'Python'.value: 'python'},
        {text: 'HTML/XML'.value: 'markup'},
        {text: 'JavaScript'.value: 'javascript'},
        {text: 'CSS'.value: 'css'},
        {text: 'Java'.value: 'java'}]./ / height
      height: 600
    }
Copy the code

Localization (Configuration information)

    {
      selector: '#oneweek-editor'.// Plugins are various tinymce plugins
      plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu codesample'./ / language pack can use tinymce provide url, but the cause of the wall, can even not on/network speed is slow, so or to download, download address: https://www.tiny.cloud/get-tiny/language-packages/
      language_url: 'zh_cn.js' address: e.g. http://xxx/zh_CN.js'.language: 'zh_CN'.images_upload_handler: (blobInfo, success, failure) = > {
        // blobinfo.blob () is file, blobinfo.blob ().name is the name of the file.
        console.log('Upload picture');
      },
      / / define the toolbar shortcut bar operations, | to separate display
      toolbar: 'image | codesample | bullist numlist | bold italic underline strikethrough | alignleft'
        + ' aligncenter alignright alignjustify | undo redo'.// Here are some language options for code blocks that don't seem to support typescript yet
      codesample_languages: [
        {text: 'Python'.value: 'python'},
        {text: 'HTML/XML'.value: 'markup'},
        {text: 'JavaScript'.value: 'javascript'},
        {text: 'CSS'.value: 'css'},
        {text: 'Java'.value: 'java'}]./ / height
      height: 600,}Copy the code

Automatic height adjustment (configuration information)

    {
      selector: '#oneweek-editor'.// Plugins are various tinymce plugins
      plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu codesample autosize'./ / language pack can use tinymce provide url, but the cause of the wall, can even not on/network speed is slow, so or to download, download address: https://www.tiny.cloud/get-tiny/language-packages/
      language_url: 'address of zh_cn.js'.language: 'zh_CN'.images_upload_handler: (blobInfo, success, failure) = > {
        // blobinfo.blob () is file, blobinfo.blob ().name is the name of the file.
        console.log('Upload picture');
      },
      / / define the toolbar shortcut bar operations, | to separate display
      toolbar: 'image | codesample | bullist numlist | bold italic underline strikethrough | alignleft'
        + ' aligncenter alignright alignjustify | undo redo'.// Here are some language options for code blocks that don't seem to support typescript yet
      codesample_languages: [
        {text: 'Python'.value: 'python'},
        {text: 'HTML/XML'.value: 'markup'},
        {text: 'JavaScript'.value: 'javascript'},
        {text: 'CSS'.value: 'css'},
        {text: 'Java'.value: 'java'}].autoresize_on_init: false.// Minimum height
      min_height: 350.// Maximum height
      max_height: 650
    }
Copy the code

The code block

Configuration information

    {
      selector: '#oneweek-editor'.// Plugins are various tinymce plugins
      plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu codesample autosize'./ / language pack can use tinymce provide url, but the cause of the wall, can even not on/network speed is slow, so or to download, download address: https://www.tiny.cloud/get-tiny/language-packages/
      language_url: 'address of zh_cn.js'.language: 'zh_CN'.images_upload_handler: (blobInfo, success, failure) = > {
        // blobinfo.blob () is file, blobinfo.blob ().name is the name of the file.
        console.log('Upload picture');
      },
      / / define the toolbar shortcut bar operations, | to separate display
      toolbar: 'image | codesample | bullist numlist | bold italic underline strikethrough | alignleft'
        + ' aligncenter alignright alignjustify | undo redo'.// Here are some language options for code blocks that don't seem to support typescript yet
      codesample_languages: [
        {text: 'Python'.value: 'python'},
        {text: 'HTML/XML'.value: 'markup'},
        {text: 'JavaScript'.value: 'javascript'},
        {text: 'CSS'.value: 'css'},
        {text: 'Java'.value: 'java'}].autoresize_on_init: false.// Minimum height
      min_height: 350.// Maximum height
      max_height: 650
    }
Copy the code

Problem: No code highlighting in the page presentation

address

Official website – Code plug-in description prism official website address

The problem found

After editing the code in the editor, you can see that the code is highlighted, but displayed on the page (node code below) is not

<div class="text-content" [innerHTML]="content"></div>
Copy the code

If you look at the official website, you also need to use PRISM for syntax highlighting

Solution (using PRISM)

Go to the PRISM website

Guest officers can choose their own topics

Choose the language you need

I used Python, Java, the corresponding check in the page

Index.html adds a reference

Add a reference to tinymce.min.js in index.html

<link rel="stylesheet" type="text/css" href="The prism. CSS address">
<script type="text/javascript" src="The prism. Js address"></script>
Copy the code

For your own projects, you also need to include the introduction of prism.css and prism.js in angular.json

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser"."options": {
            "outputPath": "dist/course"."index": "src/index.html"."main": "src/main.ts"."polyfills": "src/polyfills.ts"."tsConfig": "src/tsconfig.app.json"."assets": [
              "Prism. CSS addresses, such as the SRC/assets/prism prism. The CSS"."Prism. Js address, such as the SRC/assets/prism prism. Js." "
              // If prism.js and prism.css are in the same folder, you can import the folder directly
              // "Prism folder address, such as SRC /assets/prism"].Copy the code
function
  highlight() {
    const elementList = document.getElementsByTagName('pre');
    if (elementList && elementList.length > 0) {
      for (let i = 0; i < elementList.length; i++) { Prism.highlightElement(elementList[i]); }}}Copy the code

Multi-image upload (third-party plug-in, use scheme of unofficial plug-in)

As tinymce does not officially provide the function of multi-image uploading, so we have to develop our own or rely on third-party developers in the Chinese document address provided in the above document. Selfless contributors provide us with more plug-ins -> image batch uploading, which is the address of the usage instructions

Configuration information

    {
      selector: '#oneweek-editor'.// Plugins are various tinymce plugins
      plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu codesample autosize axupimgs'./ / language pack can use tinymce provide url, but the cause of the wall, can even not on/network speed is slow, so or to download, download address: https://www.tiny.cloud/get-tiny/language-packages/
      language_url: 'address of zh_cn.js'.language: 'zh_CN'.images_upload_handler: (blobInfo, success, failure) = > {
        // blobinfo.blob () is file, blobinfo.blob ().name is the name of the file.
        console.log('Upload picture');
      },
      / / define the toolbar shortcut bar operations, | to separate display
      toolbar: 'image axupimgs | codesample | bullist numlist | bold italic underline strikethrough | alignleft'
        + ' aligncenter alignright alignjustify | undo redo'.// Here are some language options for code blocks that don't seem to support typescript yet
      codesample_languages: [
        {text: 'Python'.value: 'python'},
        {text: 'HTML/XML'.value: 'markup'},
        {text: 'JavaScript'.value: 'javascript'},
        {text: 'CSS'.value: 'css'},
        {text: 'Java'.value: 'java'}].autoresize_on_init: false.// Minimum height
      min_height: 350.// Maximum height
      max_height: 650
    }
Copy the code

Question: How do I use third-party plug-ins

The instructions are as follows:

Angular installed Tinymce uses an official address by default, and does not specify its own address in the configuration

The solution

Download Tinymce locally

Download address Download the Tinymce package from the official website, unpack it into your own project after downloading, or put it into a third party space (such as ali Cloud oss, third-party file hosting platform, as long as it can be accessed in the project), unpack the downloaded axupimgs.zip and move the entire axupimgs folder to Tiny In the MCE folder, click plugins

  • tinymce
    • plugins
      • axupimgs
Configuration index. HTML

Add a reference to tinymce.min.js in index.html

<script type="text/javascript" src="Tinymce. Min. Js address." "></script>
Copy the code

For your own projects, add tinymce.min.js to angular.json

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser"."options": {
            "outputPath": "dist/course"."index": "src/index.html"."main": "src/main.ts"."polyfills": "src/polyfills.ts"."tsConfig": "src/tsconfig.app.json"."assets": [
              "Tinymce. Min. Js address, such as the SRC/assets/tinymce. Min. Js." "].Copy the code

Start the project and you can see

Problem: Upfiles.html iframe appears across domains

If your Tinymce folder is not in the project, but hosted on a third party platform such as Ali Cloud oss, cross-domain problems will be printed in console when clicking on multi-image upload, and you will not be able to operate in the multi-image upload window This is because third-party developers use iframe nesting when writing programs, and at the moment our project, unlike tinymce addresses, is cross-domain

The solution

Modify the plugin.min.js file in axupimgs
var baseURL=tinymce.baseURL;
var iframe1 = baseURL+'/plugins/axupimgs/upfiles.html';
Copy the code

Instead of

var baseURL = document.location.protocol + '/ /' + document.location.host;
var iframe1 = baseURL + '/assets/plugins/axupimgs/upfiles.html';
Copy the code
Put load.gif and upfiles.html in the axupimgs folder into the project

Loading. GIF and upfiles. HTML from the axupimgs folder into the assets folder of the project as follows: SRC

  • assets
    • plugins
    • axupimgs
      • upfiles.html
      • Load.gif add axupimgs to angular.json:
"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser"."options": {
            "outputPath": "dist/course"."index": "src/index.html"."main": "src/main.ts"."polyfills": "src/polyfills.ts"."tsConfig": "src/tsconfig.app.json"."assets": [
              "src/assets/plugins/axupimgs"].Copy the code

Restart the project and you can use multi-image uploading normally

Sinicization (Scheme 2: use custom Tinymce.js address)

After adding the tinymce.js address to index.html, sinicization does not use the language_URL parameter, but puts the language file zh_cn.js under langs in the Tinymce folder, as shown in tinymce

  • langs
    • zh_CN.js
Configuration information
    {
      selector: '#oneweek-editor'.// Plugins are various tinymce plugins
      plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu codesample autosize axupimgs'.language: 'zh_CN'.images_upload_handler: (blobInfo, success, failure) = > {
        // blobinfo.blob () is file, blobinfo.blob ().name is the name of the file.
        console.log('Upload picture');
      },
      / / define the toolbar shortcut bar operations, | to separate display
      toolbar: 'image axupimgs | codesample | bullist numlist | bold italic underline strikethrough | alignleft'
        + ' aligncenter alignright alignjustify | undo redo'.// Here are some language options for code blocks that don't seem to support typescript yet
      codesample_languages: [
        {text: 'Python'.value: 'python'},
        {text: 'HTML/XML'.value: 'markup'},
        {text: 'JavaScript'.value: 'javascript'},
        {text: 'CSS'.value: 'css'},
        {text: 'Java'.value: 'java'}].autoresize_on_init: false.// Minimum height
      min_height: 350.// Maximum height
      max_height: 650
    }
Copy the code