• Vue实现一个MarkDown编辑器


    Vue实现一个markdown编辑器

    前段时间做项目的时候,需要一个Markdown编辑器,在网上找了一些开源的实现,但是都不满足需求
    说实话,这些开源项目也很难满足需求公司项目的需求,与其实现一个大而全的项目,倒不如实现一个
    简单的,易于在源码上修改的项目,核心功能都有的,以供修改使用
    本文的源码地址如下
    https://github.com/jiulu313/HelloMarkDown
    喜欢的朋友可以帮忙star一下,欢迎交流学习

    先看一下本项目的效果图(图片经过压缩)

    本文的目的就是实现一个有核心功能的,简单,易于修改的项目
    话不多说,来看思路

    1 markdown内容如何转换成 html?

    网上有一个开源的库叫 marked,地址如下:
    https://github.com/markedjs/marked.git
    我们可以安装这个库,使用很简单,就一个函数,传进去markdown内容,就返回了html内容

    2 markdown内容转换成了html,如何进行语法高亮?

    网上也有一个开源的库,地址如下 :
    https://highlightjs.org/

    我们可以使用这两个库

    1. 先把markdown内容解析成html内容
    2. 把html内容进行语法高亮

    下面我们来一步一步实现代码

    3 代码实现

    默认你已经创建好了vue的项目 , 创建vue项目 vue init webpack demo
    这里面不多讲。

    3.1 安装两个库,分别执行下面两条命令
    npm install marked --save
    npm install highlight.js --save

    3.2 首先创建一个 HelloMarkDownVue组件

    布局文件的代码如下:

    <template>
      <div class="md_root_content" v-bind:style="{this.width,height: this.height}">
    
        <!--功能按钮区-->
        <div class="button_bar">
          <span v-on:click="addBold"><B>B</B></span>
          <span v-on:click="addUnderline"><B>U</B></span>
          <span v-on:click="addItalic"><B>I</B></span>
        </div>
    
        <!--主要内容区-->
        <div class="content_bar">
    
          <!--markdown编辑器区-->
          <div class="markdown_body">
            <textarea ref="ref_md_edit" class="md_textarea_content" v-model="markString">
            </textarea>
          </div>
    
          <!--解析成html区-->
          <div class="html_body">
            <p v-html="htmlString"></p>
          </div>
    
        </div>
    
      </div>
    </template>
    

    主要分为上下两块,上面是功能区的布局
    下面一块,分左右两部分,左边是markdown,右边是显示html部分

    对应的样式代码如下:

    
    <style scoped>
    
      .md_root_content {
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
      }
    
      .button_bar {
         100%;
        height: 40px;
        background-color: #d4d4d4;
        display: flex;
        display: -webkit-flex;
        align-items: center;
      }
    
      div.button_bar span {
         30px;
        line-height: 40px;
        text-align: center;
        color: orange;
        cursor: pointer;
      }
    
      .content_bar {
        display: flex;
        display: -webkit-flex;
         100%;
        height: 100%;
      }
    
      .markdown_body {
         50%;
        height: 100%;
        display: flex;
        display: -webkit-flex;
      }
    
      .html_body {
         50%;
        height: 100%;
        display: flex;
        display: -webkit-flex;
        background-color: #dfe9f1;
      }
    
      .md_textarea_content {
        flex: 1;
        height: 100%;
        padding: 12px;
        overflow: auto;
        box-sizing: border-box;
        resize: none;
        outline: none;
        border: none;
        background-color: #f4f4f4;
        font-size: 14px;
        color: #232323;
        line-height: 24px;
      }
    
    
    </style>
    
    

    业务逻辑部分的代码如下:

    
    <script>
      import marked from 'marked'     //解析mardown语法的库
      import hljs from 'highlight.js' //对代码进行语法高亮的库
    
    
      import testData from '../testData'  //测试数据
    
    
      export default {
        name: "HelloMarkDown",
    
        props: {
           {
            type: String,
            default: '1000px'
          },
    
          height: {
            type: String,
            default: '600px'
          }
        },
    
        data() {
          return {
            markString: '',
            htmlString: '',
          }
        },
    
        mounted(){
          this.markString = testData
        },
    
        methods: {
          //加粗
          addBold() {
            this.changeSelectedText("**","**")
          },
    
          //斜体
          addItalic() {
            this.changeSelectedText("***","***")
          },
    
          addUnderline() {
            this.changeSelectedText("<u>","</u>")
          },
    
          changeSelectedText(startString,endString){
            let t = this.$refs.ref_md_edit
            if (window.getSelection) {
              if (t.selectionStart != undefined && t.selectionEnd != undefined) {
    
                let str1 = t.value.substring(0, t.selectionStart)
                let str2 = t.value.substring(t.selectionStart, t.selectionEnd)
                let str3 = t.value.substring(t.selectionEnd)
    
                let result = str1 + startString + str2 + endString + str3
                t.value = result
                this.markString = t.value
              }
            }
          }
        },
    
        watch: {
    
          //监听markString变化
          markString: function (value) {
            marked.setOptions({
              renderer: new marked.Renderer(),
              gfm: true,
              tables: true,
              breaks: true,
              pedantic: false,
              sanitize: false,
              smartLists: true,
              smartypants: false
            })
    
            this.htmlString = marked(value)
          },
    
          //监听htmlString并对其高亮
          htmlString: function (value) {
            this.$nextTick(() => {
              const codes = document.querySelectorAll(".html_body pre code");
    
              // elem 是一个 object
              codes.forEach(elem => {
                elem.innerHTML = "<ul><li>" + elem.innerHTML.replace(/
    /g, "
    </li><li>") + "
    </li></ul>"
                hljs.highlightBlock(elem);
              });
            });
          }
        }
    
      }
    </script>
    

    script中的代码解释

        props: {
           {
            type: String,
            default: '1000px'
          },
    
          height: {
            type: String,
            default: '600px'
          }
        },
    

    组件的宽度
    height:组件的高度

     data() {
          return {
            markString: '',
            htmlString: '',
          }
        },
    

    markString:保存我们输入的markdown内容
    htmlString:保存markdown内容转换成的html内容,也就是通过marked函数转换过来的

       mounted(){
          this.markString = testData
        },
    

    显示默认数据

       //加粗
          addBold() {
            this.changeSelectedText("**","**")
          },
    
          //斜体
          addItalic() {
            this.changeSelectedText("***","***")
          },
    
          //加下划线
          addUnderline() {
            this.changeSelectedText("<u>","</u>")
          },
    

    这三个函数都是调用了 changeSelectedText 函数
    主要是对鼠标选中的内容进行改变,比如加粗效果,是在选中文本的两边分别添加 **

    所以changeSelectedText函数的作用就是在选中的文本两边添加不同的md的符号
    比如
    this.changeSelectedText("","") ,就是在选中的文本左边和右边都添加**
    然后再把最新的内容赋值给 this.$refs.ref_md_edit.value,同时也两会给markString
    这样就可以做到选中文本加粗效果了

     //监听markString变化
          markString: function (value) {
            marked.setOptions({
              renderer: new marked.Renderer(),
              gfm: true,
              tables: true,
              breaks: true,
              pedantic: false,
              sanitize: false,
              smartLists: true,
              smartypants: false
            })
    
            this.htmlString = marked(value)
          },
    

    此时是监听markString的变化
    然后调用marked函数进行转换成html内容,并赋值给htmlString
    marked.setOptions 是设置一些配置,有兴趣的可以查一下这些配置的作用

       //监听htmlString并对其高亮
          htmlString: function (value) {
            this.$nextTick(() => {
              const codes = document.querySelectorAll(".html_body pre code");
    
              // elem 是一个 object
              codes.forEach(elem => {
                elem.innerHTML = "<ul><li>" + elem.innerHTML.replace(/
    /g, "
    </li><li>") + "
    </li></ul>"
                hljs.highlightBlock(elem);
              });
            });
          }
    

    原本通过 highlight.js这个库在显示语法高亮的时候,是没有行号的。这里我进行了扩展
    通过 document.querySelectorAll(".html_body pre code") 找到nodeList
    然后对其循环,动态添加 ul , li, 这样就可以显示行号了
    不过这需要对 highlight的css文件添加几个样式
    源码里面我把highlight中的css文件全部copy到项目中了,使用的是github.css
    具体位置是在项目中的 assets/markdown/styles/github.css
    如果想使用其它的主题,可以自己修改其它的对应的css文件,这里使用了github的主题,所以只修改了github.css这一个文件
    有兴趣的可以查看一下
    github.css文件的提交记录

    具体的思路就是这些,水平有限,难免有bug,如有发现,欢迎提出

    欢迎访问作者的helloworld的个人博客:
    https://www.helloworld.net/jiulu

    欢迎访问作者的helloworld的个人博客:
    https://www.helloworld.net/jiulu

    同时也可以加作者的微信:daitukeji
    也可以扫下面的二维码添加
    image

  • 相关阅读:
    内存使用过高点检checklist
    Ubuntu linux系统下 su:出现: authentication failure的解决办法
    static完全解析
    C语言开发规范
    单片机、ARM、PC程序执行介质区别
    2021来了,一份小菜鸡的2020总结!
    Linux命令进阶篇-文件查看与查找
    LINUX常用命令(二)
    Linux常用命令(一)
    百钱百鸡
  • 原文地址:https://www.cnblogs.com/start1225/p/10887061.html
Copyright © 2020-2023  润新知