wysiwyg - 如何将表情符号添加到 ProseMirror?
问题描述
我开始使用 prosemiror,但我正在努力寻找它的扩展。即使是标签、提及或表情符号等基本扩展也很难找到。我错过了这个编辑器的东西吗?我知道它非常成熟(试图放弃草稿以支持它),但我可能会在这里错过一些东西。
解决方案
ProseMirror是一个成熟的框架,但它不像 Draft.js 那样容易拖放,因为您必须为表情符号、标签、提及等构建自己的节点。
最初需要阅读大量文档,但是一旦掌握了知识,构建这些文档就会很容易。
让我们以表情符号为例。我们可以从这里改编恐龙示例:https ://prosemirror.net/examples/dino/ 。
首先,我们必须为表情符号定义一个 NodeSpec ( https://prosemirror.net/docs/ref/#model.NodeSpec )。
const EmojiSpec = {
attrs: {char: {}}, // dynamic values here
inline: true,
group: "inline",
draggable: false,
selectable: false,
parseDOM: [{ // how does prosemirror recognize an emoji if its being pasted from clipboard?
tag: "img[emoji]",
getAttrs: (dom: HTMLImageElement) => {
return {char: dom.getAttribute("alt")};
}
}],
toDOM: (node: PMNode) => { // how should prosemirror render the emoji based on the node values?
return ['img', {class: "emoji", draggable: "false", alt: node.attrs.char}]
},
}
这是一个松散的实现。在生产中,您希望src
根据这样的node.attrs.char
值计算图像
toDOM: (node: PMNode) => {
const src = getImageSrc(node.attrs.char)
return ['img', {class: "emoji", draggable: "false", alt: node.attrs.char, src}]
},
一旦你有了这个表情符号 NodeSpec,你想将它与你的其他自定义节点(如标签提及)和标记(链接、斜体、粗体)结合起来,以创建一个插入到编辑器中的 Schema。从这里跟随恐龙教程的其余部分。
祝你好运!
如果您仍然卡住,我强烈建议您查看基于 ProseMirror 构建的库,例如tiptap 和rich-markdown-editor,以查看 ProseMirror 的集成和使用情况。
推荐阅读
- sql - 如何在 Oracle SQL 中连接多个临时表(使用 with 子句)
- ios - NativeScript 按钮在 iOS 上不工作但在 Android 上工作
- node.js - Angular 8:当我尝试 ng 服务时出现 internal/modules/cjs/loader.js 错误
- node.js - 将数据从反应组件传递到代理(节点服务器)
- python-3.x - 使用 argparse 从脚本调用函数而不使用子进程
- wordpress - 我应该包括哪个 fontawesome 文件以及为什么其他文件不起作用
- python - 在我的班级中导入模块的正确方法是什么
- python - 如何使用python烧瓶从维基百科页面获取表格数据
- reactjs - 为什么没有定义“handlePost”?
- environment-variables - 如何在开始管道代码之前使用共享库在 jenkinsfile 中注入环境变量?