登录 注册

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

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

版本号：

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

    354 引用 • 1823 回帖
北京 位置
1 关注
6 回帖
5
1.3k 93 245 271 81 20 557

相关帖子

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

近期热议

推荐标签 标签

  • 游戏

    沉迷游戏伤身，强撸灰飞烟灭。

    177 引用 • 816 回帖 • 1 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 254 关注
  • OkHttp

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

    16 引用 • 6 回帖 • 77 关注
  • OpenStack

    OpenStack 是一个云操作系统，通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成，同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 1 关注
  • 服务器

    服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖 • 1 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    574 引用 • 3533 回帖
  • OpenShift

    红帽提供的 PaaS 云，支持多种编程语言，为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 631 关注
  • 京东

    京东是中国最大的自营式电商企业，2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月，京东在美国纳斯达克证券交易所正式挂牌上市（股票代码：JD），是中国第一个成功赴美上市的大型综合型电商平台，与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 355 关注
  • React

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

    192 引用 • 291 回帖 • 371 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司，即：Kunming Zunyuan Property Agency Company Limited（简称“尊园地产”）于 2007 年 6 月开始筹备，2007 年 8 月 18 日正式成立，注册资本 200 万元，公司性质为股份经纪有限公司，主营业务为：代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 771 关注
  • 锤子科技

    锤子科技（Smartisan）成立于 2012 年 5 月，是一家制造移动互联网终端设备的公司，公司的使命是用完美主义的工匠精神，打造用户体验一流的数码消费类产品（智能手机为主），改善人们的生活质量。

    4 引用 • 31 回帖
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘（Capacitive Keyboard）。

    5 引用 • 74 回帖 • 477 关注
  • 百度

    百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 164 关注
  • InfluxDB

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

    2 引用 • 77 关注
  • 负能量

    上帝为你关上了一扇门，然后就去睡觉了....努力不一定能成功，但不努力一定很轻松 (° ー °〃)

    88 引用 • 1235 回帖 • 412 关注
  • Typecho

    Typecho 是一款博客程序，它在 GPLv2 许可证下发行，基于 PHP 构建，可以运行在各种平台上，支持多种数据库（MySQL、PostgreSQL、SQLite）。

    12 引用 • 65 回帖 • 445 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现，服务器端用 Erlang 语言编写，支持多种语言客户端，如：Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息，在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 360 关注
  • GitLab

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

    46 引用 • 72 回帖
  • Spark

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

    74 引用 • 46 回帖 • 556 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 26 关注
  • 域名

    域名（Domain Name），简称域名、网域，是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

    43 引用 • 208 回帖 • 1 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合，以模块的方式组织管理插件以
    及相关配置，为不同的语言开发量身定制了相关的开发模块，该模块提供代码自动补全，
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 102 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言，可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克（Rob Pike）说：我们之所以开发 Go，是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    497 引用 • 1388 回帖 • 277 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

    728 引用 • 1273 回帖 • 2 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言，应用广泛。C++ 支持多种编程范式，面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖
  • Firefox

    Mozilla Firefox 中文俗称“火狐”（正式缩写为 Fx 或 fx，非正式缩写为 FF），是一个开源的网页浏览器，使用 Gecko 排版引擎，支持多种操作系统，如 Windows、OSX 及 Linux 等。

    8 引用 • 30 回帖 • 409 关注
  • Sillot

    Insights（注意当前设置 master 为默认分支）

    汐洛彖夲肜矩阵（Sillot T☳Converbenk Matrix），致力于服务智慧新彖乄，具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架（Sillot-Gibbet）基于自思源笔记（siyuan-note），前身是思源笔记汐洛版（更早是思源笔记汐洛分支），是智慧新录乄终端（多端融合，移动端优先）。

    主仓库地址：Hi-Windom/Sillot

    文档地址：sillot.db.sc.cn

    注意事项：

    1. ⚠️ 汐洛仍在早期开发阶段，尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计，使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记，开发者尽最大努力与思源笔记保持兼容，但无法实现 100% 兼容
    29 引用 • 25 回帖 • 87 关注

最新标签