CKEditor：在插入图像时自定义HTML [英] CKEditor: Customized HTML on inserting an image

问题描述

我使用CKEditor 3.5在网站上提供WYSYWYG编辑。插入图片时，您可以提供图片的宽度和高度，这会导致HTML如下：

 < img alt = src =/ Images / Sample.pngstyle =width：62px; height：30px;/> 
 

由于这是在浏览器和在同一网站上的其他地方调整大小我使用 Nathanael Jones的图片调整模块，我想要获取以下输出：

 < img alt =src =Images / Sample.png？width = 62& height = 30/> 
  

有一个简单的方法来控制生成的HTML或者我真的要写我自己的对话框/ for CKEditor？

EDIT：

将以下行添加到config.js是最终为我工作的解决方案：

  CKEDITOR.on（'dialogDefinition'，function（ev）{
 var dialogName = ev.data.name; 
 var dialogDefinition = ev.data.definition; 
 var dialog = dialogDefinition.dialog; 
 var editor = ev.editor; 
 
 if（dialogName =='image'）{
 dialogDefinition.onOk = function（e）{
 var imageSrcUrl = e.sender.originalElement。$。src; 
 var width = e .sender.originalElement。$。width; 
 var height = e.sender.originalElement。$。height; 
 var imgHtml = CKEDITOR.dom.element.createFromHtml（'< img src ='+ imageSrcUrl +'？width ='+ width +'& height ='+ height +'alt =/>'）; 
 editor.insertElement（imgHtml）; 
}; 
} 
}）; 
  

下一个问题是，当编辑图像时，宽度和高度自然是在URL字段并且在宽度和高度的专用字段中缺少。所以我需要提出一个解决方案的反向...： - ）

解决方案

我有同样的问题，我需要从生成的图像的HTML中删除这些属性，所以我做的是覆盖上传者的onOK方法，并使用CKEditor的API手动插入图像元素，像这样：

  CKEDITOR.on（'dialogDefinition'，function（ev）{
 //从事件数据获取对话框名称及其定义
 var dialogName = ev.data.name; 
 var dialogDefinition = ev.data.definition; 
 var editor = ev.editor; 
 if（dialogName =='image'）{
 dialogDefinition.onOk = function（e）{
 var imageSrcUrl = e.sender.originalElement。$。src; 
 var imgHtml = CKEDITOR.dom.element.createFromHtml（< img src = + imageSrcUrl +alt =''align ='right'/>）; 
 editor.insertElement（imgHtml）; 
}; 
} 
} 
  

>

I'm using CKEditor 3.5 to provide WYSYWYG editing in a website. When inserting an image you can provide width and height of the image, which results in HTML like follows:

<img alt="" src="/Images/Sample.png" style="width: 62px; height: 30px; " />

Since this does the resizing in the browser and in other places on the same website I use Nathanael Jones' Image Resizing Module, I'd like to get the following output instead:

<img alt="" src="Images/Sample.png?width=62&height=30" />

Is there an easy way to control the generated HTML or have I really to write my own dialog/plugin for CKEditor?

EDIT:

Adding the following lines to config.js was the solution that eventually worked for me:

CKEDITOR.on('dialogDefinition', function (ev) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    var dialog = dialogDefinition.dialog;
    var editor = ev.editor;

    if (dialogName == 'image') {
        dialogDefinition.onOk = function (e) {
            var imageSrcUrl = e.sender.originalElement.$.src;
            var width = e.sender.originalElement.$.width;
            var height = e.sender.originalElement.$.height;
            var imgHtml = CKEDITOR.dom.element.createFromHtml('<img src=' + imageSrcUrl + '?width=' + width + '&height=' + height + ' alt="" />');
            editor.insertElement(imgHtml);
        };
    }
});

The next problem is then, when editing an image, the width and height naturally are in the URL field and are missing in the dedicated fields for width and height. So I need to come up with a solution for the reverse... :-)

解决方案

I kind of had the same problem, I needed to remove those attributes from the generated HTML for the image, so what I did was to override the onOK method of the uploader and insert the image element manually using the CKEditor's API, something like this:

   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;
        var editor = ev.editor;
        if (dialogName == 'image') {
           dialogDefinition.onOk = function(e) {
              var imageSrcUrl = e.sender.originalElement.$.src;
              var imgHtml = CKEDITOR.dom.element.createFromHtml("<img src=" + imageSrcUrl + " alt='' align='right'/>");
              editor.insertElement(imgHtml);
           };
        }
  }

This has worked for us so far.

这篇关于CKEditor：在插入图像时自定义HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！