1

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

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

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

我试过切换编辑器的模式，但似乎 insertText 和 insertHtml 只能在所见即所得模式下工作。

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;

“链接”按钮实际上为此做了什么？

如果链接按钮可以做到，我相信我也应该这样做，使用 JS API...

4

1 回答 1

0

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

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

所以我们有

  • MediaWiki 及其 API（网络服务）
  • CKEditor（作为 MediaWiki 扩展）及其 JS API
  • CKEditor 插件（就像 Mediawiki 使用扩展一样，CKEditor 可以有插件）

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

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

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

_fck_mw_filename这里的症结是CKEditor使用的特殊属性。（在 PATH_TO_MEDIAWIKI/extensions/WYSIWYG/ckeditor/_source/plugins/mediawiki/plugin.js 中找到）

使用这个属性告诉 CKEditor 生成适当的 wikitext

[[File:x]]

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

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

还有更多，但这超出了这个答案的范围。

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

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

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

于 2014-08-24T15:59:20.540 回答