Question

我想使用CKEditor的Javascript API将内部文件链接插入正在编辑的文本中。（与单击“链接”图标并选择“图像或文件的内部链接”时相同）

我尝试过使用insertText和insertHtml，问题是特殊字符（[，]等）被转义。

var inst = CKEDITOR.instances.wpTextbox1;
inst.insertText('[[:File:'+file.name+']]');
inst.insertHtml('[[:File:'+file.name+']]', '', '', '' );

我已经尝试切换编辑器的模式，但似乎insertText和insertHtml只能在wysiwyg模式下工作。

var inst = CKEDITOR.instances.wpTextbox1;
var oldmode = inst.mode;
inst.mode = 'source';
inst.insertText('[[:File:'+file.name+']]');
inst.insertHtml('[[:File:'+file.name+']]', '', '', '' );
inst.mode = oldmode;

“链接”按钮实际上为此起作用了什么？

如果Link按钮可以做到，我相信我应该使用JS API ...

Answer 1

好的，这个问题的层次比我原先想象的要多。

我也忘了提到这是CKEditor包含在MediaWiki的WYSIWYG扩展中。

所以我们有

MediaWiki及其API（webservice）
CKEditor（作为MediaWiki扩展）及其JS API
CKEditor插件（就像Mediawiki使用扩展，CKEditor可以有插件）

现在，当您处于CKEditor的WYSIWYG模式时，您实际上是在后台创建HTML。保存（或切换到源模式）时，CKEditor会将其转换为wikitext。

因此，例如，如果您希望最终的Wiki文档包含图像，并且您想通过CKEditor JS API添加它，则必须使用insertHtml()：

insertHtml('<img src="" _fck_mw_filename="x"');

这里的关键是CKEditor使用的特殊属性_fck_mw_filename。（见于PATH_TO_MEDIAWIKI / extensions / WYSIWYG / ckeditor / _source / plugins / mediawiki / plugin.js）

使用此属性告诉CKEditor生成适当的wiki文本

[[File:x]]

（x将需要是文件的规范名称）

所以这里的答案是：你不能将Wikitext写入WYSIWYG编辑器，你必须编写WYSIWYG编辑所期望的任何内容，以便随后生成正确的wiki文本。

还有更多内容，但这不属于这个答案的范围。

事实上，对于插入图像的初始显示，您需要设置src属性。

但是，您无法设置绝对URL。您必须临时插入base64编码的图像（如复制/粘贴时）或插入本地链接（格式为/images/a/b/image.png）。否则（使用完整的URL），它将创建一个指向外部URL的链接（即使它是内部的），而不是显示图像本身。

最后，上传图像本身是一项完全不同的任务，您必须创建一个可以使用XMLHttpRequest触发的上传脚本，例如为了使用MediaWiki的API来执行上传（只需放入文件系统是不够的，因为它也必须在数据库中等。）显然，图像必须已经上传，然后才能在这里引用它。

CKEditor JS API插入内部文件链接（MediaWiki WYSIWYG扩展）

1 个答案: