登录 注册

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

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

版本号：

"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。

    313 引用 • 1667 回帖 • 1 关注
北京 位置
1 关注
6 回帖
5
1.2k 71 244 183 71 20 556

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • 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 •
  • 其他回帖
  • Vanessa •
    订阅者 付费者 MOD

    需要方在 new Vditor 的 after 参数中

    1 回复
  • rayjohnttttt •
    作者

    focus 注释掉了 还是不成功。

  • 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

近期热议

推荐标签 标签

  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    228 引用 • 1450 回帖
  • Love2D

    Love2D 是一个开源的， 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 513 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 42 关注
  • RESTful

    一种软件架构设计风格而不是标准，提供了一组设计原则和约束条件，主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

    30 引用 • 114 回帖
  • Scala

    Scala 是一门多范式的编程语言，集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 108 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构，这是有关软件整体结构与组件的抽象描述，用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    140 引用 • 441 回帖 • 1 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司，该公司位于捷克的布拉格，并在俄国的圣彼得堡及美国麻州波士顿都设有办公室，该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境：IntelliJ IDEA。

    18 引用 • 54 回帖 • 2 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作，它正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 7 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    4 引用 • 55 回帖 • 8 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞 I/O 模型而得以轻量和高效。

    138 引用 • 268 回帖 • 194 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库，专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 54 关注
  • OnlyOffice
    4 引用 • 23 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划，本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE，直到 1999 年 Sun 买下此公司。Sun 于次年（2000 年）六月将 NetBeans IDE 开源，直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 643 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 462 关注
  • 职场

    找到自己的位置，萌新烦恼少。

    126 引用 • 1699 回帖
  • CentOS

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

    238 引用 • 224 回帖 • 1 关注
  • Flume

    Flume 是一套分布式的、可靠的，可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 594 关注
  • API

    应用程序编程接口（Application Programming Interface）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

    76 引用 • 421 回帖
  • 音乐

    你听到信仰的声音了么？

    59 引用 • 509 回帖
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务，可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 45 关注
  • Dubbo

    Dubbo 是一个分布式服务框架，致力于提供高性能和透明化的 RPC 远程服务调用方案，是 [阿里巴巴] SOA 服务化治理方案的核心框架，每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持，并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 609 关注
  • ngrok

    ngrok 是一个反向代理，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 598 关注
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    40 引用 • 24 回帖
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 443 关注
  • 房星科技

    房星网，我们不和没有钱的程序员谈理想，我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源，遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 559 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统，它完整实现了 JMS 规范，是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 626 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 20 关注

最新标签