聊一聊我的文本编辑器

编辑器"/>

聊一聊我的文本编辑器

说一下我博客的文本编辑器

最初使用的若依自带的quill，刚开始使用就会有些卡顿，刚开始还不太在意，后来慢慢发现确实不爽，嵌入代码块时还会卡死浏览器，之后思考许久决定换一个文本编辑器。

最初还是在吧目光放到流行的富文本编辑器上，于是尝试了wangEditor，一开始没发现什么问题，到了编辑出错时，删除文章内容时光标会跳到最后一行，找了很多方法，还是不能完美解决，于是放弃···

然后，我又看到了好多人推荐的UEditor富文本编辑器，刚一上手果断放弃，太重了，使用太复杂，哈哈哈，不符合我

于是乎，我看到了这么一篇文章，说的是现在不太流行富文本编辑器了，都是再用markdown编辑器，于是第一个就看到mavonEditor，也就确定了(现在的编辑器)

简单说一下使用过程

1. 第一步下依赖

npm install mavon-editor --save

2. 第二步main.js引用

import  mavonEditor  from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)

3.第三步组件里使用
html代码

<template><div><mavon-editor:placeholder="'开始创作···'":toolbars="toolbars":toolbarsBackground="'#f9f9f9'"@change="change"@imgAdd="imgAdd"@imgDel="imgDel"ref="md"style="height: 70vh"v-model="article.richText"/></div>
</template>

js代码

<script>export default {data() {return {//参数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, // codetable: true, // 表格fullscreen: false, // 全屏编辑readmodel: false, // 沉浸式阅读htmlcode: true, // 展示html源码help: true, // 帮助/* 1.3.5 */undo: true, // 上一步redo: true, // 下一步trash: true, // 清空save: false, // 保存(触发events中的save事件)navigation: true, // 导航目录alignleft: true, // 左对齐aligncenter: true, // 居中alignright: true, // 右对齐subfield: true, // 单双栏模式preview: false // 预览},}},methods: {imgAdd (pos, file) {// 第一步.将图片上传到服务器.const formData = new FormData();formData.append('image', file);uploadImage(formData).then(res => {this.$refs.md.$img2Url(pos, process.env.VUE_APP_BASE_API + res.imgUrl)})},imgDel (pos) {delete this.img_file[pos]},change (value, render) {this.html = render},}}
</script>

需要注意的是，默认是md格式内容，this.html里才是html代码

好了，这下就可以使用了

然后前端展示的代码格式可以根据之前的 => 代码块高亮

也可以使用下面的方式，是我的网友凡蜕博客推荐的prism.js

使用方法参照如何在vue中引入Prism.js

今天就分享这些，欢迎大家留言交流