vue+mermaid.js 做一个动态mermaid编辑器

最新推荐文章于 2024-07-23 15:45:44 发布

安河桥以北c

最新推荐文章于 2024-07-23 15:45:44 发布

阅读量4.3k

点赞数 2

文章标签：前端 vue

本文链接：https://blog.csdn.net/weixin_60909815/article/details/124189735

版权

前言

之前由于跟的项目的需要得做一个动态的mermaid的编辑器，但是当时翻遍了百度谷歌都没有解决我问题的答案，而且mermaid.js的官方API也比较含糊且在实际开发中存在一些错误。

一、所使用的第三方组件及快速上手

需要使用element-ui和mermaid.js

element-ui基本大家都很熟悉了，参考官网：Element - The world's most popular Vue UI framework

mermaid.js：

安装：

npm install mermaid -S

二、mermaid引入和初始化

在需要使用mermaid的组件里面输入如下代码：

import  mermaid from 'mermaid'
mermaid.initialize({ startOnLoad: false })

由于mermaid默认是在组件创建时加载的，所以需要设置startOnload为false。

三、组件编写

编写代码使用的输入框

我使用的是element-ui的el-input富文本：

 <div class="word">
         <el-input 
         v-model="mvalue" 
         type="textarea" 
         autosize
         resize="none"
         :style="selfStyle"
         ></el-input>
        
  </div>

样式：

<style lang="less" scoped>
.MermaidBlock {
    width: 100%;
    min-height: 250px;
    background-color: #f6f5f5;
      padding: 20px;
}

.word .paint{
  min-height: 100px;
  width: 100%;
  padding: 20px;
}

// .word >>>.el-input__inner {
//     border: none !important;
//     background-color: inherit!important;
//     font-size: 20px;
// }

.word {
    margin-bottom: 50px;
}

.paint {
    min-height: 200px;
}

.el-textarea {
  min-height: 100px;
  border-top: 1px solid #f3f3f3;
  border-bottom: 1px solid #f3f3f3;
}
/deep/.el-dialog__body {
  padding: 0;
}

/deep/.el-textarea__inner {
  min-height: 100px !important;
  background-color: inherit!important;
  border: none;
  outline: none;
  font-size: 20px;
  width: 100%;
  resize: none;
  padding: 20px;
}
/deep/textarea::-webkit-input-placeholder {
  color: #ffffff;
}
/deep/textarea:focus::-webkit-input-placeholder {
  color: #999999;
}

</style>

以上样式是用于消除边框和改变背景颜色

效果如下（比较丑，见谅）

之前也有考虑过使用可编辑div 也就是在div里面加上contenteditable="true"

但是使用该方法有两个要命的地方：

一是如果从其他地方复制了带样式的文字会让这个div本身的样式发生改变，需要浪费额外的精力去写更多的逻辑。

二是可编辑div的内容存在一些问题：

1.内容获取麻烦：

2.获取完之后的数据要过滤和修改一大堆html本身的一些符号如&nbsp

3.更要命的是使用可编辑div 之后，在代码末尾空格有时候会产生语法错误。

相对之下，直接使用element-ui的富文本简单得多。

编写mermaid渲染函数

mermaid渲染节点：

        <div class="paint">
           <div class="mermaid"></div>
       </div>

使用watch节点监听输入内容的变化

监听函数：

 handler(newval) {
   
        let element = document.querySelector(".mermaid");

        let insertSvg = function(svgCode, bindFunctions){
            element.innerHTML = svgCode;
        };
    
        var graphDefinition = newval;
        
         mermaid.mermaidAPI.render('mermaid', graphDefinition, insertSvg);

       }

上面三段代码其实来自于mermaid.js的官方API，但是官方使用的是用id=mermaid