请问在哪里设置编辑器初始值(setValue),after 也不成功?

版本号:

"vditor": "^3.8.3",

目前已尝试如下方法:

new 对象之后初始化

this.vditor = new Vditor('vditor', options);
      this.vditor.focus();

设置内容初始化:

this.vditor.setValue('# 这是初始内容', false);

不成功,报如下错误:

Cannot read property 'SpinVditorSVDOM' of undefined

参考了如下帖子:
https://github.com/Vanessa219/vditor/issues/273#issuecomment-609386420
https://github.com/Vanessa219/vditor/issues/523
说是在 after()里设置,但是 after 里面,也设置不成功,vditor 对象还是 undefine 的状态。
代码:

request.onload = that.onloadCallback;
            request.send(formData);
          }
        },
        after() {
          console.log('--- init content ----');
          // vditor.setValue('# 哈哈', true);
          if (this.vditor) {
            console.log('---- ok vditor --');
          } else {
            console.log('--- empty vditor ---');
          }
        }

控制台输出 empty vditor。
image.png

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    130 引用 • 944 回帖 • 3 关注

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • Vanessa
    订阅者

    需要方在 new Vditorafter 参数中

    1 回复
  • rayjohnttttt 1 评论
    作者

    已经是 new 里的方法,以下是完整代码:

      mounted() {
        this.initVditor()
        this.$nextTick(() => {
          this.isLoading = false
        })
      },
    
    initVditor() {
          const that = this;
          const options = {
            width: '100%',
            height: '0',
            tab: '\t',
            counter: '999999',
            typewriterMode: true,
            mode: 'sv',
            preview: {
              delay: 100,
              show: !this.isMobile
            },
            outline: true,
            upload: {
              max: 5 * 1024 * 1024,
              // linkToImgUrl: 'https://sm.ms/api/upload',
              handler(file) {
                let formData = new FormData();
                for (let i in file) {
                  formData.append('smfile', file[i]);
                }
                let request = new XMLHttpRequest()
                request.open('POST', 'https://sm.ms/api/upload')
                request.onload = that.onloadCallback;
                request.send(formData);
              }
            },
            after() {
              console.log('--- init content ----');
              // vditor.setValue('# 哈哈', true);
              if (this.vditor) {
                console.log('---- ok vditor --');
              } else {
                console.log('--- empty vditor ---');
              }
            }
          };
          this.vditor = new Vditor('vditor', options);
          this.vditor.focus();
    
    1 操作
    rayjohnttttt 在 2021-03-19 17:42:26 更新了该回帖
    应该是在 focus 这里报错的
    Vanessa
  • rayjohnttttt
    作者

    你好。我贴上代码了 能帮忙看看是为什么吗

  • rayjohnttttt
    作者

    focus 注释掉了 还是不成功。

  • rayjohnttttt
    作者

    观察到一个跟版本有关的奇怪现象:

    版本 3.2.12,在初始化之后,是可以 setValue 的,但是会报 render undefined 的错误。

    但这个版本的 after,setValue 的时候,vditor 还是空的。

    3.2.12 的代码:

      mounted() {
        // this.initVditor()
        this.initVditor();
        this.$nextTick(() => {
          this.isLoading = false
        })
    
        console.log('---- in mounted ---');
        if(this.contentEditor) {
          console.log('----- not empty -----');
          this.contentEditor.setValue('# 在mounted中, 哈哈', true);
        } else {
          console.log('----- empty -----');
        }
      },
    

    有可能是回归 bug 吗?

  • rayjohnttttt 1 评论
    作者

    已解决。经过反复尝试,还是得用本地变量,就可以解决这个问题。我是在 vue 中使用的。不能直接 this.vditor.setValue.

          const vditor = new Vditor('vditor', {
            width: this.isMobile ? '100%' : '80%',
            height: '0',
            tab: '\t',
            counter: '999999',
            typewriterMode: true,
            mode: 'sv',
            preview: {
              delay: 100,
              show: !this.isMobile
            },
            after() {
              console.log('--- init content ---');
              if(vditor) {
                console.log('--- not empty ---');
                vditor.setValue('# 哈哈', false);
              } else {
                console.log('--- empty --');
              }
            }
          });
          this.contentEditor = vditor;
    

    成功 setValue。

    我猜测应该是跟 this 的生命周期有关系。

    ReactJs 可能也会遇到这个问题吧 😄 。

    但是我看另一个项目(使用 vditor 3.2.12 版本)使用了 vditor,他的代码如下,可以 setValue:

    https://github.com/lhlyu/petard (演示地址:https://lhlyu.github.io/petard/#/)

    export default {
      name: 'index',
      components: {
        Upload
      },
      watch: {
        $route (val, oldVal) {
          if (val.name !== 'article-edit') {
            return
          }
          this.loadArticle(val.query.id)
        }
      },
      data () {
        return {
          loading: false,
          dialogCoverVisible: false,
          contentEditor: null,
          categorys: null,
          req: {
            id: 0,
            title: '',
            summary: '',
            cover: '',
            top: 0,
            categoryId: null,
            tags: [],
            content: '',
            kind: 1,
            storeMode: 2,
            state: 1,
            commentState: 1
          }
        }
      },
      methods: {
        init () {
          this.initEdtor()
          this.loadCategorys()
          this.loadArticle(this.$route.query.id)
        },
        initEdtor (value) {
          this.contentEditor = new Vditor('vditor', {
            mode: 'sv',
            minHeight: 550,
            cache: {
              enable: true,
              id: 'petardEditor'
            }
          })
        },
        add () {
          this.req = {
            id: 0,
            title: '',
            summary: '',
            cover: '',
            top: 0,
            categoryId: null,
            tags: [],
            content: '',
            kind: 1,
            storeMode: 2,
            state: 1,
            commentState: 1
          }
          this.contentEditor.setValue('')
        },
        reset () {
          if (this.req.id === 0) {
            this.add()
            return
          }
          this.loadArticle(this.req.id)
        },
        async loadArticle (id) {
          if (!id) {
            return
          }
          this.loading = true
          const result = await this.$request.fetchArticle({
            id: id
          })
          if (result.code) {
            this.$message.warning(result.message)
            this.loading = false
            return
          }
          this.req = result.data
          this.contentEditor.setValue(this.req.content)
          this.loading = false
        },
        async loadCategorys () {
          this.loading = true
          const result = await this.$request.fetchCategorys({
            pageNum: 1,
            pageSize: 20
          })
          if (result.code) {
            this.categorys = []
            this.$message.warning(result.message)
            this.loading = false
            return
          }
          this.categorys = result.data.list
          this.loading = false
        },
        async save () {
          const length = this.contentEditor.getHTML().trim().length
          if (length === 0) {
            this.$message.warning('内容不能为空!')
          }
          if (this.isEmpty(this.req.title, '标题不能为空!')) {
            return
          }
          this.req.content = this.contentEditor.getValue().trim()
          this.loading = true
          const result = await this.$request.fetchEditArticle(this.req)
          if (result.code) {
            this.$message.warning(result.message)
            this.loading = false
            return
          }
          this.$message.success(result.message)
          this.loading = false
        },
        // ------------ handler -----------------
        handlerUpload (data) {
          if (!data) {
            return
          }
          this.req.cover = data.url
        }
      },
      computed: {
        ...mapState(['dict'])
      }
    }
    
    是不是 this 不对?
    Vanessa
请输入回帖内容 ...