Tinymce rich text

Tinymce rich text

1. Official website link: The Most Advanced WYSIWYG Editor | Trusted Rich Text Editor | TinyMCE /

Install components: npm install --save "@tinymce/tinymce-vue@^3"

2. FAQ handling

The problem handling code is intercepted from the sitesCMS source code. The complete code can be found in the sitesCMS source code. sitesCMS: sitesCMS is a multi-site CMS content management system based on JFinal. It follows the JFinal minimalist design concept. It is lightweight, easy to expand, and easy to learn. There is no other solution except JFinal. Heavy dependence. Streamlined multi-site functional design makes it easy to develop twice. One website a day is not a dream. The complete API module supports front-end docking of various mini programs such as WeChat mini programs and APPs, opening up mobile terminal development channels. SitesCMS is not just a CMS.

2.1.Chineseization

The solution for the problem is that TinyMCE defaults to English. The official language package is provided. Download the corresponding Chinese language package from this address. Language Packages | Trusted Rich Text Editor | TinyMCE /Configuration Language

language: 'zh-Hans',//Chinese language package

2.2. There is no Chinese font option

The problem is that even if the Chinese package is used, there is still no Chinese in the drop-down menu for selecting fonts. This is still a configuration problem. solution

font_family_formats: "Microsoft Yahei=\'Microsoft Yahei\'; Song font=\'Song font\'; Heidi=\'Hei font\'; Imitation Song Dynasty=\'Imitation Song Dynasty\'; Kai style=\'Kaiti\'; Official script=\ 'Lishu\';Youyuan=\'Youyuan\';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Courier New=courier new,courier; Georgia=georgia,palatino;Webdings=webdings;Wingdings=wingdings",//Font options

This is an encapsulated component

<template>
  <div class="sceditor">
    <Editor
      v-model="contentValue"
      :init="init"
      :disabled="disabled"
      :placeholder="placeholder"
      @onClick="onClick"
    />
  </div> 
</template>
​
<script>
import API from "@/api";
import Editor from "@tinymce/tinymce-vue";
import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver";
import "tinymce/icons/default";
import "tinymce/icons/default/icons.min.js"; 
import "tinymce/plugins/media"; //Table
import "tinymce/plugins/code"; //Edit the source code
​//
Introduce the editor plug-in
import "tinymce/plugins/image"; //Insert and edit images
import "tinymce/plugins/link"; //超链接
import "tinymce/plugins/preview"; //预览
import "tinymce/plugins/table"; //表格
​
export default {
  components: {
    Editor,
  },
  props: {
    modelValue: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "",
    },
    height: {
      type: Number,
      default: 300,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default: "code  link preview table media",
    },
    toolbar: {
      type: [String, Array],
      default:
        "undo redo | media forecolor backcolor bold italic underline strikethrough link | formatselect fontselect fontsizeselect | \
                    alignleft aligncenter alignright alignjustify outdent indent lineheight | bullist numlist | \
                      table  preview | code selectall",
    },
  },
  data() {
    return {
      init: {
        language_url: "tinymce/langs/zh_CN.js", //引入汉化包
        language: "zh_CN", //中文
        skin_url: "tinymce/skins/ui/oxide",
        content_css: "tinymce/skins/content/default/content.css",
        menubar: false, 
        statusbar: true, 
        plugins: this.plugins, 
        toolbar: this.toolbar, 
        fontsize_formats: 
          "12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px", 
        height: this.height, 
        placeholder: this.placeholder, 
        branding: false, 
        resize: true, 
        elementpath: true, 
        content_style: "", 
        images_upload_handler: async (blobInfo, success, failure) => { // This is the upload callback docking interface 
          const data = new FormData(); 
          data.append ("file", blobInfo.blob(), blobInfo.filename());
          try {
            const res = await this.$API.model.common.upload.post(data); //接口
            success(res.msg.split(",")[0]);
          } catch (error) {
            failure("Image upload failed");
          }
        },
        setup: function (editor) {
          editor.on("init", function () {
            this.getBody().style.fontSize = "14px";
          });
        },
      },
      contentValue: this.modelValue,
    };
  },
  watch: {
  //内容值
    modelValue(val) {
      this.contentValue = val;
    },
    contentValue(val) {
      //Pass parameter
      this.$emit("update:modelValue", val);
    },
  },
  //初始化
  mounted() {
    tinymce.init({});
  },
  methods: {
    onClick(e) {
      this.$emit("onClick", e, tinymce);
    },
  },
};
</script>
​
<style>
body .tox-tinymce-aux {
  z-index: 5000;
}
</style>
​

Page introduction ,

import { defineAsyncComponent } from "vue";
const scEditor = defineAsyncComponent(() => import("@/components/scEditor"));
components: {
    scEditor,
  },
  <el-col :span="24">
  <scEditor v-model="form.description" />
  </el-col>

as the picture shows:

at last

Thanks for reading. If you have any deficiencies, please feel free to discuss them in the comment area!