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

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

版本号:

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

    308 引用 • 1658 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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
    作者

    focus 注释掉了 还是不成功。

  • 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
    作者

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

  • 查看全部回帖

推荐标签 标签

  • 脑图

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

    21 引用 • 58 回帖
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    122 引用 • 73 回帖 • 2 关注
  • 锤子科技

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

    4 引用 • 31 回帖 • 5 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    148 引用 • 257 回帖 • 2 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 1 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 1 关注
  • Dubbo

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

    60 引用 • 82 回帖 • 590 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 505 关注
  • ActiveMQ

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

    19 引用 • 13 回帖 • 623 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1738 回帖 • 2 关注
  • 程序员

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

    529 引用 • 3527 回帖
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    83 引用 • 165 回帖 • 59 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    522 引用 • 4581 回帖 • 687 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖 • 57 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 408 关注
  • jsoup

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

    6 引用 • 1 回帖 • 456 关注
  • DNSPod

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

    6 引用 • 26 回帖 • 518 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    108 引用 • 54 回帖
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    81 引用 • 122 回帖 • 614 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 3 关注
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖 • 2 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    273 引用 • 676 回帖
  • OpenStack

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

    10 引用 • 9 关注
  • React

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

    192 引用 • 291 回帖 • 444 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    330 引用 • 613 回帖
  • CodeMirror
    1 引用 • 2 回帖 • 108 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖