问题标签 [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.

0 投票
1 回答
1780 浏览

javascript - SlateJS 编辑器:保存和显示内容

以下片段是我的 SlateJS 实现。

在应用程序某处的文章详细信息页面上,我想嵌入此编辑器(表情符号)组件,将与该文章 ID 相关的相应值道具传递给它。不幸的是,现在 Emoji 组件的设置方式,我无法传入 value props。Emoji-Editor 将始终考虑 Value.json 或现有的 localStorage 值。

如何在 Emoji 组件中注入值?

旁注: 还有哪些其他可能的实现方式?实现渲染功能而不是利用表情符号(编辑器)组件是否更有意义?

0 投票
1 回答
1067 浏览

javascript - 设置 Slate.js

我正在尝试使用以下代码设置一个简单的 slate.js 编辑器:

我只是从 slate.js walkthorugh 复制粘贴的代码,但我收到以下错误:

这是我第一次同时使用 react 和 slate,我只是想感受一下。我希望你能帮我解释什么是错的:)

0 投票
1 回答
2432 浏览

javascript - 当前更改完成后,有没有办法更新 Slate 更改?

基本上,如果光标/选择在那里,我想制作可以从末尾更新的内联。但是,它似乎覆盖了更改,例如从末尾删除内联。

我试图做这样的事情(在 slate-sticky-inline 的指导下)

JSFiddle或者我认为是下面的相关代码

我希望有人可以帮助我了解这里出了什么问题,并可能解释我的误解。我还用我的插件创建了一个准系统 jsfiddle。您会注意到,如果您尝试删除“@help”末尾的“p”,它会阻止您这样做。

0 投票
0 回答
1169 浏览

slate.js - 如何在 Slate.js 编辑器中的精确块之后添加另一个块?

此代码使用匹配的文本更改块的类型。
如何在这个之后添加另一个块Slate.js

0 投票
1 回答
1110 浏览

reactjs - Slate:推送到数据库并在 Web 中显示

如何使用 slate.js 将编辑器的内容推送到数据库,如何获取该内容以便它出现在我的网页上?

0 投票
1 回答
1401 浏览

mathjax - 在 slate js 中添加内联块(数学方程)

我正在使用 slate js 富文本编辑器,一切都按预期工作。我正在使用单独的编辑器来插入数学方程,它是如何工作的

  1. 用户在石板编辑器中编写文本
  2. 然后插入方程用户在数学编辑器中编写方程并单击插入方程
  3. 单击此按钮后,我添加了新块,例如

    change.insertInline({ type: 'equation', data: { math: editor.getMathML() } })

并通过 renderNode 函数处理块的渲染

还有一个块继续在编辑器中写作change.insertBlock('paragraph')

功能方面,一切都按预期工作,但是由于我将方程式添加为块石板,因此将其渲染为新行。

我的问题是

  1. 如何在同一行渲染 customBlock
  2. 除了change.insertBlock('paragraph')
0 投票
2 回答
1110 浏览

javascript - 在 SlateJS 工具栏中看不到图标

我正在尝试重现Slate Examples中显示的示例。除了工具栏的外观,我拥有编辑器和所有功能。我已经导入了 'emotion' 和 'react-emotion' 库。但我没有看到呈现的图标,而是看到代替它们的文本: 在此处输入图像描述

我在定义图标的“components.js”中看到以下代码:

` 是否需要导入任何其他库才能显示图标或进行任何其他配置?

0 投票
2 回答
1362 浏览

javascript - 基于 slate.js 的 reactjs 富文本编辑器逆向工程

这一切都始于在 youtube 上观看两个 slate.js 演示视频

  1. https://www.youtube.com/watch?v=8K-qYdOPKT4
  2. https://www.youtube.com/watch?v=BMID1FbEZSk&t=3s

他的名字是 Andrei Fiodorov,他在这些演示中展示了他的富文本编辑器是如何使用 slate.js 库工作的。在评论部分,他分享了一段代码,这是对整体代码的一瞥。我在这里开始了一个沙盒笔

https://codesandbox.io/s/rvp8j5q7n

看起来他在他的项目中使用了 Materialize 和 npgrogress。我是 React 的菜鸟。我对 Andrei Fiodorov 先生成功创建的漂亮 UI 很感兴趣。但不幸的是还不能渲染页面。如果有人可以帮助我呈现 UI,我将不胜感激。

0 投票
2 回答
3793 浏览

reactjs - 使用 slatejs 在编辑器中的光标处插入图像

我正在尝试使用 reactjs 和 slate.js 实现富文本编辑器。到目前为止,我能够使大多数功能正常工作,但是无法将图像添加到光标处的文档中不起作用(但是,在文档开头插入图像是有效的)。

当我试图将它插入任何其他点时,我都会收到错误。在渲染部分,即执行编辑器的 onchange 方法。

我的代码基于链接https://github.com/ianstormtaylor/slate/blob/master/examples/images/index.js

请帮忙。

0 投票
1 回答
3237 浏览

javascript - 如何使用 Slate.js 将光标移动到当前行的末尾?

我想模仿 macOS 中的行尾快捷方式行为。我有这个:

问题是现在偏移索引固定5change.moveTo(5).

如何找到当前行最后一个字符的索引?