【Mavon Editor】VUE3引入Mavon Editor

技术分子林QI

已于 2023-12-19 10:34:11 修改

阅读量2k

点赞数 9

于 2023-11-28 09:21:13 首次发布

本文链接：https://blog.csdn.net/qq_44580366/article/details/134659240

版权

前端框架专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、Mavon Editor介绍

Mavon Editor是一款基于Vue.js和Element UI的Markdown编辑器，它具有多种功能，如代码高亮、自动保存、多Tab切换和实时预览等。Mavon Editor具有简洁的界面，可以通过npm直接安装在Vue项目中使用。

在Vue组件中，可以通过<mavon-editor>标签来添加一个编辑器区域。编辑器的内容可以通过v-model指令与Vue组件的数据属性进行双向绑定。同时，您还可以通过:config属性传递编辑器的配置选项。

在Mavon Editor的配置中，您可以根据需要自定义工具栏选项和其他参数。例如，您可以在配置对象中指定编辑器的工具栏选项，如标题、段落、链接、图片等。此外，Mavon Editor还支持其他一些功能，如代码块、列表、表格等。

与其他markdown编辑器相比，mavoneditor的优秀之处在于它的markdown渲染效果非常出色，它使用vue.js作为底层技术，采用了一系列的优化措施，使得其渲染效果非常流畅，且支持多种markdown常用语法。

比如，对于代码块和表格，mavoneditor都提供了丰富的markdown语法支持，用户可以在其中放置各种不同的代码或者表格元素，并且可以轻松地进行调整和修改。

同时，mavoneditor支持多种主题设置，可以根据个人的爱好和需求，自由切换不同的主题样式。

总之，Mavon Editor是一款功能强大的Markdown编辑器，适用于Vue项目中的文本编辑需求。它具有简洁的界面和多种功能，可以帮助开发人员快速构建高质量的文本编辑器。

`二、mavon-editor`安装

通过 npm 的方式安装 mavon-editor


npm install mavon-editor --save

或者指定安装版本，比如：我用的是与vue3适配的3.0.1版本：

npm install --save mavon-editor@3.0.1

安装markdown-it

使用这个也尽量也把markdown-it 安装好，因为他是mavon-editor的依赖：

使用这个命令完成安装：

npm install markdown-it

markdown-it 使用方法是这样：

// node.js
// can use `require('markdown-it')` for CJS
import markdownit from 'markdown-it'
const md = markdownit()
const result = md.render('# markdown-it rulezz!');

// browser with UMD build, added to "window" on script load
// Note, there is no dash in "markdownit".
const md = window.markdownit();
const result = md.render('# markdown-it rulezz!');

代码高亮依赖-highlight.js

如果使用到高亮，有highlight，

你只需要使用一个叫做 highlight.js 的第三方库，就可以轻松实现代码着色的效果。

highlight.js 是一个非常强大和流行的库，它可以自动识别和着色超过 190 种编程语言。

它支持多种主题和样式，让你可以根据自己的喜好选择合适的配色方案。

原理

它的原理很简单，highlightElement 里：

之所以可以实现着色，其实就是查找和替换的过程，将原来的纯文本替换为元素标签包裹文本，元素是可以加上样式的，而样式就是我们引入的 css 文件。

安装步骤：

npm install highlight.js

导入使用：

现在main.js全局注册：

import Vue from 'vue';  
import VueHighlightJS from 'vue-highlight.js';  
import 'highlight.js/styles/default.css';

页面内使用：

import markdownit from 'markdown-it'
import hljs from 'highlight.js' // https://highlightjs.org

// Actual default values
const md = markdownit({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return '<pre><code class="hljs">' +
               hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
               '</code></pre>';
      } catch (__) {}
    }

    return '<pre><code class="hljs">' + md.utils.escapeHtml(str) + '</code></pre>';
  }
});

`三、mavon-editor`注册

全局注册：在主入口文件添加以下代码，即 main.ts，之后可以在任意页面中使用

import '/@/design/index.less';
// 注册 windi
import 'virtual:windi-base.css';
import 'virtual:windi-components.css';
import 'virtual:windi-utilities.css';
import 'virtual:windi-devtools';
// 注册图标
import 'virtual:svg-icons-register';
import App from './App.vue';
import { createApp } from 'vue';
import { initAppConfigStore } from '/@/logics/initAppConfig';
import { setupErrorHandle } from '/@/logics/error-handle';
import { router, setupRouter } from '/@/router';
import { setupRouterGuard } from '/@/router/guard';
import { setupStore } from '/@/store';
import { setupGlobDirectives } from '/@/directives';
import { setupI18n } from '/@/locales/setupI18n';
import { registerGlobComp } from '/@/components/registerGlobComp';
import { registerThirdComp } from '/@/settings/registerThirdComp';
import { useSso } from '/@/hooks/web/useSso';
// 注册online模块lib
import { registerPackages } from '/@/utils/monorepo/registerPackages';

import UndrawUi from 'undraw-ui';
import 'undraw-ui/dist/style.css';

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

// 在本地开发中引入的,以提高浏览器响应速度
if (import.meta.env.DEV) {
  import('ant-design-vue/dist/antd.less');
}
async function bootstrap() {
  // 创建应用实例
  const app = createApp(App);
  app.use(UndrawUi as any);
  app.use(mavonEditor)

  // 多语言配置,异步情况:语言文件可以从服务器端获得
  await setupI18n(app);

  // 配置存储
  setupStore(app);

  // 初始化内部系统配置
  initAppConfigStore();

  // 注册外部模块路由(注册online模块lib)
  registerPackages(app);

  // 注册全局组件
  registerGlobComp(app);

  //CAS单点登录
  await useSso().ssoLogin();

  // 配置路由
  setupRouter(app);

  // 路由保护
  setupRouterGuard(router);

  // 注册全局指令
  setupGlobDirectives(app);

  // 配置全局错误处理
  setupErrorHandle(app);

  // 注册第三方组件
  await registerThirdComp(app);

  // 当路由准备好时再执行挂载( https://next.router.vuejs.org/api/#isready)
  await router.isReady();

  // 挂载应用
  app.mount('#app', true);
}

bootstrap();

局部注册：在需要的页面添加以下代码，之后只能在当前页面中使用

import mavonEditor from 'mavon-editor'


import 'mavon-editor/dist/css/index.css'

export default {
  components : {
    'mavonEditor': mavonEditor.mavonEditor
  }
}

如果遇到这个的版本错误就只要按照要求去升级就行，

npm install 组件@版本号

四、基本使用

<mavon-editor v-model="value" :subfield="true" :toolbars="toolbars">
</mavon-editor>
import 'mavon-editor/dist/css/index.css';
import mavonEditor from 'mavon-editor';
Vue.use(mavonEditor);
data() {
  return {
    value: "",
    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,
      table: true,
      fullscreen: true,
      readmodel: true,
      htmlcode: true,
      help: true,
      /* 1.3.5 */
      undo: true,
      redo: true,
      trash: true,
      save: true,
      /* 1.4.2 */
      navigation: true,
      alignleft: true,
      aligncenter: true,
      alignright: true,
      subfield: true,
      toc: true,
      /* 2.1.0 */
      codeTheme: true,
      /* 2.1.9 */
      previewTheme: true
    }
  }
}

五、基本属性介绍

平时用的时候可以多来翻一下这里的属性介绍，提高开发效率！

props属性

这是属于可以直接在编辑器dom上使用的属性：

name 名称	type 类型	default 默认值	describe 描述
value	String		初始值
language	String	zh-CN	语言选择，暂支持 zh-CN: 中文简体， en: 英文， fr: 法语， pt-BR: 葡萄牙语， ru: 俄语， de: 德语， ja: 日语
fontSize	String	15px	编辑区域文字大小
scrollStyle	Boolean	true	开启滚动条样式(暂时仅支持chrome)
boxShadow	Boolean	true	开启边框阴影
subfield	Boolean	true	true：双栏(编辑预览同屏)， false：单栏(编辑预览分屏)
defaultOpen	String		edit：默认展示编辑区域， preview：默认展示预览区域 , 其他 = edit
placeholder	String	开始编辑...	输入框为空时默认提示文本
editable	Boolean	true	是否允许编辑
codeStyle	String	code-github	markdown样式：默认github, 可选配色方案
toolbarsFlag	Boolean	true	工具栏是否显示
navigation	Boolean	false	默认展示目录
shortCut	Boolean	true	是否启用快捷键
autofocus	Boolean	true	自动聚焦到文本框
ishljs	Boolean	true	代码高亮
imageFilter	function	null	图片过滤函数，参数为一个`File Object`，要求返回一个`Boolean`, `true`表示文件合法，`false`表示文件不合法
imageClick	function	null	图片点击事件，默认为预览，可覆盖
tabSize	Number	\t	tab转化为几个空格，默认为\t
toolbars	Object	如下例	工具栏

很多的事件可以帮助我们实现功能，比较常用的就是change，save，imgAdd这几个方法

events 事件绑定

name 方法名	params 参数	describe 描述
change	String: value , String: render	编辑区发生变化的回调事件(render: value 经过markdown解析后的结果)
save	String: value , String: render	ctrl + s 的回调事件(保存按键,同样触发该回调)
fullScreen	Boolean: status , String: value	切换全屏编辑的回调事件(boolean: 全屏开启状态)
readModel	Boolean: status , String: value	切换沉浸式阅读的回调事件(boolean: 阅读开启状态)
htmlCode	Boolean: status , String: value	查看html源码的回调事件(boolean: 源码开启状态)
subfieldToggle	Boolean: status , String: value	切换单双栏编辑的回调事件(boolean: 双栏开启状态)
previewToggle	Boolean: status , String: value	切换预览编辑的回调事件(boolean: 预览开启状态)
helpToggle	Boolean: status , String: value	查看帮助的回调事件(boolean: 帮助开启状态)
navigationToggle	Boolean: status , String: value	切换导航目录的回调事件(boolean: 导航开启状态)
imgAdd	Number: pos, File: imgfile	图片文件添加回调事件(pos: 图片在列表中的位置, File: File Object)
imgDel	Array(2):[Number: pos,File:imgfile ]	图片文件删除回调事件(Array(2): 两个元素的数组，第一位是图片在列表中的位置，第二位是File对象)