CKEditor语言 - 使链接可点击(在只读模式下)

Question

我正在使用 CKEditor 4.5.4，我有一个按钮可以使用以下命令切换编辑器的只读状态：

var editor = CKEDITOR.replace( 'text', { height: '200px' });
editor.setReadOnly(false);

我想做的是使 CKEditor 中的所有链接在编辑器处于read-only模式时可点击 - 当read-only为 false 时，我希望链接行为正常。

目前，我正在努力使链接完全可点击 - 检查它们我可以看到它们是有效的 HTML(有一次我认为 CK 编辑器中的链接只是带有下划线的蓝色文本( - 我假设 CKEditor 正在阻止这些链接的默认操作。 这个切换可以吗？

Answer 1

这是故意行为，因为打开链接会导致一些问题。这是防止以只读模式打开链接的代码部分。

另请参阅 https://dev.ckeditor.com/ticket/6032 和 https://dev.ckeditor.com/ticket/10912，了解更广泛的背景和由此行为引起的问题。

---

您可以添加自己的链接处理程序，例如：

var editor = CKEDITOR.replace( 'editor1', { readOnly: true } );
editor.on( 'contentDom', function() {
var editable = editor.editable();
editable.attachListener( editable, 'click', function( evt ) {
var link = new CKEDITOR.dom.elementPath( evt.data.getTarget(), this ).contains( 'a' );
if ( link && evt.data.$.button != 2 && link.isReadOnly() ) {
window.open( link.getAttribute( 'href' ) );
}
}, null, null, 15 );
} );

使用像这样的 HTML：

<textarea name="editor1" id="editor1" rows="10" cols="80">  
<p>Foo Bar Baz <a href="http://ckeditor.com">CKEditor</a></p>
</textarea>

请参阅此代码笔进行测试。您还可以添加其他检查以查看href是否不为空等。

---

这不是一个完美的解决方案，因为理想情况下，我们希望浏览器处理本机打开单击的链接。但是，在大多数情况下，它应该按预期工作。 此外，它可能会导致一些安全问题，因为用户能够以任何方式操作链接 href(在编辑期间(。