background

At present, there are many rich text supporting vue.js in the market, for example: UEditor, wangEditor, Quill, etc., have also been screened and verified. At the beginning, Quill was selected, but later it was found that the client that needed to be displayed also needed to reference its style to support it. Others have also tried wangEditor and UEditor. I chose TinyMCE (rich in plug-ins, beautiful interface, and mobile compatibility). On the first website: www.tiny.cloud/docs/demo/f…

Related,

"@tinymce/tinymce-vue": "^ 3.2.0"."tinymce": "^ 5.2.0." "
Copy the code

Access instructions

Chinese document

It introduces the use of various plug-ins, as well as the configuration of parameters, according to the need to consult.

tinymce.ax-z.cn/

Component localization

Tinymce. Ax – z.c n/general/loc…

The import plug-in

Here, you can define a Js (import-all.js) to import all plug-ins at once, or you can import them as required.

const importAll = requireContext= > requireContext.keys().forEach(requireContext)
try {
  // Import all plug-ins
  importAll(require.context('.. /.. /.. /node_modules/tinymce/plugins'.true))}catch (err) {
  console.log(err)
}
Copy the code
Creating a component instance
  • Page section
<template>
  <div>
    <editor id="tinymceEditor"
            :init="tinymceInit"
            v-model="content"
            :key="tinymceFlag">
    </editor>
  </div>
</template>
<script>
Copy the code
  • Depend on the part
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
// Introduce the application theme
import 'tinymce/themes/silver'
// Introduce the app icon
import 'tinymce/icons/default'
// Import all plug-ins
import './import-all'

// You can also choose other storage methods.
// Here is my custom file upload related resources (obtain OSS connection, obtain OSS upload authentication, generate file name)
import { client, getFileNameUUID } from '@/utils/ali-oss'
import { getStsPermission } from '@/api/common/common'
Copy the code
  • Data method section
export default {
  name: 'Tinymce'.components: {
    Editor
  },
  props: {
    // Editor content
    editorContent: {
      type: String.default: ' '
    },
    // Editor height
    height: {
      type: Number.default: 800
    },
    // Editor width
    width: {
      type: Number.default: undefined
    },
    upload_url: {
      type: String.default: ' '
    },
    showMenubar: {
      type: Boolean.default: true
    },
    toolbar: {
      type: String.default: ` undo redo | formatselect | bold italic strikethrough forecolor backcolor formatpainter | link image | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat | preview fullscreen code`
    },
    baseUrl: {
      type: String.default: ' '
    },
    // Uniformly configure the CDN prefix
    cdnOrigin: {
      type: String./ / the CDN
      / / the default: 'https://cdn.jsdelivr.net/npm/[email protected]'
      // Custom CDN(if there are other special changes to the style file, you can modify it and upload it to a reliable place for access)
      default: 'https://static.v.xxxxxxxxx.com/system/resources/tinymce'}},data() {
    return {
      tinymceFlag: 1.tinymceInit: {},
      content: ' '}},mounted() {
    if (this.editorContent) {
      this.content = this.editorContent
    }
  },
  watch: {
    content: {
      handler() {
        this.$emit('update:editorContent'.this.content)
        console.log('Listening for data changes')}},editorContent: {
      handler() {
        this.content = this.editorContent
      },
      immediate: true}},activated() {
    this.tinymceFlag++
  },
  created() {
    const _this = this
    this.tinymceInit = {
      // Language pack Settings (see: http://tinymce.ax-z.cn/general/localize-your-language.php)
      language_url: `The ${this.cdnOrigin}/langs/zh_CN.js`.language: 'zh_CN'./ / skin path
      skin_url: `The ${this.cdnOrigin}/skins/ui/oxide`.content_css: `The ${this.cdnOrigin}/skins/ui/oxide/content.css`.// Editor height
      height: this.height,
      width: undefined.// Spell check
      browser_spellcheck: true./ / to watermark
      branding: false.// Disable the status bar at the bottom of the editor
      elementpath: false.// Hide the status bar at the bottom of the editor
      statusbar: false.// Allow pasting images
      paste_data_images: true.image_dimensions: false.// Hide the uppermost menu
      menubar: this.showMenubar,
      Fullpage can remove tags such as HTML, head, and body
      plugins: `print searchreplace autolink directionality visualblocks visualchars template codesample charmap hr pagebreak nonbreaking anchor toc insertdatetime wordcount textpattern help advlist table lists paste preview fullscreen image imagetools code link`.toolbar: this.toolbar,

      /** Handle file image file upload */
      async images_upload_handler(blobInfo, success, failure) {
        // Here belongs to the specific self-upload business logic
        // including but not limited to OSS, COS, Qiuniuyun and other front-end WEB direct transmission
        // Or transfer files to their respective servers}}}}Copy the code
Component Application Examples

Here, you can obtain rich text content and plain text content of the editor, corresponding to THE DYNAMIC binding of HTML and text.

<el-form-item label=" article content" prop="content"> <tinymce V-if ="open" :html-content.sync=" form.contenthtml" :text-content.sync="form.content"> </tinymce> </el-form-item>Copy the code

Results the preview

Editor window

Uploading image Effect

Content small window preview

Problems encountered and solutions

At the Dialog level, occlusion problem
  • Locate the skins folder under the dependency package, as shown, and copy it locally or under the project’s Pubilc

  • willskin.min.cssThe value of z-index is changed from 1300 to 5000 or higher. The value is 5000

  • You can use a local reference or upload the reference to the cloud storage device to solve the problem.
Preview width adjustment problem

A.tox. Tox-dialog — width-LG style block defines the maximum width. Delete it or specify a specific value.

The problem of automatically increasing the width of pictures is not adaptive

When setting tinymceInit initialization, specify the following parameters as disabled

image_dimensions: false
Copy the code