温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - How to one-way process html data for the view in CKEditor 5?

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

发布于 2020-03-27 10:32:32

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

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

However I couldn't find a good example respectively an easy and clean approach to achieve this. (My tries turned out to become quite complicated and didn't work properly...) I'd guess this is a quite common use case so maybe I'm overlooking something. Is there a good solution to this?


Update 1:
Example links would be:


Update 2:
While I was working further with CKEditor I came across more things like this which simply are very unpleasant from a developers point of view. And it seems this is by design, since quote from a Contributor 'fredck':

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

Implicitly this means, if you are a developer and you have advanced users with advanced use cases (which may be likely the case if you are on Stackoverflow) you are not the target audience and shouldn't use CKEditor in the first place.

You can read more about this for example in the discussion here (also it is about another feature): https://github.com/ckeditor/ckeditor5/issues/592

查看更多

查看更多

提问者
Jey DWork
被浏览
20
Mateusz Samsel 2019-07-09 06:05

要修改下载的链接,您可以编写一个自定义的降频转换器,该转换器修改了获得的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)。'high'在实际的Link插件创建输出之前,侦听器将优先触发以更改URL。首先检查是否不使用给定的模型元素,但不使用它,因为我们要保留将再次处理该元素的本机行为。该属性值通过时间戳扩展,此监听器将完成此操作。之后,将触发本机行为,该行为具有'normal'优先权。

使用类似的方法来实现自定义链接属性有关调度程序和转换过程的更多信息,请参见:

发布
问题

分享
好友

手机
浏览

扫码手机浏览