如何在CKEditor 5中单向处理视图的html数据?

时间:2019-07-03 13:32:08

标签: javascript ckeditor ckeditor5

在作者的CKEditor视图中,我需要更改文件的链接,以便附加作者的会话ID。但是,在普通用户的实际内容中,会自动添加特定的用户ID。因此,作者ID一定不能保存在使用CKEditor编辑的内容中,而仅在编辑时在视图中存在即可,例如,他可以看到图像。保存后,无需保存任何ID的“干净”链接。

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

但是我找不到分别的简单示例来实现此目的。 (我的尝试变得非常复杂,无法正常工作...)我猜这是一个非常普遍的用例,所以也许我忽略了某些事情。有一个好的解决方案吗?


更新1:
示例链接为:


更新2:
在与CKEditor进行进一步合作时,我遇到了更多类似这样的事情,从开发人员的角度来看,这简直是令人不快的。看来这是设计使然,因为来自贡献者“ fredck”的报价:

  

[...]我们希望将编辑器从“ HTML编辑器”中脱颖而出,使其成为“高质量内容编写”的完美解决方案。

这意味着,如果您是开发人员,并且拥有具有高级用例的高级用户(如果您使用Stackoverflow,则可能是这种情况),那么您不是目标受众,并且不应首先使用CKEditor

例如,您可以在此处的讨论中阅读有关此内容的更多信息(它还涉及其他功能):https://github.com/ckeditor/ckeditor5/issues/592

1 个答案:

答案 0 :(得分:1)

要修改下载的链接,您可以编写一个自定义的降频转换器,该转换器会修改获得的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的更改做出反应(仅当无论如何都获得数据时才触发,因为它是dataDowncast)。在实际的Link插件创建输出之前,侦听器将以'high'优先级触发更改URL。首先检查是否不使用给定的模型元素,但不使用它,因为我们要保留将再次处理该元素的本机行为。该属性值通过时间戳扩展,此时间戳结束此侦听器。之后,将触发具有'normal'优先级的本地行为。

使用了类似的方法来实现custom link attributes。有关调度程序和转换过程的更多信息,请参见: