如何防止 contenteditable 输入事件并在 vue 中设置模型值?

2024-02-03

我想在 contenteditable div 上使用 vue 创建简单的所见即所得编辑器。我想将编辑器内容存储到 json 对象中。我想使用状态/模型概念。我将在编辑器模板中执行类似的操作:

<div contenteditable>
    <component v-for="item in json" :is="item.blockTypeComponent" />
</div>

我将在编辑页面上的某处使用带有 v-model 的 simple-wysiwyg 组件:

<simple-wysiwyg v-model="someVarAsJson" />

看起来我需要将编辑器输入数据存储到模型/状态之前,并自动更新 contenteditable 中的内容,这意味着我需要拦截 contenteditable 的输入事件。正如我从 Draft-js、prosemirror 和中等网站 wysiwyg 开发人员的文章(这里是链接 __https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480 )的介绍中了解到的,他们使用与我相同的概念上面已经描述了。 vue上有基于prosemirror的tiptap编辑器,但我还不明白它是如何工作的。

可以做我想做的事吗?


None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何防止 contenteditable 输入事件并在 vue 中设置模型值? 的相关文章

随机推荐

  • WMI 与 Windows API

    使用该方法有任何优点或缺点WMI http msdn microsoft com en us library aa394582 28VS 85 29 aspx代替视窗应用程序接口 http msdn microsoft com en us
  • GitHub Enterprise 中的 GitHub 操作在 npm 包上提供 401 和 404

    我在用语义版本动作 https github com cycjimmy semantic release action在我的 GitHub 企业存储库上 直到最近它工作得很好 但开始失败这个错误 https github com cycji
  • 在 Typescript 中使用接口或类时[重复]

    这个问题在这里已经有答案了 我有一个简单的登录场景 需要用户在 Typescript 中输入电子邮件和密码 我需要创建某种类型来获取强类型并将其发送到后端 是否应该写成 export interface UserLogin email st
  • 将 git 存储库链接到多个 TFS 项目

    我有一个 git 存储库 需要作为共享库 通用代码在多个其他项目之间共享 使用此通用代码的项目都是TFS项目 TFS2013 我能够在 TFS 中托管 git 存储库 但无法弄清楚如何在不重复的情况下将 git 和 TFS 存储库链接在一起
  • 在 OS X 下的 PyCharm 上运行 GAE GCS,运行时错误“没有名为 cloudstorage 的模块”

    我正在尝试将 Google Cloud Storage 功能添加到已经运行且具有重要功能的 Python GAE 应用程序中 我的开发计算机完全在 PyCharm 中工作 该计算机是运行 OS X 10 9 5 的 Mac 我创建了一个新的
  • php foreach echo 打印“Array”作为值

    也许我只是无法理解 php 如何处理数组 我正在尝试使用 foreach 循环打印出一个数组 我能从中得到的似乎只有 数组 这个词 br 这会打印出以下内容 Array 我无法理解为什么会出现这种情况 如果我像上面一样预先定义一个数组 它将
  • Django:“unicode”对象没有属性“tzinfo”。仅生产服务器

    我很困惑 通过我的本地设置 python manage py runserver 一切运行正常 通过我的生产设置 wsgiserver CherryPyWSGIServer 我得到 unicode object has no attribu
  • GoogleCloudMessaging - InstanceID.getInstance(),从客户端注册

    我对 Java 编程和一般编程还很陌生 现在我决定制作自己的应用程序 该应用程序应该利用 Google Cloud Messaging 不知怎的 我成功了 但后来我意识到我使用了方法 String regid gcm register PR
  • 如何修复此分类报告警告?

    我创建了一个多类分类模型 一切都很顺利 验证准确度为 84 但当我打印分类报告时 我收到了此警告 UndefinedMetricWarning Precision and F score are ill defined and being
  • 检测 Android 上的 USB 网络共享

    有没有什么方法可以 以编程方式 在您的活动 应用程序中知道用户已在其手机上启用 USB 网络共享 您还可以使用反射来访问用于设置 USB 网络共享的隐藏功能 这是我的代码 ConnectivityManager cm Connectivit
  • Mutate_if 语法帮助 - 如何在谓词条件下添加函数参数

    寻找一些有关如何使用 dplyr 的 mutate if 语句来检查是否需要将列转换为因子变量的建议 这个函数说明了我正在尝试做的事情 问题是 当我想为函数中的 max value 参数传递一些内容时 正确的语法是什么 不起作用 我尝试更改
  • Android - 无法动态重新创建 Canvas 视图

    我试图显示在上一个屏幕中绘制的画布图像的网格视图 我有一组在第一个屏幕中绘制的不同视图 这些视图会发生变化 这些画布将根据用户的操作重新绘制 我有 5 个心形画布视图 并且我对每颗心使用不同的视图 这意味着我没有使用同一类来绘制五颗心 而是
  • Java中多项式乘以常量

    我在将多项式乘以常数 双精度 时遇到一些问题 当只有一个系数时它会起作用 但当存在多个系数时 它会给出 ArrayIndexOutOfBounds 错误并指向 setCoefficient 方法 有什么帮助吗 谢谢 public class
  • SwiftUI:呈现工作表时防止视图刷新

    我注意到添加时 SwiftUI 完全刷新了视图sheet修饰符 假设我有显示随机数的视图 我希望这个值是独立的 并且不与工作表逻辑相关 每次打开 关闭工作表时不会改变 但是每次提交 取消表格时文本都会发生变化 它应该这样工作吗 我的要点是错
  • 查询至少有 1 个关联,但返回全部

    我创建了这条记录 您可以看到它有 2 个标签 tag1 和 tag2 id d87de1d9 b048 4867 92fb a84dca59c87e name Test Name tags id fa0ca8fd eff4 4e58 8bb
  • 如何获取泛型类型参数?

    Simply public static class MyClass
  • 在 XCode 中启用代码视图的抗锯齿功能

    有没有办法让 XCode 在启用抗锯齿的情况下在编辑器中渲染文本 我在首选项对话框中看不到任何可以做到这一点的内容 XCode 文本已经是抗锯齿的 检查并确保字体大小大于以下指定的大小 系统偏好设置 gt 外观 如果大于 您可以在命令行中尝
  • 如何确保JVM中类只有一个实例?

    我正在开发一种设计模式 我想确保这里只是Java虚拟机中类的一个实例 通过一个点汇集对某些资源的所有请求 但我不知道这是否可能 我只能想出一种方法来计算类的实例并在创建第一个实例后销毁所有实例 这是正确的做法吗 如果没有的话还有其他办法吗
  • 如何在Android TimePicker中设置间隔30分钟的开始时间和结束时间?

    我正在 android 中的 DatePicker 和 TimePicker 工作 我正在从服务器获取开始时间和时间 我可以使用以下方式以编程方式设置最大日期和最小日期这个链接 https stackoverflow com questio
  • 如何防止 contenteditable 输入事件并在 vue 中设置模型值?

    我想在 contenteditable div 上使用 vue 创建简单的所见即所得编辑器 我想将编辑器内容存储到 json 对象中 我想使用状态 模型概念 我将在编辑器模板中执行类似的操作 div div