- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 tiptap 创建一个文本编辑器使用 reactjs。我想在编辑器的每个“ block ”旁边创建一个按钮(paragraph
block ,blockquote
block ,codeblock
block ,...),允许用户在选定之前添加一个新的空 block 堵塞。它看起来像这样(概念编辑器):
所以我尝试这样做的方法是将光标的位置设置在当前节点的末尾:
src/components/blocks/Paragraph.js
const Paragraph = (props) => {
// ...
return {
// ...
<button onMouseDown={() => {
// ...
// props.getPos() gives the position at the beginning of the block
// props.node.nodeSize gives the "length" of the node
const endPos = props.getPos() + props.node.nodeSize;
props.editor.commands.focus(endPos);
// ...
}}>
Add block below
</button>
}
}
所以在这一点上,它起作用了。但是,当我尝试插入一个新的
node
在这个位置...
// It will insert a paragraph node containing text "New block added"
props.editor.commands.insertContent({
"type":"paragraph",
"content":[
{
"type":"text",
"text":"New block added"
}
]
})
...我收到一个错误:
TypeError: Cannot read property 'nodeType' of null
因此,为了让您详细了解此错误,我在 codesandbox.io 上制作了一个沙箱。要重现错误,您只需将注意力集中在编辑器上,随意写一些东西,然后单击
+
按钮。您应该看到错误。
最佳答案
当前解决方案
目前我找到的最佳解决方案:
const endPos = props.getPos() + props.node.nodeSize
// I focus the start of the editor because
// when the cursor is at the end of the node below which
// we want to add a block, it doesn't focus the next block
props.editor.commands.focus('start')
props.editor
.chain()
.insertContentAt(endPos, {type: "paragraph"})
.focus(endPos)
.run()
关于javascript - tiptap - 在当前节点下方/末尾插入节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68146588/
我一直在寻找一种方法来将 Enter 的默认行为更改为与 Shift + Enter 相同。要得到而不是新的 是否有可能以某种方式改变这种行为? 最佳答案 this.editor = new Edi
我们在项目中使用了 TipTap 的富文本编辑器。 但是我们有一个问题,即无法正确识别空间,并且只有在每 2 次单击后才会创建一个空间。作为框架,我们使用 Vue.JS。 import { Edito
我需要一些帮助将提及 实现到实时协作服务器 (https://tiptap.dev/suggestions) 中。我的代码是这个的修改版本:https://glitch.com/edit/#!/tip
我目前正在尝试使用名为 tiptap 的库实现可视化编辑器。 https://v1.tiptap.dev/ 我认为 v2 是最常见的 tiptap,但也有必须使用 v1 的情况。 然而,当我将纯文本粘
我正在尝试使用 tiptap 创建一个文本编辑器使用 reactjs。我想在编辑器的每个“ block ”旁边创建一个按钮(paragraph block ,blockquote block ,cod
我有一个使用 tiptap 的协作聊天应用程序因为它是消息区域。我发现它很有用,因为它已经支持多种格式并且可以增加一些灵 active 。但是,我发现自己在寻找监听“输入”键的事件监听器时遇到了困难。
我想将一些 html 放入 tiptap 编辑器中,因为我想编辑我之前保存的内容。但是如果我里面有一些内联样式,tiptap 会删除它。有人知道我可以用它做什么吗? this.editor.setCo
我试图绑定(bind)editor.content直接到this.newTutorial.content但还没有运气.. 在控制台中: 这是我的代码: img.preview { width:2
我正在尝试获取输入到 wysiwig 中的文本以将其存储到我的数据库中。 我尝试了很多不同的东西,这是我最近的一次迭代: setState({ ...state, content: evt.targ
我正在尝试获取输入到 wysiwig 中的文本以将其存储到我的数据库中。 我尝试了很多不同的东西,这是我最近的一次迭代: setState({ ...state, content: evt.targ
使用 TipTap,我试图避免添加 , 但创建一个 相反,焦点在 | 内当用户点击 shift-Enter但我无法让它发挥作用。 这是我到目前为止所做的: new (class extends Ex
我正在尝试使用 TipTap与 Nuxt但似乎无法弄清楚为什么它不起作用。我已经阅读了存储库上的问题并使用了他们的建议,但我只是收到这些错误: ERROR in /Volumes/Projects/
我正在尝试将 tiptap 与 Vue.js 结合使用 创建单个文件组件 (SFC) 的方法。 TextEditor.vue import { useEditor, EditorConte
我正在尝试将 tiptap 与 Vue.js 结合使用 创建单个文件组件 (SFC) 的方法。 TextEditor.vue import { useEditor, EditorConte
我是一名优秀的程序员,十分优秀!