composant de texte enrichi vue (éditeur mavon)

Introduction

mavon-editor est un éditeur de démarques basé sur Vue. Il peut être utilisé pour l'édition de texte. Par exemple, si certaines entreprises ont besoin d'envoyer des annonces, des blogs personnels, etc., il peut être utilisé. L'opération est également très simple.
Adresse officielle : http://www.mavoneditor.com/
github : https://github.com/hinesboy/mavonEditor

Installer l'éditeur mavon

npm install mavon-editor --save

Après l'installation, vous devez l'enregistrer globalement.

// 全局注册
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)

Utiliser l'éditeur mavon

Une fois inscrit, vous pouvez directement utiliser les tags pour référencer

<mavon-editor ref="mdedit" v-model="ruleForm.content" style="height: 80vh" @imgAdd="$imgAdd">
</mavon-editor>

charger une photo

Introduire l'événement @imagAdd dans la balise du composant

<mavon-editor ref="mdedit" v-model="ruleForm.content" style="height: 80vh" @imgAdd="$imgAdd">
</mavon-editor>

En raison des besoins de l'entreprise, l'interface renverra le chemin de téléchargement après avoir converti l'image en flux de fichiers et l'avoir téléchargée. Cependant, comme différents environnements ont des adresses IP différentes, le frontal doit déterminer l'adresse IP actuelle de l'environnement, puis fusionner l'adresse. pour réussir à faire écho.
Définir l'indentation par défaut de la première ligne de la zone de texte enrichi

Autres fonctions

mavon-editor fournit de nombreuses API, notamment la sélection de la langue, la barre d'outils, l'arrière-plan de la barre d'outils, etc.

barres d'outils

/*
  例如: {
      bold: true, // 粗体
      italic: true,// 斜体
      header: true,// 标题
  }
  此时, 仅仅显示此三个功能键
*/
toolbars: {
    
    
    bold: true, // 粗体
    italic: true, // 斜体
    header: true, // 标题
    underline: true, // 下划线
    strikethrough: true, // 中划线
    mark: true, // 标记
    superscript: true, // 上角标
    subscript: true, // 下角标
    quote: true, // 引用
    ol: true, // 有序列表
    ul: true, // 无序列表
    link: true, // 链接
    imagelink: true, // 图片链接
    code: true, // code
    table: true, // 表格
    fullscreen: true, // 全屏编辑
    readmodel: true, // 沉浸式阅读
    htmlcode: true, // 展示html源码
    help: true, // 帮助
    /* 1.3.5 */
    undo: true, // 上一步
    redo: true, // 下一步
    trash: true, // 清空
    save: true, // 保存（触发events中的save事件）
    /* 1.4.2 */
    navigation: true, // 导航目录
    /* 2.1.8 */
    alignleft: true, // 左对齐
    aligncenter: true, // 居中
    alignright: true, // 右对齐
    /* 2.2.1 */
    subfield: true, // 单双栏模式
    preview: true, // 预览
}

Et aussi grâce à des outils personnalisés

<mavon-editor>
  <!-- 左工具栏前加入自定义按钮 -->
  <template slot="left-toolbar-before">
    <button
      type="button"
      @click="$click('test')"
      class="op-icon fa fa-mavon-align-left"
      aria-hidden="true"
      title="自定义"
    ></button>
  </template>
  <!-- 左工具栏后加入自定义按钮  -->
  <template slot="left-toolbar-after">
    <button
      type="button"
      @click="$click('test')"
      class="op-icon fa fa-mavon-align-left"
      aria-hidden="true"
      title="自定义"
    ></button>
  </template>
  <!-- 右工具栏前加入自定义按钮  -->
  <template slot="right-toolbar-before">
    <button
      type="button"
      @click="$click('test')"
      class="op-icon fa fa-mavon-align-left"
      aria-hidden="true"
      title="自定义"
    ></button>
  </template>
  <!-- 右工具栏后加入自定义按钮  -->
  <template slot="right-toolbar-after">
    <button
      type="button"
      @click="$click('test')"
      class="op-icon fa fa-mavon-align-left"
      aria-hidden="true"
      title="自定义"
    ></button>
  </template>
</mavon-editor>

liaison d'événement

Le composant fournit également de nombreuses liaisons d'événements, qui ne seront pas décrites en détail ici, elles sont toutes disponibles sur le site officiel. Vous pouvez jeter un oeil à l'image ci-dessous