聊一聊我的文本编辑器

裴大头

发布于 2022-01-17 13:47:16

4640

发布于 2022-01-17 13:47:16

文章被收录于专栏：裴大头的专栏

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

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

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

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

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

简单说一下使用过程

第一步下依赖

npm install mavon-editor --save
复制

第二步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, // code
                    table: 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代码

好了，这下就可以使用了