Detaillierte Erläuterung der Schritte zur Einführung des Tinymce-Rich-Text-Editors in Vue-js-Tutorial-php.cn

Detaillierte Erläuterung der Schritte zur Einführung des Tinymce-Rich-Text-Editors in Vue

php中世界最好的语言

Freigeben： 2018-05-14 11:13:38

Original

4040 Leute haben es durchsucht

Dieses Mal erkläre ich Ihnen ausführlich die Schritte zur Einführung des Tinymce-Rich-Text-Editors in Vue Das Folgende ist ein praktischer Fall. Schauen wir uns das an. Der ursprünglich im Projekt verwendete Rich-Text-Editor war wangEditor, ein sehr leichter und prägnanter Editor.

Allerdings wurde das Geschäft des Unternehmens modernisiert und es wünscht sich einen Editor mit umfassenderen Funktionen. Ich habe lange danach gesucht und zu den gängigen Editoren gehören derzeit diese:

UEditor: Baidus Front-End-Open-Source-Projekt, das leistungsstark ist und auf jQuery basiert, aber nicht mehr gepflegt wird. und der Back-End-Code ist begrenzt, was die Änderung erschwert

bootstrap

-wysiwyg: Mikro, einfach zu bedienen, klein und schön, nur Bootstrap + jQuery...

kindEditor: leistungsstarker, einfacher Code, Hintergrund muss konfiguriert werden, und ich habe schon lange kein Update mehr gesehen

wangEditor: leichtgewichtig, einfach und benutzerfreundlich, aber nach dem Upgrade zu 3.x ist es für eine kundenspezifische Entwicklung nicht geeignet. Aber der Autor ist im weitesten Sinne sehr fleißig. Bitte rufen Sie mich an

quill: Es hat nicht viele Funktionen, aber es kann von selbst erweitert werden ist auch leicht zu verstehen.

Sommernote: Die Benutzeroberfläche ist sehr schön und es ist ein kleiner und schöner Editor, aber ich brauche einen großen eins

Mit diesem Hinweis habe ich mich schließlich für tinymce entschieden. Der Herausgeber kann die offizielle Website nicht einmal ohne Leiter öffnen (es fordert einfach nur Ärger), hauptsächlich aus zwei Gründen:

1. Es gibt viele Sterne auf GitHub und die Funktionen sind vollständig.

2 Der einzige Editor, der die meisten Formatierungen beim Einfügen aus Word beibehalten kann Personal zum Scannen von Codes und zum Ändern der Schnittstelle, das Front-End und das Back-End sind getrennt

Sagen Sie zwei gute Punkte!

1. Ressourcen-Download

tinymce stellt offiziell eine Komponente tinymce-vue für das Vue-Projekt bereit

npm install @tinymce/tinymce-vue -S

Nach dem Login kopieren

In vscode, Das Webstorm-Terminal meldet möglicherweise einen Fehler, wenn dieser Code ausgeführt wird. Verwenden Sie am besten das mit dem Betriebssystem gelieferte Befehlszeilentool.

Wenn Sie den Tinymce-Dienst erworben haben, können Sie sich die Anweisungen von Tinymce ansehen. vue und benutze tinymce direkt über den API-Schlüssel

Wenn du es nicht wie ich gekauft hast, musst du noch tinymce herunterladen

npm install tinymce -S

Nach dem Login kopieren

Nach der Installation findest du das Verzeichnis tinymce/skins node_

module

s, und fügen Sie dann Skins hinzu. Kopieren Sie das Verzeichnis in das statische Verzeichnis

// Wenn es sich um ein mit vue-cli 3.x erstelltes Typoskriptprojekt handelt, legen Sie es im öffentlichen Verzeichnis ab . Alle statischen Verzeichnisse in diesem Artikel werden auf diese Weise behandelt

tinymce Die Standardeinstellung ist die englische Benutzeroberfläche, daher müssen Sie auch ein chinesisches Sprachpaket herunterladen (denken Sie daran, eine Leiter zu erstellen! Erstellen Sie eine Leiter! Erstellen Sie eine Leiter! )

Dann habe ich dieses Sprachpaket in das statische Verzeichnis eingefügt, um eine klare Struktur zu haben 🎜>2. Initialisierung

Fügen Sie die folgenden Dateien in die Seite ein

import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'

Nach dem Login kopieren

tinymce-vue ist eine Komponente, die in Komponenten registriert und dann direkt verwendet werden muss

Das Init hier ist das Tinymce-Initialisierungskonfigurationselement. Einige wichtige APIs werden später besprochen. Die vollständige API finden Sie in der offiziellen Dokumentation Der Editor benötigt einen Skin, um ordnungsgemäß zu funktionieren. Daher müssen Sie eine „skin_url“ festlegen, die auf die zuvor kopierte Skin-Datei verweist , also skin_url: '/tinymce/skins/lightgray'

Gleichzeitig muss es auch einmal im Mount initialisiert werden:

Wenn das obige Init-Objekt hier übergeben wird, wird es nicht wirksam, aber wenn keine Parameter übergeben werden, wird ein Fehler gemeldet, sodass hier ein leeres Objekt übergeben wird

3 -in

完成了上面的初始化之后，就已经能正常运行编辑器了，但只有一些基本功能

tinymce 通过添加插件 plugins 的方式来添加功能

比如要添加一个上传图片的功能，就需要用到 image 插件，添加超链接需要用到 link 插件

同时还需要在页面引入这些插件：

添加了插件之后，默认会在工具栏 toolbar 上添加对应的功能按钮，toolbar 也可以自定义

贴一下完整的组件代码：

<template>
 <p class=&#39;tinymce&#39;>
  <h1>tinymce</h1>
  <editor id=&#39;tinymce&#39; v-model=&#39;tinymceHtml&#39; :init=&#39;init&#39;></editor>
  <p v-html=&#39;tinymceHtml&#39;></p>
 </p>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
export default {
 name: 'tinymce',
 data () {
  return {
   tinymceHtml: '请输入内容',
   init: {
    language_url: '/static/tinymce/zh_CN.js',
    language: 'zh_CN',
    skin_url: '/static/tinymce/skins/lightgray',
    height: 300,
    plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
    toolbar:
     'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
    branding: false
   }
  }
 },
 mounted () {
  tinymce.init({})
 },
 components: {Editor}
}
</script>

Nach dem Login kopieren