Transfer to-TinyMC-VUE for use

Mobile 2023-09-29 19:52:11 views: null

Disclaimer, please pay attention to the following two points before use

1 Pay attention to your vue version when installing (tips: if the wrong version is installed, your project will report an error inexplicably), as follows:

vue 3.x installs the following version
npm install tinymce -S
npm install @tinymce/tinymce-vue -S

================================================================

vue 2.x install the following version, which is the final version of vue2

npm install [email protected] -S
npm install @tinymce/[email protected] -S

================================================================

2 When quoting later (import...), please note that the directory where the extension plug-in below is placed is different. If you find it useless, you can delete it without quoting. There is a complete example at the end.

// Extension plug-in
import "../assets/tinymce/plugins/lineheight/plugin";
import "../assets/tinymce/plugins/bdmap/plugin";

================================================================

3 Create a tinymce folder under the public folder and put it in. If you don’t do this, an error may be reported during production. The directory is as follows 

The production effect is as follows: 

 When configuring, pay attention to the directory path (all codes follow)

init: {         language_url: " tinymce/langs/zh_CN.js ", // Chinese language pack path         language: "zh_CN",         skin_url: " tinymce/skins/ui/oxide ",


...

--------------------------------------------Dividing line---- -------------------------------------------------- ----------------

 Blog ( coder's self-cultivation ) original link: tinymce--a very easy-to-use rich text editor vue integrates tinymce editor-coder's self-cultivation

Introduction to TinyMC Editor

TinyMCE is an easy-to-use and powerful WYSIWYG rich text editor. Compared with other rich text editors, it has rich plug-ins, supports multiple languages, can meet daily business needs, and is free.

Advantages of TinyMCE:

  • Open source and commercially available, based on LGPL2.1
  • Plug-ins are abundant, and the built-in plug-ins basically cover the functions you need every day.
  • Rich interfaces, strong scalability, and the ability to infinitely expand functions
  • The interface is good-looking and in line with modern aesthetics
  • Provides three modes: classic, inline, and immersive without interference (see "Introduction and Getting Started" for details)
  • Excellent support for standards (since v5)
  • Multi-language support, dozens of languages ​​can be downloaded from the official website.

The picture below is a screenshot of all functions enabled

​

You can see that it has many functions, which are very similar to Word. It can meet the basic functional requirements. In addition, you can also change the color icons.

​

​​

TinyMCE Chinese documentation address: TinyMCE Chinese documentation Chinese manual

Vue project integrates TinyMCE editor

1. Installation

vue-cli version: 4.4.0

Install tinymce

npm install tinymce -S

copy

tinymce version: 5.3.1

Install tinymce-vue

npm install @tinymce/tinymce-vue -S

copy

tinymce-vue is a vue component officially provided by tinymce. It can be used directly, but you must register on the official website to obtain the api-key, otherwise there will only be a trial period. So if you don't want to buy it, just write your own components.

After these two components are installed, create a new folder static/tinymce in the public directory. After the directory is created, find the tinymce/skins directory under the node_modules folder, and copy the skins directory to the static/tinymce folder we created. As shown below

​

​​

2. Configure Chinese language

Go to the official website to download the Chinese language package zh_CN.js

​

Create a new langs folder in the static/tinymce folder you just created to store the Chinese language pack we downloaded, as shown in the figure below

​

​​

3. Component writing

Create a new component, here I name it imcoder-tinymce.vue

In the component we introduce tinymce

import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";

copy

Write component props

props: {
    value: {
      type: String,
      default: ""
    },
    // 默认插件 这里写的比较全，基本上是全部了
    plugins: {
      type: [String, Array],
      default:
        "preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr nonbreaking insertdatetime advlist lists wordcount imagetools textpattern autosave bdmap autoresize lineheight"
    },
    // 默认工具栏 这里写的比较全，基本上是全部了
    toolbar: {
      type: [String, Array],
      default:
        "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent lineheight formatpainter | \
    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap hr pagebreak insertdatetime | bdmap fullscreen preview"
    }
  },

copy

​​tinymce-vue needs to be registered in components before it can be used

 components: {
    Editor
 },

copy

How to use it

<template>
  <!-- 富文本 -->
  <div>
    <editor v-model="content" :init="init"></editor>
  </div>
</template>

copy

init is a configuration item of tinymce

//初始化配置
      init: {
        language_url: "tinymce/langs/zh_CN.js", // 中文语言包路径
        language: "zh_CN",
        skin_url: "tinymce/skins/ui/oxide",
        height: 770,
        min_height: 770,
        max_height: 770,
        toolbar_mode: "wrap",
        plugins: this.plugins,
        toolbar: this.toolbar,
        content_style: "p {margin: 5px 0;}",
        fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
        branding: false,
        //此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_upload_handler: (blobInfo, success, failure) => {
          const img = "data:image/jpeg;base64," + blobInfo.base64();
          success(img);
        }
      },

copy

After completing the above steps, you need to initialize it again in mounted.

mounted() {
  tinymce.init({}); // 这里传个空对象就可以了
},

copy

If the following error occurs, it may be that the path configuration is incorrect. Check carefully whether the path is written correctly.

​

​​If this situation occurs, it is because the font icon component is not introduced

​

Just import it manually

import "tinymce/icons/default/icons";

copy

​​

Introduce the tinymce plug-in. Some functions require the introduction of plug-ins to support it, such as image uploading, tables, etc. Here I have introduced most of the plug-ins. As follows:

import "tinymce/plugins/image";
import "tinymce/plugins/media";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/preview";
import "tinymce/plugins/code";
import "tinymce/plugins/link";
import "tinymce/plugins/advlist";
import "tinymce/plugins/codesample";
import "tinymce/plugins/hr";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/autolink";
import "tinymce/plugins/directionality";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/template";
import "tinymce/plugins/charmap";
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/imagetools";
import "tinymce/plugins/autosave";
import "tinymce/plugins/autoresize";

copy

Introducing extensions

Some plug-ins are not provided by third parties, but are open sourced by others. If we use them at this time, we must introduce them. Some articles on the Internet say that you should put the downloaded plug-ins directly under node_modules/tinymce/plugins, and then directly quote them. Okay, but I found that it doesn't work, maybe my method is wrong.

Solution: Create a new /tinymce/plugins directory under src/assets, decompress the downloaded plug-ins and put them in, and then quote them, as shown below

​

Here I used the row height plug-in and Baidu map plug-in

// 扩展插件
import "../assets/tinymce/plugins/lineheight/plugin";
import "../assets/tinymce/plugins/bdmap/plugin";

copy

​​

The complete code is as follows

<template>
  <!-- 富文本 -->
  <div>
    <editor v-model="content" :init="init" :disabled="disabled" @onClick="onClick"></editor>
  </div>
</template>


<script>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default/icons";
import "tinymce/themes/silver";
import "tinymce/plugins/image";
import "tinymce/plugins/media";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/preview";
import "tinymce/plugins/code";
import "tinymce/plugins/link";
import "tinymce/plugins/advlist";
import "tinymce/plugins/codesample";
import "tinymce/plugins/hr";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/autolink";
import "tinymce/plugins/directionality";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/template";
import "tinymce/plugins/charmap";
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/imagetools";
import "tinymce/plugins/autosave";
import "tinymce/plugins/autoresize";
// 扩展插件
import "../assets/tinymce/plugins/lineheight/plugin";
import "../assets/tinymce/plugins/bdmap/plugin";


export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default:
        "preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr nonbreaking insertdatetime advlist lists wordcount imagetools textpattern autosave bdmap autoresize lineheight"
    },
    toolbar: {
      type: [String, Array],
      default:
        "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent lineheight formatpainter | \
    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap hr pagebreak insertdatetime | bdmap fullscreen preview"
    }
  },
  data() {
    return {
      //初始化配置
      init: {
        language_url: "/static/tinymce/langs/zh_CN.js",
        language: "zh_CN",
        skin_url: "/static/tinymce/skins/ui/oxide",
        height: 770,
        min_height: 770,
        max_height: 770,
        toolbar_mode: "wrap",
        plugins: this.plugins,
        toolbar: this.toolbar,
        content_style: "p {margin: 5px 0;}",
        fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
        branding: false,
        //此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_upload_handler: (blobInfo, success, failure) => {
          const img = "data:image/jpeg;base64," + blobInfo.base64();
          success(img);
        }
      },
      content: this.value
    };
  },
  mounted() {
    tinymce.init({});
  },
  methods: {
    
  },
  watch: {
    value(newValue) {
      this.content = newValue;
    },
    content(newValue) {
      this.$emit("input", newValue);
    }
  }
};
</script>
<style scoped lang="scss">
</style>

copy

4. Component usage

import Editor from "@/components/imcoder-tinymce";
components: { Editor },
<editor v-model="yourContent"></editor>

copy

Hope this article can help you

Guess you like

Origin blog.csdn.net/tdjqqq/article/details/125049433
Recommended
Linus is the most active in "eating dog food"!
Ranking
Share good programmer web front-end array and sorting, de-duplication and random roll call
Compilation error caused by cv_bridge and python version problems error: return-statement with no value, in function returning'void*' [-fpe
魔众帮助中心系统 v3.1.0 首页切换器，界面优化
Die beim Millimeterwellenradar-Integrationstest aufgetretene Grube (Multiprozessbindung an einen UDP-Port verursacht Probleme)
How to suppress the "requires transitive directive for an automatic module" warning properly?
LeetCode-1743. Restore the Array From Adjacent Pairs-Analysis and Code (Java)
Summer 2019 Summer soft essay 7 workers
Python中Assert断言的使用语法和例子
LeetCode one question per day (2021-2-3 sliding window median)
Fairchild, the ancestor of semiconductors, the legend of the first trillion-dollar start-up
Daily
More
2024-05-20(5)
2024-05-19(0)
2024-05-18(31)
2024-05-17(6)
2024-05-16(23)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)

Code World

© 2018 codetd.com