How to use tinymce in vue3.0+ and implement the function of uploading multiple images and file upload formula editing

yarn add tinymce || npm install tinymce -S

yarn add @tinymce/tinymce-vue || npm install @tinymce/tinymce-vue -S

<template>
    <div class="tinymce-box">
		<Editor v-model="contentValue" :init="init" :disabled="disabled" @onClick="onClick" />
	</div>
</template>

<script>
import api from '../api/api.js'

//Import TinyMCE Editor import Editor from '@tinymce/tinymce-vue'

//Introduce tinymce related files in node_modulesimport tinymce from 'tinymce/tinymce' //tinymce is hidden by default, the editor will not be displayed if it is not importedimport 'tinymce/themes/silver' //Editor theme, an error will be reported if it is not importedimport 'tinymce/icons/default' //Introduce editor icon icon, if it is not imported, the corresponding icon will not be displayed//Introduce editor plug-ins (basic free plug-ins are all here)
: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
      name: 'TEditor',
      components:
            Editor
      },
      props: {
            value: {
                  type: String,
                  default: ''
            },
            disabled:
                  type: Boolean,
                  default: false
            },
            plugins: {
                  type: [String, Array],
                  default: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave '
            },
            toolbar:
                  type: [String, Array],
                  default: 'fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
                styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
                table image media charmap hr pagebreak insertdatetime print preview | code selectall searchreplace visualblocks | indent2em lineheight formatpainter axupimgs'
            },
      },
      data(){
             return {
                  init: {
                        language_url: '/tinymce/langs/zh_CN.js', //Introduce language pack filelanguage: 'zh_CN', //Language typeskin_url: '/tinymce/skins/ui/oxide', //Skin: light color//skin_url: '/tinymce/skins/ui/oxide-dark', //Skin: dark colorplugins: this.plugins, //Plugins configurationtoolbar: this.toolbar, //Toolbar configuration, set to false to hide//menubar: 'file edit', //Menu bar configuration, set to false to hide, if not configured, all menus are displayed by default, you can also customize the configuration--see http://tinymce.ax-z.cn/configure/editor-appearance.php --Search for "custom menu"

                        : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :				
                        height: 400, //Note: This property becomes invalid when the autoresize plugin is introduced. placeholder: 'Enter text here',
                        : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
                        paste_data_images: true, //Can images be pasted? images_upload_handler: (blobInfo, success, failure) => {
                              if(blobInfo.blob().size/1024/1024>2){
                                    failure("Upload failed, please keep the image size within 2M")
                              }else{
                                    let params = new FormData()
                                    params.append('file',blobInfo.blob())
                                    let config={
                                          headers:{
                                                "Content-Type":"multipart/form-data"
                                          }
                                    }
                                    this.$axios.post(`${api.baseUrl}/api-upload/uploadimg`,params,config).then(res=>{
                                          if(res.data.code==200){
                                                success(res.data.msg) //Upload successfully, fill in the image path in the success function}else{
                                                failure("Upload failed")
                                          }
                                    }).catch(()=>{
                                          failure("Upload error, the server is down")
                                    })
                              }
                        }
                  },
                  contentValue: this.value
            }
      },
      watch:
            value (newValue) {
                  this.contentValue = newValue
            },
            contentValue (newValue) {
                  this.$emit('input', newValue)
            },
      },
      created(){
      
      },
      mounted(){
            tinymce.init({})
      },
      methods: {
            // Add related events, for available events refer to the documentation => https://github.com/tinymce/tinymce-vue => All available events
            onClick(e){
                  this.$emit('onClick', e, tinymce)
            },
            // Clear the content clear(){
                  this.contentValue = ''
            },
      },
}
</script>

<style lang="less">
	
</style>

Register globally in main.js import TEditor from '@/components/TEditor.vue'
Vue.component('TEditor',TEditor)

Use <TEditor ref="editor" v-model="value" /> on related pages 

Uncaught SyntaxError: Unexpected token '<'
Failed to load emoticons: Script at URL
 "http://xxxx/static/js/plugins/emoticons/js/emojis.js" did not call
 `tinymce.Resource.add('tinymce.plugins.emoticons', data)` within 1 second

1. Go to the document above to download the intent2em plugin. 2. Copy the unzipped first line indent plugin intent2em to the public/tinymce folder, as shown in Figure 3. Create a new index.js in indent2em and write the following code // Exports the "indent2em" plugin for usage with module loaders
// Usage:
// CommonJS:
// require('tinymce/plugins/indent2em')
// ES2015:
// import 'tinymce/plugins/indent2em'
require('./plugin.js');

4. Import the first line indent plug-in in components/TEditor.vue, and register the plug-in in plugins and toolbar, as shown in the figure import '../../public/tinymce/indent2em' //First line indent 5. Refresh or restart the project to use it 

Due to the deployment of the project path, the previous default CSS import may have problems and report warnings, so it is recommended to import a CSS to replace the previous one. 1. Create a new tinycontent.css in the public/tinymce folder
2. Import tinycontent.css in init of src/components/TEditor.vue and comment out content_style (because the css file is introduced, the content_style field is not needed)
content_css: `${api.editorUrl}tinymce/tinycontent.css`, //Customize the CSS style of the editable area in the form of CSS files. The CSS file needs to be created and imported by yourself. 3. Refresh or restart the project, and the warning will disappear. 

1. Go to the document above and download the multi-image upload plugin axupimgs

2. Copy the unzipped multi-image upload plugin axupimgs to the public/tinymce folder 3. Create a new index.js in the axupimgs folder and write the following code // Exports the "axupimgs" plugin for usage with module loaders
// Usage:
// CommonJS:
// require('tinymce/plugins/axupimgs')
// ES2015:
// import 'tinymce/plugins/axupimgs'
require('./plugin.js');

4. Open axupimgs/plugin.js and configure the following lines of code (Why configure: because the purpose of these lines of code is to introduce the upfiles.html file of the multi-image upload pop-up box,
If the multi-image upload function pops up a dialog box, but there is no content in the dialog box, it may be that the path is not imported correctly, and you need to configure it again.)
Before configuration:
tinymce.PluginManager.add('axupimgs', function(editor, url) {
	var pluginName='Multiple image uploads';
	window.axupimgs={}; //Throw external public variables, or a custom location var baseURL=tinymce.baseURL;
	var iframe1 = baseURL+'/plugins/axupimgs/upfiles.html';

After configuration:
+ import api from '@/api/api.js'
tinymce.PluginManager.add('axupimgs', function(editor, url) {
	var pluginName='Multiple image uploads';
	window.axupimgs={}; //Throw external public variables, or a custom location + var baseURL=api.editorUrl;
+ var iframe1 = baseURL+'tinymce/axupimgs/upfiles.html';
Note: Each person's project is different, so the path configuration is also different. You can configure it according to your own project.

5. Introduce the multi-image upload plug-in in components/TEditor.vue, and register the plug-in in plugins and toolbar (see figure)
import '../../public/tinymce/axupimgs' //Multiple image upload 6. Refresh or restart the project Note: This multiple image upload function is based on the single image upload function. Multiple image upload is to call the single image upload interface function multiple times (see images_upload_handler at the top).
Therefore, the single image upload function must be completed first. The single image upload has been implemented in the top code, so I will not go into details here. 

1. Register the link plug-in and media plug-in in plugins and toolbar (see figure)

2. Add the following code in init (the following code is common to the link plug-in and the media plug-in. After configuration, both plug-ins can be used) (see figure)
file_picker_types: 'file image media', //Corresponding to three types of file uploads: link plug-in, image and axupimgs plug-in, media plug-in. If you want to block the upload of a certain plugin, remove the corresponding parameter file_picker_callback: (callback, value, meta)=>{
      let filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4, .jpg'; //Limit the upload type of the file let inputElem = document.createElement('input'); //Create file selection inputElem.setAttribute('type', 'file');
      inputElem.setAttribute('accept', filetype);
      inputElem.click();
      inputElem.onchange=()=>{
            let upurl=''
            let file=inputElem.files[0] //Get file information if(file.type.slice(0,5)=='video'){ //Judge file type upurl=`${api.baseUrl}/api-upload/uploadTxVideo`
            }else{
                  upurl=`${api.baseUrl}/api-upload/upload`
            }
            if(file.type.slice(0,5)=='image'&&file.size/1024/1024>2){
                  alert("Upload failed, please keep the image size within 2M")
            }else if(file.type.slice(0,5)=='video'&&file.size/1024/1024>500){
                  alert("Upload failed, please keep the video size within 500M")
            }else if(file.size/1024/1024>10){
                  alert("Upload failed, please keep the file size within 10M")
            }else{
                  let params = new FormData()
                  params.append('file',file)
                  let config={
                        headers:{
                              "Content-Type":"multipart/form-data"
                        }
                  }
                  this.$axios.post(upurl,params,config).then(res=>{
                        if(res.data.code==200){
                              callback(res.data.data) //Upload successfully, fill in the file path in the callback function}else{
                              alert("Upload failed")
                        }
                  }).catch(()=>{
                        alert("Error in uploading, the server is down")
                  })
            }
      }
}

3. See the picture for specific effects 

1. MathJax plug-in + LaTeX syntax When it comes to formula editing function, the first thing that comes to mind is to introduce the MathJax plug-in and use LaTeX syntax. There are several disadvantages to this.
One is that users do not know LaTeX syntax, and the other is that in vue's v-html, rich text rendered with LateX syntax is not effective.
Because the slash \ in latex syntax will be escaped in v-html, making it unrecognizable. So after some consideration, I decided to give up this implementation.
Of course, if your project uses MathJax without any impact, you can use its method. The implementation method is not described here. Please refer to the following document for implementation steps: https://www.cnblogs.com/already/p/12876452.html
MathJax usage document 1: https://www.cnblogs.com/mqingqing123/p/12711372.html
MathJax usage document 2: https://www.cnblogs.com/mqingqing123/p/12026817.html
LaTeX syntax: https://www.jianshu.com/p/27b163b1c6ef

2. Use kityformula of Baidu Editor
I have been using Baidu Editor before, and I like its formula editing plug-in kityformula quite a lot.
However, KityFormula is dependent on Baidu Editor and cannot be integrated into TinyMCE separately (if there is a way to integrate it separately, please let me know)
So consider introducing Baidu Editor into the project, and only use its formula editing function, and then integrate the entire Baidu Editor into TinyMCE.

1. Create a new folder named formulas in the public/tinymce folder 2. Create a new index.js file in the formulas folder and write the following code // Exports the "formulas" plugin for usage with module loaders
// Usage:
// CommonJS:
// require('tinymce/plugins/formulas')
// ES2015:
// import 'tinymce/plugins/formulas'
require('./plugin.js');

3. Create plugin.js and plugin.min.js in the formulas folder and write the following code. The two files have the same code. import api from '@/api/api.js'
tinymce.PluginManager.add('formulas', function(editor, url) {
      var pluginName='Formula';
    //Configuration file import path, according to your own project, I introduce here api.editorUrl=http://192.168.1.171/apib
    //It should be noted that the page address represented by iframe1 must be accessible when running offline, otherwise it will be displayed on the project homepage by default. var iframe1 = api.editorUrl+'tinymce/formulas/formulas.html';
      var openDialog = function () {
            return editor.windowManager.openUrl({
                  title: pluginName,
                  size: 'large',
                  url:iframe1,
                  buttons: [
                        {
                              type: 'cancel',
                              text: 'Close'
                        },
                        // {
                        // type: 'custom',
                        // text: 'Save',
                        // name: 'save',
                        // primary: true
                        // },
                  ],
            });
      };
    
      // Register a toolbar button name editor.ui.registry.addButton('formulas', {
            text: pluginName,
            onAction: function () {
                  openDialog();
            }
      });
  
      // Register a menu item name menu/menubar
      editor.ui.registry.addMenuItem('formulas', {
            text: pluginName,
            onAction: function() {
                  openDialog();
            }
      });
  
      return {
            getMetadata: function () {
                  return {
                        //The plugin name and link will be displayed in "Help" → "Plugins" → "Installed plugins" name: "Example plugin", //Plugin name url: "http://exampleplugindocsurl.com", //Author URL};
            }
      };
});
  
4. Create a new form in the formulas folder called formulas.html and write the following code <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>formulas</title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<style>
    html,body{margin:0;padding:0;background:#fff;}
    #wrap{
        width: 80%;
        margin-left: 10%;
    }
    #editor{
        width: 100%;
        height: 300px;
        margin-top: 40px;
    }
    .remind-a{
        font-size: 14px;
        color: #6f6f6f;
        margin-top: 60px;
    }
    .remind-a span{
        font-size: 16px;
        font-weight: 700;
        color: #333;
    }
    .remind-b{
        font-size: 14px;
        color: #6f6f6f;
        margin-top: 10px;
    }
</style>

</head>
<body>
<div id="wrap">
    <div id="editor"></div>
    <div class="remind-a">Click the <span>∑</span> symbol in the upper left corner to edit the formula</div>
    <div class="remind-b">After editing, press Ctrl+C to copy, and then press Ctrl+V to paste in the editor</div>
</div>
</body>

<script type="text/javascript" src="../../UEditor/ueditor.config.js"></script>
<script type="text/javascript" src="../../UEditor/ueditor.all.js"></script>
<script type="text/javascript" src="../../UEditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" charset="utf-8" src="../../UEditor/kityformula-plugin/addKityFormulaDialog.js"></script>
<script type="text/javascript" charset="utf-8" src="../../UEditor/kityformula-plugin/getKfContent.js"></script>
<script type="text/javascript" charset="utf-8" src="../../UEditor/kityformula-plugin/defaultFilterFix.js"></script>
<script id="editor" type="text/plain" name="gdesc" style="width:100%;height:350px;"></script>
<script type="text/javascript">
    //Instantiate the editor var ue = UE.getEditor('editor', {toolbars: ["kityformula"]});
</script>
</html> 

Import the formula editing plug-in in src/components/TEditor.vue and register the plug-in in plugins and toolbar import '../../public/tinymce/formulas' //Formula editing