从 tiptap react (typescript) wysiwyg 中获取文本值,可以通过以下步骤实现:
import { EditorContent, useEditor } from '@tiptap/react';
import { useEffect, useState } from 'react';
import { TextSelection } from 'prosemirror-state';
useEditor
钩子函数来获取编辑器实例。例如:const MyEditor = () => {
const editor = useEditor({
extensions: [
// 添加你需要的扩展
],
// 其他配置项
});
const [textValue, setTextValue] = useState('');
useEffect(() => {
const updateTextValue = () => {
const { doc, selection } = editor.view.state;
const text = doc.textBetween(selection.from, selection.to, '\n');
setTextValue(text);
};
editor.view.addEventListener('selectionChange', updateTextValue);
return () => {
editor.view.removeEventListener('selectionChange', updateTextValue);
};
}, [editor]);
return (
<div>
<EditorContent editor={editor} />
<div>文本值:{textValue}</div>
</div>
);
};
在上述代码中,我们使用 useEffect
钩子函数监听编辑器的选择变化事件,并在事件回调函数中更新文本值。通过 doc.textBetween
方法获取选中文本的值,并将其更新到 textValue
状态中。
MyEditor
组件即可获取 tiptap 编辑器中的文本值。这样,当用户在编辑器中选择文本时,textValue
状态会自动更新为选中文本的值。你可以根据需要对获取到的文本值进行进一步处理或展示。
对于 tiptap react (typescript) wysiwyg 的更多详细信息和使用方法,你可以参考腾讯云提供的文档和示例代码:
请注意,以上答案中没有提及具体的腾讯云产品,因为 tiptap 是一个开源的富文本编辑器库,并不直接与云计算服务相关联。
领取专属 10元无门槛券
手把手带您无忧上云