梦想星辰大海

版本：latest
初始化编辑器的时候，模式设置是：mode: 'sv'，会报错：

index.min.js:27 Uncaught (in promise) TypeError: Cannot read property 'preventDefault' of null

当我点击编辑器的工具栏，主动设置为所见即所得模式之后，再刷新页面，这个时候编辑器不会报错，初始化正常。
我观察了一下 local storage ，里面有个 vditorj-vditor 项，只有这个项存在，分屏预览模式才正常。

附上初始化编辑器的代码：

//渲染编辑器
//@link https://hacpai.com/article/1549638745630 文档地址
//@link https://github.com/Vanessa219/vditor/blob/master/CHANGELOG.md?utm_source=hacpai.com 升级日志
let vEditorObj = null;
//写下这行代码的原因 @link https://hacpai.com/article/1549638745630/comment/1585808918654?r=buexplain
window.localStorage.setItem('vditorj-vditor', '');
vEditorObj = new Vditor('j-vditor', {
    debugger: true,
    typewriterMode: true,
    placeholder: '请输入文章内容',
    counter: 65535,
    height: ($(window).height() - 93),
    width:"100%",
    cache:false,
    tab: '\t',
    theme: 'classic',
    mode:'sv',
    upload: {
        accept: acceptMimeTypes,
        handler (files) {
            var formDataArr = [];
            var token = _token();
            for(var i in files) {
                var formData = new FormData();
                formData.append('_token', token);
                formData.append('file', files[i]);
                formDataArr.push(formData);
            }
            Uploads.getInstance(formDataArr).then(function (result) {
                vEditorObj.insertValue(result.getMarkdownText());
            }).catch(function(rej) {
                submit.alertWarning(rej.toString());
            });
        },
    },
    preview: {
        markdown: {
            toc: true,
        },
        hljs:{
            enable:true,
            style:'monokai',
            lineNumber:true
        },
        mode: 'both',
        parse: (element) => {
            lazyLoadImage()
        },
    },
    after: function () {
        //压入文章内容
        console.log(vEditorObj);
        vEditorObj.setValue(result.content.getBody());
    }
});

最新版的 demo/static.html 设置 mode 编辑器异常

发现一个错误，请楼主帮忙看看。
版本：Vditor v2.0.15
报错：

新的问题：编辑器默认选中了“所见即所得”按钮

如上图所示，请问，我这个内容没有渲染是什么原因呢，编辑器图标异常又是要引入什么 css 呢？
我的代码如下：

内容容器：
<div class="vditor-reset" id="j-content">{{.body}}</div>

编辑器代码：

//初始化编辑器
const vEditor = new Vditor('j-content', {
    placeholder:'请输入文章内容',
    cache:false,
    counter: 65535,
    height: $(window).height() - 93,
    tab: '\t',
    upload: {
        linkToImgUrl: '/backend/article/content/upload',
        handler (file) {
            var formData = new FormData();
            formData.append('_token', document.querySelector("input[name=_token]").value);
            for(var i in file) {
                formData.append('file[]', file[i]);
            }
            var request = new XMLHttpRequest();
            request.open("POST", "/backend/article/content/upload");
            request.onload = function(oEvent) {
                let currentTarget = oEvent.currentTarget;
                if(currentTarget.status !== 200) {
                    layer.alert(currentTarget.status+' '+currentTarget.statusText, {icon: 2});
                    return '';
                }
                let json = JSON.parse(currentTarget.response);
                if(json.code === 0) {
                    var show = [".jpg", ".png", ".gif", ".jpeg", ".bmp"];
                    for(var i in json.data) {
                        var tmp = '['+json.data[i].name+']('+json.data[i].path+')';
                        for(var j in show) {
                            if(json.data[i].path.substr(0 - show[j].length).toLocaleLowerCase() === show[j]) {
                                tmp = '!'+tmp;
                                break;
                            }
                        }
                        vEditor.insertValue(tmp);
                    }
                }else {
                    layer.alert(json.message, {icon: 2});
                }
            };
            request.send(formData);
        },
    },
    preview: {
        mode: 'both',
        parse: () => {
            LazyLoadImage()
        },
    },
});

引入的代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@latest/dist/index.classic.css" />
<script src="https://cdn.jsdelivr.net/npm/vditor@latest/dist/index.min.js"></script>

我实际输出的代码是这样的：

现在渲染后的结果是把空格都压缩掉了。

如上图所示，请问，我这个内容没有渲染是什么原因呢，编辑器图标异常又是要引入什么 css 呢？
我的代码如下：

内容容器：
<div class="vditor-reset" id="j-content">{{.body}}</div>

编辑器代码：

//初始化编辑器
const vEditor = new Vditor('j-content', {
    placeholder:'请输入文章内容',
    cache:false,
    counter: 65535,
    height: $(window).height() - 93,
    tab: '\t',
    upload: {
        linkToImgUrl: '/backend/article/content/upload',
        handler (file) {
            var formData = new FormData();
            formData.append('_token', document.querySelector("input[name=_token]").value);
            for(var i in file) {
                formData.append('file[]', file[i]);
            }
            var request = new XMLHttpRequest();
            request.open("POST", "/backend/article/content/upload");
            request.onload = function(oEvent) {
                let currentTarget = oEvent.currentTarget;
                if(currentTarget.status !== 200) {
                    layer.alert(currentTarget.status+' '+currentTarget.statusText, {icon: 2});
                    return '';
                }
                let json = JSON.parse(currentTarget.response);
                if(json.code === 0) {
                    var show = [".jpg", ".png", ".gif", ".jpeg", ".bmp"];
                    for(var i in json.data) {
                        var tmp = '['+json.data[i].name+']('+json.data[i].path+')';
                        for(var j in show) {
                            if(json.data[i].path.substr(0 - show[j].length).toLocaleLowerCase() === show[j]) {
                                tmp = '!'+tmp;
                                break;
                            }
                        }
                        vEditor.insertValue(tmp);
                    }
                }else {
                    layer.alert(json.message, {icon: 2});
                }
            };
            request.send(formData);
        },
    },
    preview: {
        mode: 'both',
        parse: () => {
            LazyLoadImage()
        },
    },
});

引入的代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@latest/dist/index.classic.css" />
<script src="https://cdn.jsdelivr.net/npm/vditor@latest/dist/index.min.js"></script>

自定义上传返回的数据结构对不？有没有更详细的示例。

看了 https://github.com/b3log/vditor/blob/master/src/ts/upload/index.ts#L109?utm_source=hacpai.com 后，明白了。
上传完成后需要调用：vEditor.insertValue 方法即可。