Question

我正在一个权限决定你拥有的内容编辑级别的环境中运行CKEditor。一个要求是按钮显示给每个人，但某些按钮的点击事件被禁用。

我尝试了很多jQuery解决方案（attr，off，preventDefault，prop等），但它们都没有工作，至少我是如何尝试的。

CKFinder生成的示例HTML，“添加图片”按钮：

<a id="cke_22" 
    class="cke_button cke_button__image cke_button_off " "="" 
    href="javascript:void('Image')" title="Image" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_22_label" aria-haspopup="false" 
    onkeydown="return CKEDITOR.tools.callFunction(56,event);" 
    onfocus="return CKEDITOR.tools.callFunction(57,event);" 
    onmousedown="return CKEDITOR.tools.callFunction(58,event);" 
    onclick="CKEDITOR.tools.callFunction(59,this);return false;">

    <span class="cke_button_icon cke_button__image_icon">&nbsp;</span>
    <span id="cke_22_label" class="cke_button_label cke_button__image_label">Image</span>
</a>

我在他们的文档中找不到CKEditor解决方案，但我可能错过了一些东西。如果一些额外的Javascript可以破坏链接，我可以在CKEditor之外修复。

Answer 1

您需要使用CKEditor API才能正确执行此操作。通过jQuery禁用按钮是个坏主意，因为这样你就不会阻止键盘快捷键，上下文菜单位置，你也会破坏a11y功能（例如，用键盘导航工具栏会被打破）。

要禁用，例如链接和图片功能使用此代码：

CKEDITOR.replace( 'editor1', {
    on: {
        loaded: function( evt ) {
            var editor = evt.editor;

            editor.getCommand( 'image' ).on( 'state', function() {
                this.disable();
            } );
            editor.getCommand( 'link' ).on( 'state', function() {
                this.disable();
            } );
        }
    }
} );

确保禁用每个状态更改命令。

提示：如果您不确定要禁用的命令名称是什么，请查看editor.commands对象，该对象可能会给您一些想法。

Answer 2

如果它足够你，以图像为例，你可以简单地核对所有的处理程序。我不知道CKE是否会定期恢复它们，但如果没有，你可以做这样的事情

jQuery('.cke_button__image')
    .attr('onkeydown','')
    .attr('onmousedown','')
    .attr('onclick','');

它适用于CKEditor演示。如果属性重新出现，只需重复该过程。请注意，这不是一个真正的安全答案。任何一个不太合适的黑客都会轻易绕过这些限制，但它会填补你的后果。

显示但禁用wysiwyg按钮

2 个答案: