【Mavon Editor】VUE3引入Mavon Editor
mavon-editor安装使用教程
目录
一、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对象) |
更多推荐
所有评论(0)