Vue integrates tinymce rich text editor

👉 preface

Rich text is a relatively common function, but there are a lot of holes, in the selection of the time also read a lot of articles, finally decided to choose Tinymce. Why do YOU choose this one? The first one is the UI, which I think is very beautiful. The second one is that the documentation is relatively complete, and there are corresponding Chinese versions, and each API is also friendly. Common rich text and analysis has also done the article, detailed can see the flower underpants guy this article common rich text.

📁 Related documents

Tinymce official documentation
Tinymce Chinese document

🔨 installing tinymce

Note: @tinymce/tinymce-vue above 4 cannot be used in VUe2

NPM install @ tinymce/[email protected] -s

NPM install [email protected] – S

The compiler is in English by default. If you need to make it Chinese, you can download it from the Chinese package

Create a new Tinymce folder under the public folder of your project to hold themes and language packs, as well as any plug-ins you may need to customize later. Copy node_modules/tinymce/skins (theme) to public/tinymce. In addition, create a langs directory in Tinymce to store the downloaded Chinese packages.

✅ Official start

<template>
  <div>
    <tinymce-editor
      :id="tinymceId"
      :value="content"
      :init="init"
      :witdh="width"
      :height="height"
      :resize="resize"
      :disabled="disabled"
      @input="onInput"
    />
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import TinymceEditor from '@tinymce/tinymce-vue'
// Import configuration information
import defaultConfig from './config'
import { isEmpty } from '@/utils/validate'

export default {
  name: 'Editor'.components: { TinymceEditor },
  props: {
    id: {
      type: String.default: function() {
        // This id must be written, otherwise there will be a puzzling problem.
        return 'tinymce-' + Date.now() + Math.floor(Math.random() * 1000)}},/ / content
    content: {
      type: String.default: ' '
    },
    // Whether to disable
    disabled: {
      type: Boolean.default: false
    },
    / / width
    width: {
      type: [String.Number].default: '100%'
    },
    / / height
    height: {
      type: [String.Number].default: 450
    },
    // Whether drag is allowed
    resize: {
      type: [String.Boolean].default: true
    },
    / / the menu bar
    menubar: {
      type: String.default: ' '
    },
    / / the toolbar
    toolbar: {
      type: String.default: ' '}},data() {
    return {
      tinymceId: this.id,
      init: Object.assign(defaultConfig, {
        // Component values override the default configuration
        width: this.width,
        height: this.height,
        resize: this.resize,
        menubar: isEmpty(this.menubar) ? defaultConfig.menubar : this.menubar,
        toolbar: isEmpty(this.toolbar) ? defaultConfig.toolbar : this.toolbar
      })
    }
  },
  methods: {
    onInput(content) {
      this.$emit('update:content', content)
    }
  }
}
</script>
Copy the code

In order to make the code more elegant, and easy to manage the configuration and plug-in, the configuration information is made a separate config.js to manage.

// Import theme and icon information
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/icons/default/icons'

// Import plug-ins
// https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/lists'// List plugins
import 'tinymce/plugins/code' // Source code plug-in
import 'tinymce/plugins/pagebreak' // A page break plug-in
import 'tinymce/plugins/charmap' // Special symbol plug-in
import 'tinymce/plugins/emoticons' // Emoticons
import 'tinymce/plugins/save' // Save the plug-in
import 'tinymce/plugins/preview' // Preview the plugin
import 'tinymce/plugins/print' / / print
import 'tinymce/plugins/image'// Upload image plugin
import 'tinymce/plugins/media'// Video plugin
import 'tinymce/plugins/link' // Link plugins
import 'tinymce/plugins/anchor' // Anchor point plug-in
import 'tinymce/plugins/codesample' // Code plug-in
import 'tinymce/plugins/table'// Table plugin
import 'tinymce/plugins/searchreplace' // Find and replace plug-ins
import 'tinymce/plugins/hr' // Horizontal splitter plugin
import 'tinymce/plugins/insertdatetime' // Time and date plugins
import 'tinymce/plugins/paste' // Sticky plugin
import 'tinymce/plugins/wordcount'// word count plug-in
import 'tinymce/plugins/fullscreen' // Full screen plug-in
import 'tinymce/plugins/help' // Help plugin

import { upload } from '@/api/system/common'

// Configuration information
// https://www.tiny.cloud/docs/configure/integration-and-setup/
export default {

  /** * language path */
  language_url: '/tinymce/langs/zh_CN.js'./** ** language */
  language: 'zh_CN'./** * Theme style path */
  skin_url: '/tinymce/skins/ui/oxide'./** * text style path */
  content_css: '/tinymce/skins/content/default/content.min.css'./** ** expression path */
  emoticons_database_url: '/tinymce/emojis/emojis.min.js'./** ** width */
  width: '100%'./** * height */
  height: 450./** * plugins */
  plugins: 'lists code pagebreak charmap emoticons save preview print image media link paste ' +
           'anchor codesample table wordcount fullscreen help searchreplace hr insertdatetime'./** * menu bar * file file * edit Edit * View view * insert Insert * format * Tools tools * table table * help help */
  menubar: 'file edit view insert format tools table help'./ * * * * https://www.tiny.cloud/docs/demo/full-featured/ * toolbar | formatselect fontselect fontsizeselect, font, size, * | | paragraph Undo redo | | undo and redo * code bold italic underline strikethrough | source code, bold, italic, underline, strikeout * | alignleft aligncenter alignright Alignjustify | left alignment, alignment, middle right alignment, full-justified * | outdent text-indent numlist bullist insertdatetime | outdent, increase indent, numbered lists, project list, date of time * | table Forecolor backcolor removeformat | forms, text color, background color, clear format * | hr searchreplace pagebreak charmap emoticons | Horizontal line, find, replace, page breaks, special symbols, expression * | fullscreen preview save print * | | full screen, preview, save, and print the image media link anchor codesample | Upload files, upload materials, insert links, anchors, insert code */
  toolbar: '| formatselect fontselect fontsizeselect ' +
           '| undo redo ' +
           '| code bold italic underline strikethrough ' +
           '| alignleft aligncenter alignright alignjustify ' +
           '| outdent indent numlist bullist insertdatetime ' +
           '| table forecolor backcolor removeformat ' +
           '| hr searchreplace pagebreak charmap emoticons ' +
           '| fullscreen preview save print ' +
           '| image media link anchor codesample './** * Toolbar expansion mode */
  toolbar_mode: 'sliding'./** * whether dragging is allowed * true (only height allowed), false (not allowed at all), 'both' (width and height can be changed, note the quotes) */
  resize: false./** * Bottom status bar */
  statusbar: true./** * Whether to display copyright information */
  branding: false./** * Whether to allow pasting images */
  paste_data_images: true./** * Time and date formatting */
  insertdatetime_formats: ['%H point %M point '.'%Y年%m月%d日'.'%Y year %m month % D day %H point %m minute '.'%Y-%m-%d %H:%M'].// Base64 is used by default
  images_upload_handler: function(blobInfo, success, failure) {
    const maxSize = 2
    const blob = blobInfo.blob()

    if (blob.size / 1024 / 1024 > maxSize) {
      failure('Picture size cannot exceed' + maxSize + 'MB')
      return
    }

    const formData = new FormData()
    formData.append('file', blob, blobInfo.fileName)

    upload(formData).then(res= > {
      success(res.data.fileUrl)
    }).catch(() = > {
      failure('File upload failed, please try again')}}}Copy the code

Note: if you need to introduce expressions plug-in, the node_modules/tinymce/plugins/emoticons under/js emojiimages. Min. Js placed under the public, otherwise unable to use.

❔ How to use custom image upload?

There is a url configuration for uploading, but it needs the background to return the specified data format.

We still want to be able to customize the parameters so that it doesn’t affect the background. We can implement the images_upload_handler function. If not, the default is base64.

images_upload_handler: function(blobInfo, success, failure) {
    const maxSize = 2
    const blob = blobInfo.blob()

    // Determine the size of the image
    if (blob.size / 1024 / 1024 > maxSize) {
        failure('Picture size cannot exceed' + maxSize + 'MB')
        return
    }

    // Assemble the image information
    const formData = new FormData()
    formData.append('file', blob, blobInfo.fileName)

    // Call the upload image interface
    upload(formData).then(res= > {
        // Assign the returned full path to the SUCCESS callback function
        success(res.data.fileUrl)
    }).catch(() = > {
        failure('File upload failed, please try again')})}Copy the code

🔴 Effect

That’s it for tinymce. If you have any questions or suggestions, feel free to leave them in the comments.

Vue integrates tinymce rich text editor

👉 preface

📁 Related documents

🔨 installing tinymce

✅ Official start

❔ How to use custom image upload?

🔴 Effect

Related Posts

Implement hash routing in VUE manually (1)

Two ways to configure Eslint in WebStorm and compare the differences

Flutter for web. Not finding HTML packages across web and APP