登录 注册

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

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

版本号：

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

    352 引用 • 1815 回帖
北京 位置
1 关注
6 回帖
5
1.3k 92 245 253 77 20 556

相关帖子

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

欢迎来到这里！

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

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

近期热议

推荐标签 标签

  • JetBrains

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

    18 引用 • 54 回帖
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高，单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 94 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 40 关注
  • 小薇

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

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

    34 引用 • 467 回帖 • 743 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3187 引用 • 8213 回帖
  • 前端

    前端技术一般分为前端设计和前端开发，前端设计可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1348 回帖
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    117 引用 • 99 回帖 • 212 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 709 关注
  • 笔记

    好记性不如烂笔头。

    308 引用 • 793 回帖
  • ActiveMQ

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

    19 引用 • 13 回帖 • 673 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量，事件及实时分析。

    2 引用 • 73 关注
  • SQLite

    SQLite 是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖
  • AngularJS

    AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 474 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库，并提供多种语言的 API。从 2010 年 3 月 15 日起，Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始，Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖 • 62 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器，详细介绍请看 将 Java Swing 应用变成 Web 应用 。

    1 引用 • 15 回帖 • 629 关注
  • OnlyOffice
    4 引用 • 3 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 1 关注
  • Q&A

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

    8122 引用 • 37037 回帖 • 159 关注
  • 倾城之链
    23 引用 • 66 回帖 • 137 关注
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 536 关注
  • gRpc
    11 引用 • 9 回帖 • 73 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具，它遵循 OpenAPI Specification（这是一种通用的、和编程语言无关的 API 描述规范）。Swagger 贯穿整个 API 生命周期，如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖
  • 30Seconds

    📙 前端知识精选集，包含 HTML、CSS、JavaScript、React、Node、安全等方面，每天仅需 30 秒。

    • 精选常见面试题，帮助您准备下一次面试
    • 精选常见交互，帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段，帮助你获取最佳实践
    • 精选常见代码集，帮助您提高打码效率
    • 整理前端界的最新资讯，邀您一同探索新世界
    488 引用 • 384 回帖 • 9 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具，主要功能包括：位置相关的内容递送；用户认证和授权；集中式网络监控。

    1 引用 • 7 回帖 • 589 关注
  • 导航

    各种网址链接、内容导航。

    40 引用 • 173 回帖
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 660 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库，该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable：一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样，HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 73 关注

最新标签