gpt4 book ai didi

javascript - 如何使 CKEditor 删除线功能可用?

转载 作者:行者123 更新时间:2023-11-28 07:52:54 24 4
gpt4 key购买 nike

CKEditor 的默认删除线功能效果很好,并且可以执行逻辑操作,在有删除线的文本周围添加一个“s”标签(我也可以让编辑器使用 html5 的“del”标签),但问题是辅助功能如果没有特殊设置,NVDA 或 JAWS 等阅读技术不会以与普通文本有任何不同的方式读取此类内容。我想做的是在删除线文本的开头和结尾添加一个 span 标签,向用户表明这一事实:

<p>
<span style="height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px;">Start strikethrough. </span>
<s>Text with strikethrough</s>
<span style="height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px;">End strikethrough. </span>
</p>

正如您在这段代码中看到的,跨度在页面中不可见,但读者将遵循 dom 顺序,因此用户将收到删除线的提醒。我知道你可以构建一个插件来插入任何 html,但我必须以与基本样式按钮相同的方式工作,并具有切换功能:

  • 简单的部分:如果内容中有一个选择并且按下了按钮,我们必须删除内容。这个更容易,因为我们可以获取选定的 html 并用我想要的内容包围它。
  • 更难的部分:如果没有选择并且按下按钮,那么接下来写入的每个文本都必须有删除线。

经过大量研究和分析“真正的”插件是如何制作的,我得出了这样的结论:

CKEDITOR.plugins.add( 'customStrike', {
icons: 'customStrike',
init: function( editor ) {
var style = new CKEDITOR.style( { element: 's' } );

editor.attachStyleStateChange( style, function (state) {
!editor.readOnly && editor.getCommand( 'customStrike').setState(state);
} );

editor.addCommand( 'customStrike', new CKEDITOR.styleCommand( style ) );

if ( editor.ui.addButton ) {
editor.ui.addButton( 'CustomStrike', {
label: 'Strike Through',
command: 'customStrike',
toolbar: 'custom'
} );
}
}
});

这与真正的插件完全相同,我尝试解决此代码,但据我所知,样式定义中的 element 属性仅接受一个标签,我需要一种使用 element 属性来嵌套标签的方法来完成这个。

有什么办法可以解决这个问题吗?

如有任何帮助,我们将不胜感激。

最佳答案

对我来说,您似乎正在尝试解决问题的错误结局。读者的问题是他们没有以不同的方式阅读内容。破坏内容可能会暂时有所帮助(尽管这会破坏编辑),但当读者更新并开始正确阅读内容时,就会出现问题。

无论如何,如果您坚持现在就找到解决方案,那么我有两个建议:

  • 您可能可以在 s/del 标记上设置某些 ARIA Angular 色或其他属性,这会以某种方式影响读者。
  • 不要破坏编辑器内的内容,因为你会破坏它。例如,您可以在将内容发送给最终用户之前对其进行处理(如果这是您想要修复的部分)。

关于javascript - 如何使 CKEditor 删除线功能可用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26559390/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com