Question

我已启动并运行CKEditor但我希望在插入图像时，会自动添加<a href="...">标记。这样人们就可以点击img查看其实际大小。

目前，当将图像插入编辑器时，它显示如下：

<img alt="" src="/cms2/media/image/versuch(4).jpg" style="width: 1620px; height: 1080px;" />

我希望它在<a href="..."></a>标签中，如此：

<a href="/cms2/media/image/versuch(4).jpg"><img alt="" src="/cms2/media/image/versuch(4).jpg" style="width: 1620px; height: 1080px;" /></a>

我该怎么做？

Answer 1

您需要侦听关闭的图像对话框，关闭后，您需要自己插入标记。这与https://stackoverflow.com/a/5071771/694325非常相似，我从那里复制并编辑了代码：

CKEDITOR.on('dialogDefinition', function(ev) {
    // Take the dialog name and its definition from the event data
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    if (dialogName == 'image') {
       dialogDefinition.onOk = function(e) {
          var imageSrcUrl = e.sender.originalElement.$.src;

          // HERE create your image element
          // Note that you will need to insert the width and height too!
          // Examine the available variables and DOM on how to do this.
          // I won't do it for you :)
          var htmlimg = '<img src="' + imageSrcUrl + '" style="width:100px;" />';
          var htmlstring = '<a href="' + imageSrcUrl + '">' + htmlimg + '</a>';

          CKEDITOR.instances.YOURINSTANCENAMEHERE.insertHtml(htmlstring);
       };
    }
}

如何在CKEditor中插入图像并始终添加指向完整大小图像的链接

1 个答案: