vditor的简单使用

不推荐，之所以记录是因为找了半天md编辑器，发现这个还不错，然后就去研究，不记录的话就浪费了。这半天的时间了，以后万一又要用，那就可以刚好用的上

官网地址

https://ld246.com/article/1549638745630#static-methods

编辑

引入

  <link href="lib/vditor/dist/index.css" rel="stylesheet" />
<script src="lib/vditor/dist/index.min.js"></script>

html

 <div id="vditor"></div>

js

            var toolbar;
            toolbar = [
                "emoji",
                "headings",
                "bold",
                "italic",
                "strike",
                "link",
                "|",
                "list",
                "ordered-list",
                "check",
                "|",
                "quote",
                "line",
                "code",
                "inline-code",
                "|",
                "upload",
                "record",
                "table",
                "|",
                "export",
                "fullscreen",
                "preview"
            ];
            //挂载到全局
            window.vditor = new Vditor("vditor", {
   

                // 获取焦点方法
                focus(md) {
   
                    document.onkeydown = function () {
   
                        // 判断 Ctrl+S
                        if (event.ctrlKey == true && event.keyCode == 83) {
   
                            alert('触发ctrl+s');
                            // 或者 return false;
                            event.preventDefault();
                        }
                    }
                },
                // _lutePath: "lib/vditor-3.7.3/src/js/lute/lute.min.js",
                // 这个是自定义导航栏
                toolbar,
                // 全屏选项
                fullscreen: {
   
                    index: 9999,
                },
                // 展示模式
                mode: "ir",
                //编辑器高度
                // height: window.innerHeight,
                // height: screen.height,
                height: 300,
                //是否展示大纲,手机端自动隐藏就行了
                outline: true,
                //打印调试信息
                debugger: false,
                //是否启动打字机模式(没弄明白这个意思)
                typewriterMode: false,
                //默认提示文本
                placeholder: "欢迎使用本博客",

                // 工具栏配置是否隐藏和固定
                toolbarConfig: {
   
                    // 是否固定工具栏
                    pin: false,
                },

                // 是否启用字数统计
                counter: {
   
                    enable: false,
                    type: "text",
                },

                tab: "\t",
                // 文件上传配置
                upload: {
   
                    accept: "image/*,.mp3, .wav, .rar",
                    token: "test",
                    url: "/api/upload/editor",
                    linkToImgUrl: "/api/upload/fetch",
                    filename(name) {
   
                        return name
                            .replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, "")
                            .replace(/[\?\\/:|<>\*\[\]\(\)\$%\{
   \}@~]/g, "")
                            .replace("/\\s/g", "");
                    },
                },
            });

入库处理

通过这个方法，存库

var cnt = vditor.getValue();

回显

引入

    <link href="lib/vditor/dist/index.css" rel="stylesheet" />
    <script src="lib/vditor/dist/method.min.js"></script>

html

                        <div id="preview"></div>
                        <div id="outline"></div>

js

            const initOutline = () => {
   
                const headingElements = []
                Array.from(document.getElementById('preview').children).forEach((item) => {
   
                    if (item.tagName.length === 2 && item.tagName !== 'HR' && item.tagName.indexOf('H') === 0) {
   
                        headingElements.push(item)
                    }
                })

                let toc