CKEditor JS API插入内部文件链接(MediaWiki所见即所得扩展)

CKEditor JS API insert internal file link (MediaWiki WYSIWYG extension)

本文关键字：MediaWiki 所见即所得 扩展 链接 文件 JS API 插入 内部 CKEditor      更新时间：2023-09-26

我想使用CKEditor的Javascript API插入一个内部文件链接到正在编辑的文本。(与点击链接图标并选择"到图像或文件的内部链接"相同)

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

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

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

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…

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

我也忘了说这是CKEditor包含在WYSIWYG扩展MediaWiki。

所以我们有

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

现在，当你在CKEditor的所见即所得模式下，你基本上是在后台创建HTML。当保存(或切换到源模式)时，CKEditor将其翻译为wikittext。

所以，例如，如果你喜欢最终的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生成适当的wikittext 

[[File:x]]

(x需要是文件的规范名称)

所以这里的答案是:您不能将wikittext写入WYSIWYG编辑器中，您必须编写WYSIWYG编辑器期望的内容，以便随后生成正确的wikittext。

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

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

但是，不能设置绝对URL。您要么必须临时插入base64编码的图像(就像复制/粘贴时一样)，要么插入一个本地链接(以/images/a/b/image.png的形式)。否则(使用完整的URL)，它将创建一个链接到外部URL(即使它是内部的)，而不显示图像本身。

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

相关文章：