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

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

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 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'

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>

四、上传图片

tinymce 提供了 images_upload_url 等 api 让用户配置上传图片的相关参数

但为了在不麻烦后端的前提下适配自家的项目，还是得用 images_upload_handler 来自定义一个上传方法

这个方法会提供三个参数：blobInfo, success, failure

其中 blobinfo 是一个对象，包含上传文件的信息：

success 和 failure 是函数，上传成功的时候向 success 传入一个图片地址，失败的时候向 failure 传入报错信息

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue mint-ui tabbar组件使用步骤详解

vue地区选择组件使用步骤详解

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Einführung des Tinymce-Rich-Text-Editors in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!