tinyMCE 5 rich text editor learning and use (used in Vue-cli3)

background

Recently, the company has a requirement to input text in a div and support rich text, which is probably to achieve the following

(picture cut from QuickBi, similar requirements)
I don't have a clue at this point, but I found that the plan told me to copy QuickBi. ok, let's go to QuickBi.

Review the element and see that the class name has obvious characteristics:

Baidu knows that this class name is based on TinyMCE, a rich text library.

ok, let's start to study the editor

Simplest demo

Search for tinyMCE and it's easy to find him Chinese document

According to the method of document introduction: (it is easy to get the following simplest demo)
step 1: introduce js Library
Do not worry about apiKey, just copy and paste the following code

<script src='https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key'></script>

step 2: initialize TinyMCE as part of the page
There will be more inline: true configuration than the demo code on the official website. The purpose is to realize the requirement mentioned at the beginning

<!DOCTYPE html>
<html>
<head>
  <script src='https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key'></script>
  <script>
  tinymce.init({
    selector: '#mytextarea',
    inline: true // This configuration will be written more than the demo code on the official website. The purpose is to realize the requirement mentioned at the beginning
  });
  </script>
</head>

<body>
<h1>TinyMCE Quick start example</h1>
  <form method="post">
    <textarea id="mytextarea">Hello, World!</textarea>
  </form>
</body>
</html>

Then you don't need to worry about anything. Just open the file in the browser. Let's see the dynamic image effect:

Using tinyMCE 5 rich text editor in Vue-cli3

step 1: Download tinymce

Install tinymce

npm install tinymce -S

Install TinyMCE Vue

npm install @tinymce/tinymce-vue -S

step 2: Download Chinese language pack
tinymce officially provides many language packs. You can download different language packs according to your preferences, Download address

After downloading, place some files in the public directory:

  1. Create a new tinymce folder in the public directory
  2. Find TinyMCE in node_modules and copy the skins directory to public/tinymce (note that the skins file directory of tinymce5 is inconsistent with the previous version)
  3. Unzip the language pack you just came back and put it in public/langs

The completed directory is as follows:

step 3: use in vue project
Sketch:

  1. Under files that require tinymce, import the following files:
    import tinymce from 'tinymce/tinymce'
    import 'tinymce/themes/silver/theme'
    import Editor from '@tinymce/tinymce-vue'
    
  2. Register Editor in components:
    	components: {
    	    Editor
    	  },
    
  3. Write the simplest configuration, and then use the components
    	init: {
            language_url: '/tinymce/langs/zh_CN.js',
            language: 'zh_CN',
            skin_url: '/tinymce/skins/ui/oxide',
            // Skin_url: 'TinyMCE / skins / UI / oxide dark', / / dark color system
            height: 300
          }
    

All codes are as follows:

<template>
  <div class="home" style="width:100%;height:100%;">
    <editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'
export default {
  name: 'Home',
  components: {
    Editor
  },
  data () {
    return {
      tinymceHtml: 'Please enter content',
      init: {
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        // Skin_url: 'TinyMCE / skins / UI / oxide dark', / / dark color system
        height: 300
      }
    }
  },
  mounted () {
    tinymce.init({})
  }
}
</script>

Design sketch

step 3: use 2 in the vue project (to meet the initial business requirements)
Direct code

<template>
  <div class="home" style="width:100%;height:100%;">
    <div
      style="margin-top:150px;height: 200px;width:800px;border:1px solid #000"
      id="mytextarea"
      v-html="tinymceHtml"
    ></div>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
export default {
  name: 'Home',
  data () {
    return {
      tinymceHtml: 'Please enter content'
    }
  },
  mounted () {
    const self = this
    tinymce.init({
      selector: '#mytextarea',
      inline: true,
      language_url: '/tinymce/langs/zh_CN.js',
      language: 'zh_CN',
      skin_url: '/tinymce/skins/ui/oxide',
      setup: function (editor) {
        editor.on('input', (e) => {
          console.log('input:', editor.getContent())
        })
        editor.on('blur', (e) => {
          self.tinymceHtml = editor.getContent()
        })
      }
    })
    window.tinymce = tinymce
  }
}
</script>

The rendering is as follows:

Reference

Vue CLI 3+tinymce 5 rich text editor integration
Using tinymce rich text editor in vue
tinymce Chinese document

41 original articles published, 49 praised, 110000 visitors+
Private letter follow

Tags: Vue npm

Posted on Sun, 15 Mar 2020 02:32:25 -0400 by Assim