So verwenden Sie Tinymce in Vue3.0+ und implementieren die Funktion zum Hochladen mehrerer Bilder und zum Bearbeiten der Formel zum Hochladen von Dateien

Garn fügt Tinymce hinzu || npm installiere Tinymce -S

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

<Vorlage>
    <div Klasse="tinymce-box">
		<Editor v-model="contentValue" :init="init" :disabled="deaktiviert" @onClick="beiKlick" />
	</div>
</Vorlage>

<Skript>
API aus „../api/api.js“ importieren

//TinyMCE-Editor importieren importiere Editor von '@tinymce/tinymce-vue'

//Führe tinymce-bezogene Dateien in node_modules einimport tinymce from 'tinymce/tinymce' // tinymce ist standardmäßig ausgeblendet, der Editor wird nicht angezeigt, wenn er nicht importiert istimport 'tinymce/themes/silver' // Editor-Thema, ein Fehler wird gemeldet, wenn er nicht importiert istimport 'tinymce/icons/default' // Führe das Editor-Symbol ein, wenn es nicht importiert ist, wird das entsprechende Symbol nicht angezeigt//Führe Editor-Plugins ein (alle grundlegenden kostenlosen Plugins finden Sie hier)
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::
      Name: 'TEditor',
      Komponenten:
            Editor
      },
      Requisiten: {
            Wert: {
                  Typ: Zeichenfolge,
                  Standard: ''
            },
            deaktiviert:
                  Typ: Boolean,
                  Standard: false
            },
            Plugins: {
                  Typ: [String, Array],
                  Standard: 'Druckvorschau, Suchen, Ersetzen, Autolink, Richtung, visuelle Blöcke, visuelle Zeichen, Vollbild, Bild, Link, Medienvorlage, Code, Codebeispiel, Tabelle, Charmap, hr, Seitenumbruch, geschützter Anker, Insertdatetime, Advlist, Listen, Wortanzahl, Textmuster, automatisches Speichern'
            },
            Symbolleiste:
                  Typ: [String, Array],
                  Standard: 'Vollbild, rückgängig machen, wiederherstellen, Entwurf | ausschneiden, kopieren, einfügen, Text einfügen | Vordergrundfarbe, Hintergrundfarbe, fett, kursiv, unterstreichen, durchgestrichen, Link-Anker | linksbündig, zentriert, rechtsbündig, Blocksatz, ausrücken, einrücken | \
                Stilauswahl, Formatauswahl, Schriftauswahl, Schriftgrößeauswahl | Bullist, Numlist | Blockquote, Tiefgestellt, Hochgestellt, Format entfernen | \
                Tabelle, Bild, Medien, Charmap, hr, Seitenumbruch, Datum/Uhrzeit einfügen, Druckvorschau | Code, Alles auswählen, Suchen, Ersetzen, Visualblocks | Einzug 2em, Zeilenhöhe, Formatpainter, Axupimgs‘
            },
      },
      Daten(){
             zurückkehren {
                  init: {
                        language_url: '/tinymce/langs/zh_CN.js', //Sprachpaketdatei einführenlanguage: 'zh_CN', //Sprachtypskin_url: '/tinymce/skins/ui/oxide', //Skin: helle Farbe//skin_url: '/tinymce/skins/ui/oxide-dark', //Skin: dunkle Farbeplugins: this.plugins, //Plugins-Konfigurationtoolbar: this.toolbar, //Symbolleistenkonfiguration, auf „false“ setzen, um auszublenden//menubar: „Datei bearbeiten“, //Menüleistenkonfiguration, auf „false“ setzen, um auszublenden. Wenn nicht konfiguriert, werden standardmäßig alle Menüs angezeigt. Sie können die Konfiguration auch anpassen – siehe http://tinymce.ax-z.cn/configure/editor-appearance.php – Suchen Sie nach „benutzerdefiniertem Menü“.

                        :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::				
                        Höhe: 400, //Hinweis: Diese Eigenschaft wird ungültig, wenn das Autoresize-Plugin eingeführt wird. Platzhalter: „Geben Sie hier Text ein“,
                        :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::
                        paste_data_images: true, //Können Bilder eingefügt werden? images_upload_handler: (blobInfo, Erfolg, Fehler) => {
                              wenn(blobInfo.blob().size/1024/1024>2){
                                    failure("Hochladen fehlgeschlagen, bitte halten Sie die Bildgröße innerhalb von 2 M")
                              }anders{
                                    let params = neue FormData()
                                    params.append('Datei',blobInfo.blob())
                                    let config={
                                          Überschriften:{
                                                "Inhaltstyp": "multipart/Formulardaten"
                                          }
                                    }
                                    dies.$axios.post(`${api.baseUrl}/api-upload/uploadimg`,params,config).dann(res=>{
                                          wenn(res.data.code==200){
                                                success(res.data.msg) //Hochladen erfolgreich, trage den Bildpfad in die Erfolgsfunktion ein}else{
                                                failure("Hochladen fehlgeschlagen")
                                          }
                                    }).fangen(()=>{
                                          failure("Upload-Fehler, der Server ist ausgefallen")
                                    })
                              }
                        }
                  },
                  Inhaltswert: dieser.Wert
            }
      },
      betrachten:
            Wert (neuerWert) {
                  this.contentValue = neuerWert
            },
            Inhaltswert (neuer Wert) {
                  dies.$emit('Eingabe', neuerWert)
            },
      },
      erstellt(){
      
      },
      montiert(){
            tinymce.init({})
      },
      Methoden: {
            // Zugehörige Ereignisse hinzufügen, verfügbare Ereignisse finden Sie in der Dokumentation => https://github.com/tinymce/tinymce-vue => Alle verfügbaren Ereignisse
            bei Klick(e){
                  dies.$emit('onClick', e, tinymce)
            },
            // Inhalt löschen clear(){
                  dieser.contentValue = ''
            },
      },
}
</Skript>

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

Global in main.js registrieren, TEditor aus '@/components/TEditor.vue' importieren
Vue.component('TEditor',TEditor)

Verwenden Sie <TEditor ref="editor" v-model="value" /> auf verwandten Seiten 

Nicht abgefangener Syntaxfehler: Unerwartetes Token „<“
Emoticons konnten nicht geladen werden: Skript unter URL
 "http://xxxx/static/js/plugins/emoticons/js/emojis.js" wurde nicht aufgerufen
 `tinymce.Resource.add('tinymce.plugins.emoticons', data)` innerhalb von 1 Sekunde

1. Gehen Sie zum obigen Dokument, um das Plugin intent2em herunterzuladen. 2. Kopieren Sie das entpackte Plugin intent2em für die Einrückung der ersten Zeile in den Ordner public/tinymce, wie in Abbildung 3 gezeigt. Erstellen Sie eine neue index.js in indent2em und schreiben Sie den folgenden Code // Exportiert das Plugin „indent2em“ zur Verwendung mit Modulladern
// Verwendung:
// AllgemeinesJS:
// erfordern('tinymce/plugins/indent2em')
// ES2015:
// importiere 'tinymce/plugins/indent2em'
erfordern('./plugin.js');

4. Importieren Sie das Plug-In für den Einzug der ersten Zeile in components/TEditor.vue und registrieren Sie das Plug-In in Plugins und Symbolleiste, wie in der Abbildung gezeigt: import '../../public/tinymce/indent2em' // Einzug der ersten Zeile 5. Aktualisieren oder starten Sie das Projekt neu, um es zu verwenden 

Aufgrund der Bereitstellung des Projektpfads kann der vorherige Standard-CSS-Import Probleme aufweisen und Warnungen melden. Es wird daher empfohlen, ein CSS zu importieren, um das vorherige zu ersetzen. 1. Erstellen Sie eine neue tinycontent.css im Ordner public/tinymce
2. Importieren Sie tinycontent.css in init von src/components/TEditor.vue und kommentieren Sie content_style aus (da die CSS-Datei eingeführt wird, wird das Feld content_style nicht benötigt).
content_css: `${api.editorUrl}tinymce/tinycontent.css`, // Passen Sie den CSS-Stil des bearbeitbaren Bereichs in Form von CSS-Dateien an. Die CSS-Datei muss von Ihnen selbst erstellt und importiert werden. 3. Aktualisieren oder starten Sie das Projekt neu, und die Warnung verschwindet. 

1. Gehen Sie zum obigen Dokument und laden Sie das Multi-Image-Upload-Plugin axupimgs herunter

2. Kopiere das entpackte Multi-Image-Upload-Plugin axupimgs in den Ordner public/tinymce 3. Erstelle eine neue index.js im Ordner axupimgs und schreibe den folgenden Code // Exportiert das Plugin „axupimgs“ für die Verwendung mit Modulladern
// Verwendung:
// AllgemeinesJS:
// erfordern('tinymce/plugins/axupimgs')
// ES2015:
// importiere „tinymce/plugins/axupimgs“
erfordern('./plugin.js');

4. Öffnen Sie axupimgs/plugin.js und konfigurieren Sie die folgenden Codezeilen (Warum konfigurieren: weil der Zweck dieser Codezeilen darin besteht, die Datei upfiles.html des Popup-Fensters zum Hochladen mehrerer Bilder einzuführen,
Wenn bei der Funktion zum Hochladen mehrerer Bilder ein Dialogfeld angezeigt wird, das Dialogfeld jedoch keinen Inhalt enthält, kann es sein, dass der Pfad nicht richtig importiert wurde und Sie ihn erneut konfigurieren müssen.)
Vor der Konfiguration:
tinymce.PluginManager.add('axupimgs', Funktion(Editor, URL) {
	var pluginName='Mehrere Bild-Uploads';
	window.axupimgs={}; // Externe öffentliche Variablen oder einen benutzerdefinierten Standort ausgeben var baseURL=tinymce.baseURL;
	var iframe1 = baseURL+'/plugins/axupimgs/upfiles.html';

Nach der Konfiguration:
+ API aus „@/api/api.js“ importieren
tinymce.PluginManager.add('axupimgs', Funktion(Editor, URL) {
	var pluginName='Mehrere Bild-Uploads';
	window.axupimgs={}; // Externe öffentliche Variablen oder einen benutzerdefinierten Speicherort ausgeben + var baseURL=api.editorUrl;
+ var iframe1 = baseURL+'tinymce/axupimgs/upfiles.html';
Hinweis: Die Projekte aller Personen sind unterschiedlich, daher ist auch die Pfadkonfiguration unterschiedlich. Sie können sie entsprechend Ihrem eigenen Projekt konfigurieren.

5. Führen Sie das Plug-In zum Hochladen mehrerer Bilder in Komponenten / TEditor.vue ein und registrieren Sie das Plug-In in Plug-Ins und Symbolleiste (siehe Abbildung).
importiere '../../public/tinymce/axupimgs' //Mehrere Bilder hochladen 6. Aktualisieren oder starten Sie das Projekt neu Hinweis: Diese Funktion zum Hochladen mehrerer Bilder basiert auf der Funktion zum Hochladen einzelner Bilder. Beim Hochladen mehrerer Bilder wird die Schnittstellenfunktion zum Hochladen einzelner Bilder mehrmals aufgerufen (siehe images_upload_handler oben).
Daher muss zuerst die Funktion zum Hochladen einzelner Bilder abgeschlossen werden. Der Upload einzelner Bilder wurde im oberen Code implementiert, daher werde ich hier nicht näher darauf eingehen. 

1. Link-Plugin und Medien-Plugin in Plugins und Toolbar eintragen (siehe Abbildung)

2. Fügen Sie in init den folgenden Code ein (der folgende Code ist für das Link-Plugin und das Medien-Plugin gleich. Nach der Konfiguration können beide Plugins verwendet werden) (siehe Abbildung)
file_picker_types: ‚Dateibildmedien‘, //Entspricht drei Arten von Datei-Uploads: Link-Plug-in, Bild- und Axupimgs-Plug-in, Medien-Plug-in. Wenn Sie den Upload eines bestimmten Plugins blockieren möchten, entfernen Sie den entsprechenden Parameter file_picker_callback: (callback, value, meta)=>{
      let filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4, .jpg'; //Upload-Typ der Datei begrenzen let inputElem = document.createElement('input'); //Dateiauswahl erstellen inputElem.setAttribute('type', 'file');
      inputElem.setAttribute('akzeptieren', Dateityp);
      inputElem.click();
      inputElem.onchange=()=>{
            lass upurl=''
            let file=inputElem.files[0] //Dateiinformationen abrufen if(file.type.slice(0,5)=='video'){ //Dateityp bestimmen upurl=`${api.baseUrl}/api-upload/uploadTxVideo`
            }anders{
                  upurl=`${api.baseUrl}/api-upload/upload`
            }
            wenn(Dateityp.Slice(0,5)=='Bild'&&Dateigröße/1024/1024>2){
                  alert("Hochladen fehlgeschlagen, bitte halten Sie die Bildgröße innerhalb von 2 M")
            }sonst wenn(Dateityp.Slice(0,5)=='video'&&Dateigröße/1024/1024>500){
                  alert("Hochladen fehlgeschlagen, bitte halten Sie die Videogröße innerhalb von 500 MB")
            }sonst wenn(Dateigröße/1024/1024>10){
                  alert("Upload fehlgeschlagen, bitte halten Sie die Dateigröße innerhalb von 10 MB")
            }anders{
                  let params = neue FormData()
                  params.append('Datei',Datei)
                  let config={
                        Überschriften:{
                              "Inhaltstyp": "multipart/Formulardaten"
                        }
                  }
                  dies.$axios.post(upurl,params,config).then(res=>{
                        wenn(res.data.code==200){
                              callback(res.data.data) //Hochladen erfolgreich, trage den Dateipfad in die Callback-Funktion ein}else{
                              alert("Hochladen fehlgeschlagen")
                        }
                  }).fangen(()=>{
                        alert("Fehler beim Hochladen, der Server ist ausgefallen")
                  })
            }
      }
}

3. Siehe das Bild für spezifische Effekte 

1. MathJax-Plug-in + LaTeX-Syntax Wenn es um die Funktion zum Bearbeiten von Formeln geht, denkt man als Erstes daran, das MathJax-Plug-in einzuführen und die LaTeX-Syntax zu verwenden. Dies bringt mehrere Nachteile mit sich.
Zum einen kennen die Benutzer die LaTeX-Syntax nicht und zum anderen ist in v-html von Vue mit LateX-Syntax gerenderter Rich Text nicht effektiv.
Weil der Schrägstrich \ in der Latex-Syntax in v-html maskiert wird und somit nicht mehr erkennbar ist. Nach einiger Überlegung habe ich mich daher dazu entschlossen, diese Implementierung aufzugeben.
Wenn Ihr Projekt MathJax ohne Auswirkungen verwendet, können Sie natürlich dessen Methode verwenden. Die Implementierungsmethode wird hier nicht beschrieben. Die Implementierungsschritte finden Sie im folgenden Dokument: https://www.cnblogs.com/already/p/12876452.html
MathJax-Verwendungsdokument 1: https://www.cnblogs.com/mqingqing123/p/12711372.html
MathJax-Verwendungsdokument 2: https://www.cnblogs.com/mqingqing123/p/12026817.html
LaTeX-Syntax: https://www.jianshu.com/p/27b163b1c6ef

2. Verwenden Sie die Kityformula des Baidu-Editors
Ich habe den Baidu Editor schon früher verwendet und das Plug-In zur Formelbearbeitung, kityformula, gefällt mir sehr gut.
KityFormula ist jedoch vom Baidu Editor abhängig und kann nicht separat in TinyMCE integriert werden (wenn es eine Möglichkeit gibt, es separat zu integrieren, lassen Sie es mich bitte wissen).
Erwägen Sie daher, den Baidu Editor in das Projekt einzuführen, verwenden Sie nur seine Funktion zur Formelbearbeitung und integrieren Sie dann den gesamten Baidu Editor in TinyMCE.

1. Erstellen Sie einen neuen Ordner mit dem Namen „Formulas“ im Ordner „public/tinymce“. 2. Erstellen Sie eine neue Datei „index.js“ im Ordner „Formulas“ und schreiben Sie den folgenden Code // Exportiert das Plugin „Formulas“ für die Verwendung mit Modulladern.
// Verwendung:
// AllgemeinesJS:
// erfordern('tinymce/plugins/formulas')
// ES2015:
// importiere „tinymce/plugins/formulas“
erfordern('./plugin.js');

3. Erstellen Sie plugin.js und plugin.min.js im Ordner „Formulas“ und schreiben Sie den folgenden Code. Die beiden Dateien haben den gleichen Code. import api from '@/api/api.js'
tinymce.PluginManager.add('Formeln', Funktion(Editor, URL) {
      var pluginName='Formel';
    // Importpfad für die Konfigurationsdatei, entsprechend Ihrem eigenen Projekt, ich stelle ihn hier vor: api.editorUrl=http://192.168.1.171/apib
    //Es ist zu beachten, dass die durch iframe1 dargestellte Seitenadresse im Offline-Betrieb zugänglich sein muss, sonst wird sie standardmäßig auf der Projekt-Homepage angezeigt. var iframe1 = api.editorUrl+'tinymce/formulas/formulas.html';
      var openDialog = Funktion () {
            returniere editor.windowManager.openUrl({
                  Titel: Pluginname,
                  Größe: 'groß',
                  URL:iframe1,
                  Schaltflächen: [
                        {
                              Typ: "Abbrechen",
                              Text: 'Schließen'
                        },
                        // {
                        // Typ: "benutzerdefiniert",
                        // Text: 'Speichern',
                        // Name: 'speichern',
                        // primär: wahr
                        // },
                  ],
            });
      };
    
      // Registrieren Sie einen Symbolleistenschaltflächennamen editor.ui.registry.addButton('formulas', {
            Text: Pluginname,
            beiAktion: Funktion () {
                  öffneDialog();
            }
      });
  
      //Registriere einen Menüpunkt mit dem Namen menu/menubar
      editor.ui.registry.addMenuItem('Formeln', {
            Text: Pluginname,
            beiAktion: Funktion() {
                  öffneDialog();
            }
      });
  
      zurückkehren {
            getMetadata: Funktion () {
                  zurückkehren {
                        //Der Plugin-Name und der Link werden unter „Hilfe“ → „Plugins“ → „Installierte Plugins“ angezeigt. Name: „Beispiel-Plugin“, //Plugin-Name URL: „http://exampleplugindocsurl.com“, //Autor-URL};
            }
      };
});
  
4. Erstellen Sie im Ordner „Formulas“ ein neues Formular mit dem Namen „formulas.html“ und schreiben Sie den folgenden Code <!doctype html>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Formeln</title>
<meta name="viewport" content="benutzerskalierbar=nein, breite=gerätebreite, anfänglicher Maßstab=1,0, maximaler Maßstab=1,0"/>
<meta name="apple-mobile-web-app-fähig" content="ja" />
<meta name="apple-mobile-web-app-status-bar-style" content="schwarz" />
<meta name="format-detection" content="telefonnr">
<meta http-equiv="X-UA-kompatibel" content="IE=edge,chrome=1" />
<Stil>
    html,body{margin:0;padding:0;background:#fff;}
    #wickeln{
        Breite: 80%;
        Rand links: 10 %;
    }
    #Editor{
        Breite: 100 %;
        Höhe: 300px;
        Rand oben: 40px;
    }
    .erinnere-a{
        Schriftgröße: 14px;
        Farbe: #6f6f6f;
        Rand oben: 60px;
    }
    .erinnere-einen Span{
        Schriftgröße: 16px;
        Schriftstärke: 700;
        Farbe: #333;
    }
    .erinnere-b{
        Schriftgröße: 14px;
        Farbe: #6f6f6f;
        Rand oben: 10px;
    }
</Stil>

</Kopf>
<Text>
<div id="wrap">
    <div id="Herausgeber"></div>
    <div class="remind-a">Klicken Sie auf das Symbol <span>∑</span> in der oberen linken Ecke, um die Formel zu bearbeiten</div>
    <div class="remind-b">Drücken Sie nach dem Bearbeiten Strg+C zum Kopieren und anschließend Strg+V zum Einfügen im 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>
<Skripttyp="text/javascript">
    //Den Editor instanziieren var ue = UE.getEditor('editor', {toolbars: ["kityformula"]});
</Skript>
</html> 

Importieren Sie das Plugin zur Formelbearbeitung in src/components/TEditor.vue und registrieren Sie das Plugin in Plugins und Symbolleiste. Importieren Sie '../../public/tinymce/formulas' // Formelbearbeitung