Vue使用wangEditor富文本编辑器报错(ot find a descendant at path [0,1] in node: {“children“:[{“type“:“paragraph)_cannot find a descendant at path [0,1] in node
2024-04-25
88 字约 1 分钟
...
回显 答案 时渲染dom报错问题：
动态绑定每题的答案 修改文字样式后切换报错
解决办法: 在动态切换答案回显的同时删除 wangEditor 的实例然后异步重新创建一遍进行回显
代码片段:
<template v-for="(item, index) in topicData.detail" :key="item"><div @click="clickRadioBtnHandler(item, index)" class="tabsItem" :class="index === curTabsIndex && 'tabsItemActive'">{{ item.name }}</div><div v-if="stObj.length && flag"><Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" /><Editor style="overflow-y: hidden" v-model="stObj[curTabsIndex].content" :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" @onChange="handleChange" />const flag = ref<boolean>(true)const clickRadioBtnHandler = (item: any, index: number) => { curTabsIndex.value = index examStore.getSmallDetailsAction(item.id)如果您觉得这篇文章有帮助，请点个赞吧～
相关文章
更多文章 →富文本2025-01-04
Monaco Editor,代码编辑器神器
本文介绍了 Monaco Editor 这款微软开源的基于浏览器的代码编辑器，它功能强大，包括语法高亮、代码补全等，具有轻量、可定制、跨平台等特点。文中阐述了其应用场景、使用方法、基本概念等，还列举了类似项目并给出项目地址，适合多种开发需求。 关联问题: Monaco支持哪些语言 如何定制Monaco 怎样优化界面效果 Monaco Editor是微软开源的一款基于浏览器的代码编辑器，它源自于Visual Studio Code（简称V...
学习
富文本2024-09-02
富文本格式粘贴的问题
回到最初的问题，利用富文本编辑器，编写邮件模板，或者说，提供一个编辑器，用来编写邮件。如果说编写邮件而已，大可以在 word 或者其他编辑器里写好内容，但这里的一个特点就是 占位符 。所以说，这是要保持邮件编辑器的功能，然后还能使用占位符。 前面也是利用了 实现了 占位符 ，且具有不可编辑的特点。另外也具有了编辑器的基础功能，如文字大小、颜色、背景、居中、缩进等等。在开发中，只关注于编辑器本身，即这个编辑器能编辑就可以了，忽略了 这个功...
学习
富文本2024-05-09
vue3集成tinymce
简介 看了一圈富文本编辑器，发现 和 比较符合自己的需求，功能上 更加丰富、简单一些。 吐槽 吐槽一下 的官网，给了 这个组件包，但是没想到就只是简单包装了一下（期初以为下载完这个包，引入vue组件内就完成了！），没想到如果只是单独引入这个包，是需要 的，而且是云托管方式去下载 ，导致反复看官网折腾了好久！ 自托管集成方式 有两种方式，一种是使用包管理工具、另一种是zip包。 ，因为 还是挺大的，开发和打包过程影响编译时间。 以下面技术...
学习
富文本2024-05-08
新一代富文本编辑器框架lexical入门
是一款 基于 开发的网页端文本编辑框架，具备高拓展性架构，以高可靠性、易用性以及性能表现为核心设计思想。本身不与任何框架绑定，可独立于 、 使用（不过由于 与 的亲和性， 有 版）。使用者可在其基础上建立属于自己的独一无二的文本编辑器 目前在 内部，每天 通过 、 、 、 、 等产品服务千百万用户，稳定性及可靠性值得信赖 的核心包（上图左侧部分）只有22kb，其余能力以 形式提供。框架支持延迟加载， 可以在用户真正操作编辑器的时候再加载...
学习
富文本2024-05-06
再遇协同编辑：Yjs + Quill，文档协同编辑竟如此简单
通过上一篇文章 ，相信各位小伙伴对 OT 和 CRDT 协同算法有了一定的了解，并且对 Yjs 有了初步的认识，本文主要教会大家如何使用 Yjs 来实现 Quill 的协同编辑，以及针对 Yjs 的一些重要概念进行讲解。 因为协作需要服务端的支持，所有没有 demo，具体实现请 。 Yjs 介绍 官方介绍： 用于构建 Google Docs 和 Figma 等协作应用程序的模块化构建块 。 基于 CRDT ，帮助实现高性能的协作应用程序...
学习
富文本2024-04-15
Editor.js 开发 Notion 风格富文本编辑器
前言 开发一个编辑博客内容的富文本编辑器，风格类似于 Notion 块级的编辑器，研究了 开源项目，和它的风格接近，editorjs 界面简洁，操作个人感觉很高级，插件灵活易扩展，样式可编辑修改，开发成本也没有那么复杂 介绍 Editor.js 亮点 用户界面友好 ：Editor.js 提供了一个直观且易于使用的用户界面，能够轻松地创建和编辑文档 模块化编辑 ： 使用块级元素（blocks）的方式组织文本，每个块负责处理不同类型的内容，...
学习
评论
请登录后发表评论
去登录