问题标签 [slatejs]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - 真正在移动设备中运行的 React 富文本编辑器?
我需要在 React 应用程序中实现富文本编辑器。一般选择是 Draft、Slate 等。我可能尝试了所有“前 15 名”编辑器。大多数在Android上都失败了。草稿只是无法使用。许多人在选择文本时有非常奇怪的行为。Quill 没问题,但是由于某种原因,粘贴一大段 html 需要 10 秒,而不是 <1 秒。我不需要表格、图像或视频之类的东西。只是带有格式的文本。
有没有什么东西可以做像粗体/斜体/对齐这样的基本功能并允许自定义功能但在移动设备上坚如磐石并且还具有适当的反应界面?
我之前在一个基于 jQuery 的网站上使用了 Trumbowyg,它既好又简单。我不得不对其进行一些调整以处理粘贴 word 文档之类的内容,但至少该界面不需要一个月的时间来学习。
理想情况下,我的 RTE 将具有以下功能: 1 - 简单的界面 2 - 在 ios/android 上坚如磐石(尽可能给定限制) 3 - 支持具有自定义功能的自定义工具栏按钮 4 - 清理疯狂粘贴的 html(如 MS Word)或至少公开一些让我清理它的界面 5 - 有一个适当的反应界面
reactjs - 将 SlateJs 转换为 pdf 的最佳方法
我不知道是否是最好的方法,但我尝试使用 jspdf 将 slate js 转换为 pdf。o 意识到这并不容易。将 slate js 'Value' 转换为 jspdf 可能非常复杂。有人知道是否有其他方法可以将 slate js 转换为 pdf,插件、函数或模块可以帮助我。
谢谢
slatejs - 如何在 Slate JS 中的 Transforms.insertNodes() 之后设置选择
我正在尝试在当前选择下方添加一个新行,然后将选择放入新行。
但这出现了一个错误:错误:无法从 Slate 节点解析 DOM 节点:{“text”:“”}。有谁知道如何解决它或有其他方法来实现它?谢谢!
slatejs - Slatejs 如何使一个特定节点不可编辑?
我想设置一个特定节点不可编辑
但它似乎不起作用。有谁知道该怎么做?谢谢!
reactjs - 有什么办法可以避免在 React 应用程序的页面加载时加载 npm 包
我在我的项目中使用了一些大型 npm 包(slate.js)。问题是,slate(和其他 npm 包)会在页面加载时自动加载,即使它只在延迟加载的组件中使用。
我试图避免加载 pageload slate 和其他一些包。
到目前为止,我在我的 webpack 配置中使用了 sideEffects 和 usedExports,但我无法完成任何有用的事情。Webpack 仍然会自动将 slate 和其他 npm 包自动放入 vendor.js 中,并将其注入到已发布的 html 文件中(我相信使用 HtmlWebpackPlugin)
(仅供参考,我正在使用 CRA 以及 webpack 的配置覆盖)
我不认为这段代码有用,但这是我的 webpack 优化属性。
javascript - TypeError:Text.isText 不是函数
我正在关注https://docs.slatejs.org/walkthroughs/04-applying-custom-formatting上的石板教程
有一个函数调用 Text.isText(n),我不断收到 Type:Error Text.isText is not a function
reactjs - SlateJS Typscript node.children url and type property does not exist
TLDR:
Error message for SlateJS serializing to HTML
Property 'children' does not exist on type 'Node[]'
.
Going off on SlateJS Serializing Docs but in tsx.
I'm getting the following property error for children, type and url.
Property 'children' does not exist on type 'Node[]'
Property 'type' does not exist on type 'Node[]'
Property 'url' does not exist on type 'Node[]'
In my rich editor I have:
I already have the type dependencies.
"@types/slate-react": "^0.22.9"
"@types/slate": "^0.47.7",
javascript - 在 onCopy 钩子(插件)中获取复制的内容
我试图onCopy
徒劳地将复制的片段放入钩子中。
我一直在尝试event.clipboardData...
但它似乎是空的。我也尝试过使用getEventTransfer
utils。但它返回{type: 'unknow'}
这是我一直在测试的CodeSandBox 。
reactjs - 如何使用 React 测试库测试 `contenteditable` 事件
我正在尝试为我们的富文本组件之一编写测试,该组件是在 react js 中使用 slate js 编辑器实现的。因此,在编写测试时,我正在检索元素 div[contenteditable='true'],但无法模拟变化、模糊、焦点等事件。附加到编辑器组件的处理程序不会被调用。我尝试了多种组合,但没有运气。有人可以帮忙吗?是否可以使用测试库模拟 contenteditable 元素的事件(contenteditable 是使用 slatejs 实现的)?
graphql - Keystone.js 内容字段类型渲染最佳实践
我有一个 Content 类型的字段,我想将其呈现为 html。从 GraphQL 端点,我收到一个 slate.js 结构,例如
其中 contentExtended 是我的字段的名称。
请注意,该文档还包含对 GraphQL 查询结果中其他地方的 cloudinaryImage 的引用,因此我假设 Keystone.js 知道如何呈现它。
我想以最少的努力将其呈现为我将在我的博客应用程序中使用的 html 代码。
这样做的推荐和正确方法是什么?
作为参考,我有 keystone graphql 模式;我正在使用 allPosts 查询获取帖子。
https://gist.github.com/Firfi/42c9fd94c738cb463e4d7e7e28de751b