登录 注册

请问在哪里设置编辑器初始值（setValue），after 也不成功？

本贴最后更新于 1338 天前，其中的信息可能已经斗转星移

版本号：

"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
Issue #523 · Vanessa219/vditor
说是在 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。

    351 引用 • 1811 回帖 • 2 关注
北京 位置
1 关注
6 回帖
5
1.2k 92 245 250 77 20 556

相关帖子

6 回帖
请问在哪里设置编辑器初始值（setValue），after 也不成功？

欢迎来到这里！

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

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

    需要方在 new Vditor 的 after 参数中

    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 •
请输入回帖内容 ...
rayjohnttttt
北京
回帖
5
 帖子
3
 积分
418

近期热议

推荐标签 标签

  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统，它可以处理消费者规模的网站中的所有动作流数据。 这种动作（网页浏览，搜索和其他用户的行动）是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 4 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务，可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务，所以该项目也已经停止维护了！

    34 引用 • 467 回帖 • 744 关注
  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖 • 1 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。

    19 引用 • 31 回帖 • 1 关注
  • 设计模式

    设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库，强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery，是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 727 关注
  • wolai

    我来 wolai：不仅仅是未来的云端笔记！

    2 引用 • 14 回帖
  • IBM

    IBM（国际商业机器公司）或万国商业机器公司，简称 IBM（International Business Machines Corporation），总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国，是全球最大的信息技术和业务解决方案公司，拥有全球雇员 30 多万人，业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 132 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣，为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 53 关注
  • 工具

    子曰：“工欲善其事，必先利其器。”

    286 引用 • 729 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 137 关注
  • LaTeX

    LaTeX（音译“拉泰赫”）是一种基于 ΤΕΧ 的排版系统，由美国计算机学家莱斯利·兰伯特（Leslie Lamport）在 20 世纪 80 年代初期开发，利用这种格式，即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能，能在几天，甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式，这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 71 关注
  • 宕机

    宕机，多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态，也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态，也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 53 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    22252 引用 • 88941 回帖 • 1 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年，是中国的 IT 社区和服务平台，为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务，满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • 安装

    你若安好，便是晴天。

    132 引用 • 1184 回帖 • 2 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。

    6 引用 • 26 回帖 • 511 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统，实现一个自托管的 Git 项目仓库，可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖 • 2 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations，简称 DJI)，成立于 2006 年，是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商，客户遍布全球 100 多个国家。通过持续的创新，大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 1 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC（苹果开发者大会）发布的开发语言，可与 Objective-C 共同运行于 Mac OS 和 iOS 平台，用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 532 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起，它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 5 关注
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 537 关注
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点；但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中，从而不再需要读写 HDFS，因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 556 关注
  • 面试

    面试造航母，上班拧螺丝。多面试，少加班。

    325 引用 • 1395 回帖 • 1 关注
  • CentOS

    CentOS（Community Enterprise Operating System）是 Linux 发行版之一，它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码，因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    8075 引用 • 36886 回帖 • 162 关注
  • 脑图

    脑图又叫思维导图，是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具。

    26 引用 • 84 回帖

最新标签