- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我们在项目中使用了 TipTap 的富文本编辑器。
但是我们有一个问题,即无法正确识别空间,并且只有在每 2 次单击后才会创建一个空间。作为框架,我们使用 Vue.JS。
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import {
HardBreak,
Heading,
OrderedList,
BulletList,
ListItem,
Bold,
Italic,
History
} from 'tiptap-extensions'
import EditorMenuButton from './EditorMenuButton.vue'
export default {
name: 'editor',
components: {
EditorMenuButton,
EditorMenuBar,
EditorContent
},
props: {
value: {
type: null,
default: ' '
}
},
data () {
return {
innerValue: ' ',
editor: new Editor({
extensions: [
new HardBreak(),
new Heading({ levels: [1, 2, 3] }),
new BulletList(),
new OrderedList(),
new ListItem(),
new Bold(),
new Italic(),
new History()
],
content: `${this.innerValue}`,
onUpdate: ({ getHTML }) => {
this.innerValue = getHTML()
}
})
}
},
watch: {
// Handles internal model changes.
innerValue (newVal) {
this.$emit('input', newVal)
},
// Handles external model changes.
value (newVal) {
this.innerValue = newVal
this.editor.setContent(this.innerValue)
}
},
mounted () {
if (this.value) {
this.innerValue = this.value
this.editor.setContent(this.innerValue)
}
},
beforeDestroy () {
this.editor.destroy()
}
}
</script>
最佳答案
我们遇到了同样的问题,我们保留了 onUpdate
触发,但更改了 watch ,使其仅调用 editor.setContent
当值实际上不同时。
watch: {
value() {
let html = this.editor.getHTML();
if (html !== this.value) {
this.editor.setContent(this.value);
}
},
},
关于javascript - TipTap 编辑器中无法正确识别空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61752404/
我一直在寻找一种方法来将 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
我是一名优秀的程序员,十分优秀!