javascript - 如何在CKEditor 5中单向处理 View 的html数据?

标签 javascript ckeditor ckeditor5

在作者的 CKEditor View 中,我需要更改文件链接,以便附加作者的 session ID。然而,在普通用户的实际内容中,会自动添加特定的用户 ID。因此,作者 ID 不得保存在作者使用 CKEditor 编辑的内容中,它只需在他编辑时存在于 View 中,以便他可以看到图像等。保存时,无需保存任何 ID 的“干净”链接。

在 CKEditor 5 中,似乎有更多的可能性来实现这种单向数据过滤,例如使用

但是我找不到一个很好的例子,分别是一个简单而干净的方法来实现这一点。 (我的尝试结果变得非常复杂并且无法正常工作......)我猜这是一个非常常见的用例,所以也许我忽略了一些东西。有什么好的解决办法吗?


更新 1:
示例链接为:


更新2:
当我进一步使用 CKEditor 时,我遇到了更多类似的事情,从开发人员的 Angular 来看,这些事情非常令人不快。这似乎是设计使然,因为引用了贡献者“fredck”:

[...] we want to bring the editor out of the "HTML Editor" thing, making it the perfect soluting for "quality content writing".

这隐含地意味着,如果您是开发人员并且拥有具有高级用例的高级用户(如果您在 Stackoverflow 上,则可能会出现这种情况),那么您不是目标受众,并且一开始就不应该使用 CKEditor .

您可以在此处的讨论中阅读更多相关信息(也是关于另一个功能):https://github.com/ckeditor/ckeditor5/issues/592

最佳答案

要修改下载的链接,您可以编写一个自定义向下转换转换器,它会修改获取的 href。 下面是一个工作示例,它将当前时间戳添加到 URL: https://codepen.io/msamsel/pen/zVMvZN?editors=1010

editor.conversion.for( 'dataDowncast' ).add( dispatcher => {
    dispatcher.on(
        'attribute:linkHref',
        ( evt, data, conversionApi ) => {
            if ( !conversionApi.consumable.test( data.item, 'attribute:linkHref' ) ) {
                return;
            }

            if ( data.attributeNewValue ) {
                data.attributeNewValue += `#time=${ ( new Date() ).getTime() }`;
            }
        },
        { priority: 'high' }
    );
} );

简单介绍一下它是如何工作的。
创建了对 attribute:linkHref 更改使用react的监听器(仅当获取数据时才会触发它,因为它是 dataDowncast)。在实际的 Link 插件创建输出之前,监听器以 'high' 优先级触发以更改 URL。首先检查给定的模型元素是否未被消耗,但不消耗它,因为我们希望保留将再次处理同一元素的 native 行为。该属性值扩展有时间戳,完成此监听器。之后,将触发 native 行为,该行为具有'正常'优先级。

使用类似的方法来实现 custom link attributes 。有关调度程序和转换过程的更多信息可以在这里找到:

关于javascript - 如何在CKEditor 5中单向处理 View 的html数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56871360/

相关文章:

javascript - 切换样式表闪烁

javascript - CKEDITOR 对 Bootstrap 表的支持

jquery - 如何将 CKEditor 集成到 Asp.net MVC 中

javascript - 如何在 ckeditor5 中更改 Entermode br 而不是 p?

ckeditor - 上传适配器未定义 ckeditor5-angular 中的图像上传问题

javascript - 如果div包含img且src包含x,则隐藏div?

Javascript d3 : Is there a way to programmatically stop dragging an item?

javascript - 是否可以重新定位一个位置:absolute DIV?

javascript - 如何从 ckeditor 中删除特定按钮

javascript - 在ckeditor5-react中上传图片