裴大头-秦可爱

裴大头-秦可爱

聊一聊我的文本编辑器

发表于 2021-05-21
裴大头
阅读量 1133
更新于 2021-05-26

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

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

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

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

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

简单说一下使用过程

  1. 第一步下依赖
npm install mavon-editor --save
  1. 第二步main.js引用
import  mavonEditor  from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)
js

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>
html

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>
js

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

好了,这下就可以使用了 image.png

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

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

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

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

评论
来发一针见血的评论吧!
表情
  • 2021-12-23 17:23

    博主你好,我按照您的方法设了但是浏览器控制台一直报错

    Uncaught TypeError: Cannot read properties of undefined (reading ‘image_add’)

    at FileReader.__oFReader.onload
    是什么原因?


    1
    回复
    • 裴大头

      男博主

      2021-12-23 17:36

      @徐

      你可以在当前页面搜索一下这个单词image_add,应该是拼写错误,我上面的源码是imageAdd小驼峰式的,可能是你改成下滑线的时候没改全吧


      0
      回复
    • 共1条回复,点击查看
  • 过来学习的

    2021-09-29 10:58

    啊啊大 风霜独发卷中寒

    language

    dassa



    阿达

    1
    回复
    • 裴大头

      男博主

      2021-09-29 16:10

      @过来学习的

      4~UE16WOU`UFZM3AP.jpg


      0
      回复
    • 共1条回复,点击查看
  • 凡蜕博客

    2021-07-17 23:39

    我用的也是md编辑器!不过是editor.md项目


    1
    回复
    • 裴大头

      男博主

      2021-07-18 18:21

      @凡蜕博客

      这个吗?->Editor.md

      有时间试试😁


      0
      回复
    • 共1条回复,点击查看
  • 北京艺术培训

    2021-06-01 14:34

    感谢分享 赞一个

    1
    回复
    • 裴大头

      男博主

      2021-06-01 14:37

      @北京艺术培训感谢支持😁

      0
      回复
    • 共1条回复,点击查看
  • 裴大头

    男博主

    2021-05-21 19:38

    哈哈哈😊

    1
    回复
      共0条回复,点击查看
推荐文章
  • Vue项目代码规范

    1点赞1评论

  • JavaScript 的事件循环机制

    1点赞1评论

  • 聊一聊我的文本编辑器

    1点赞11评论

  • JavaScript的常用遍历方法整理

    1点赞8评论

  • 前端面试精选-基础篇

    1点赞0评论

Crafted with by Pei你看雪

小破站居然运行了 865 天访客 23357

© 2023 Pei你看雪鲁ICP备19037910号-2