Question

CKEditor的默认删除线功能运行良好，做什么是逻辑，添加＆＃34; s＆＃34;围绕具有删除线的文本的标签（我也可以让编辑器使用html5＆＃39; s＆＃34; del＆＃34;标签），但问题是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并用我想要的东西包围它。
更难的部分：如果没有选择并按下按钮，那么下面写的每个文字都必须有删除线。

经过大量研究和分析＆＃34;真实＆＃34;我得到了插件：

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属性来嵌套标签来完成此

有什么方法可以解决这个问题吗？

任何帮助都将不胜感激。

Answer 1

对我来说，看起来你正试图解决问题的错误结局。这是读者的问题，他们不会以不同的方式阅读内容。讨论内容可能有一段时间（尽管它会破坏编辑），但是当读者更新并开始正确阅读内容时会出现问题。

无论如何，如果你现在坚持要求解决方案，那么我有两个建议：

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

如何使CKEditor删除线功能可访问？

1 个答案: