问题标签 [ckeditor5]

我正在使用 CKeditor5 的内联编辑器构建。

我使用 AJAX 发布表单字段并从我的后端接收数据，我想将这些数据添加到字段中。

在我的 html 头中，我有 CKEditor5 内联编辑器 CDN，然后是引导程序，然后链接到 style.css。在我的 body 标签之前，我有 Jquery CDN，然后是 script.js 的链接

编辑器.php

我的 javascript 文件和特定的 ajax 调用：

但是我在控制台中得到了这个：script.js:82 Uncaught ReferenceError: CKEDITOR is not defined

我正在尝试处理来自 CKEditor 5 的插入事件。

在编辑器中输入时，会调用回调。事件回调中的data参数大致如下所示：

我看不到一种方便的方法来确定实际插入的文本。我可以调用data.range.root.getNodeByPath(data.range.start.path);which 似乎可以让我找到插入文本的文本节点。然后我们应该查看文本节点的data字段吗？我们是否应该假设路径中的最后一项始终是范围开始和结束的偏移量并将其用于子字符串？我认为插入事件也会被触发以插入非文本类型的东西（例如元素）。我们怎么知道这确实是事件的文本类型？

有什么我遗漏的东西，还是有不同的方法可以一起完成这一切？

我只是在尝试新的 CKEditor 5，在使用使用 webpack 的laravel-mix编译代码后，图标被提取到目录下的公共目录中fonts，但是当我加载编辑器时 - 它们没有显示。

是否有任何 webpack 配置我可以用来指定我希望它们保存在哪里，我不太清楚如何解决图标不显示的问题。

我正在从 CKEditor 4.7 迁移到 5。

在 CKE4 中，我会做这样的事情： CKEDITOR.replace('text_area'); 然后在另一个 JS 函数中，我可以通过 CKEDITOR.instances.text_area.getData().

但CKE5似乎没有功能ClassicEditor.instances或类似的东西。

我知道我可以将编辑器实例存储为全局 JS 变量，但是我正在使用的代码在通用函数中创建编辑器，所以我不能只创建一个全局变量，因为我不知道编辑器的名称先验。屏幕上还可以同时有多个处于活动状态的编辑器。

CKE5 中是否没有类似于旧的可以让我从它替换的 textareainstances中获取编辑器实例的旧版本？id

我想我可以创建自己的全局数组来保存编辑器实例，但如果有内置的东西并得到更好的支持，我宁愿不这样做

我已经使用了这个解决方案https://github.com/mswilson4040/ckangular，它解决了我的 ckeditor 不能在 Angular 中工作的问题。在这里，他们首先为将在其上创建其实例的编辑器创建 html，然后调用 ckedtor create 函数。现在我有一个模式，其中首先呈现 html，然后我需要创建 ckeditor 实例。我目前正在使用下面的代码来实现这一点：

这个函数的问题是它一次又一次地无限调用，我的应用程序挂起。

Seconfly 我已经安装了 ng-onload 包，但我不知道如何在 //where 将创建编辑器实例的地方导入和使用它。

在这两种情况下的快速帮助将不胜感激。

是否有任何方法可以以编程方式将文本或 HTML 插入编辑器？我想插入一个视频，我将其拖放到编辑器实例中。它与图像和链接完美配合，我在其中执行以下操作：

我可以以编程方式将插入的数据更改为 img 或设置锚点 href。所以我想我可以手动插入一些 HTML 来添加视频。

有没有办法设置idCKEDITOR 5 ClassicEditor 的主体属性？

在 cke4 中，BodyID您可以在创建编辑器实例时设置一个配置选项，但我无法在文档或 SO 上找到与 cke5 类似的内容。

我需要附加Countable.js到编辑器以执行字数统计并将该信息提供给代码的其他部分（我无法控制）

我可能会同时在页面上激活多个编辑器。

我正在尝试使 h1 标签可编辑。

我的 HTML 是

而我的 JS 是

这是一个 JSFiddle：https ://jsfiddle.net/r66uhfee/3/

如果您查看源代码，您会看到h1标签p在编辑后有一个元素。如何禁用此行为？

我通过 npm 在我的项目中安装 CKEditor 5：

npm install --save @ckeditor/ckeditor5-build-classic

然后我按照文档安装一些插件，例如：对齐

请参阅对齐插件安装文档

npm install --save @ckeditor/ckeditor5-alignment

我像这样更改我的代码：

然后出了点问题：

我认为是版本的原因，在官网上看到了ckeditor5-build-classic 版本信息：

以及插件Alignment 版本信息：

1. 我做错了吗？
2. CKEditor 5 是否因为 alpha 版本不完整？
3. 在 alpha 版本中使用 CKEditor 5 是否合适？

我定义了一种新型的模型元素作为插件；让我们将其称为Foo. 模型中的Foo节点应转换为section视图中的元素。到目前为止，一切都很好。我设法通过定义简单的转换规则来做到这一点。我还设法定义了一个FooCommand将选定块转换（重命名）为Foo.

我试图将这些Foo模型节点上的属性转换为视图元素上的属性（反之亦然）时遇到了困难。假设 Foos 有一个名为的属性fooClass，它应该映射到视图元素的class属性。

我可以在 中成功接收参数FooCommand，但我似乎无法在命令正在处理的块上设置它们：

下面是插件中init函数的代码Foo，包括模型→视图和视图→模型转换：

当我尝试通过

我可以看到该green-foo值可用于FooCommand，但modelElement在模型→视图转换中，另一方面，没有fooClass属性。

我确定我在这里遗漏了重点并滥用了 API。如果有人能对这个问题有所了解，我将非常感激。我可以根据需要提供更多详细信息。

初步建议后的跟进

感谢@Reinmar 和@jodator 关于配置文档模式以允许自定义属性的建议。我真的以为这会解决它，但没有。无论如何这可能是一个必要的步骤，但是在模型→视图转换期间我仍然无法从模型元素中获取属性值。

首先，让我添加一条我遗漏的重要信息：我正在使用的 CKEditor5 的版本是1.0.0-alpha2。我知道一些 API 必然会发生变化，但我仍然希望使用当前版本。

模型→视图转换

如果我理解正确，可以将 astring或 a传递function给toElement调用。关于使用后者的一个问题：传递给函数的参数到底是什么？我假设它将是要转换的模型元素（节点？）。是这样吗？如果是这样，为什么在请求时通过batch.setAttribute（内部）在该节点上设置的属性不可用？document.enqueueChanges应该是吗？

排序问题？

额外的测试似乎表明发生了某种执行顺序问题。我观察到，即使当我第一次尝试从modelElement参数中读取该属性时该属性不可用，但如果我稍后再次读取它就会如此。让我试着说明下面的情况。首先，我将修改转换代码，使其使用一些虚拟值，以防读取时属性值不可用：

现在我重新加载页面并在控制台上执行以下指令：

尽管看起来正在生成预期的输出，但看一眼生成的视图元素就会发现问题：

最后，即使我尝试重置fooClass模型元素的属性，更改也不会反映在视图元素上。这是为什么？不应该通过更改enqueueChanges导致视图更新吗？

对不起，很长的帖子，但我试图传达尽可能多的细节。希望有人能发现我对 CKEditor 5 的 API 实际工作方式的错误或误解。

视图不更新？

我转向Document's events并尝试了该changesDone事件。它成功地解决了“时间”问题，因为它只有在处理完所有更改后才会始终触发。尽管如此，视图没有响应模型变化而更新的问题仍然存在。为了清楚起见，模型确实发生了变化，但视图并未反映这一点。这是电话：