參考: http://stackoverflow.com/questions/16832513/problems-with-image-tag-when-using-ckeditor


原:

<script type="text/javascript">

    CKEDITOR.replace('Content', { toolbar: 'basic', height: 200 });

</script>

調整後:

<script type="text/javascript">

     CKEDITOR.replace('Content, { toolbar: 'basic', height: 360, allowedContent: {

               img: {

                   attributes: '!src, alt', // src is required

                   styles: 'height, width'

               }

         }

     });

</script>

在 CKEditor 中, 使用 insertHtml可以保留游標的位置, 所以在插入文字時, 大多使用 insertHtml, 但在CKEditor 的內容為空白時, insertHtml好像會失效. 這時就要用 setData 了.

if(CKEDITOR.instances['<% = me.txtContent.ClientId %>'].getData() == ''){

    CKEDITOR.instances['<% = me.txtContent.ClientId %>'].setData('<img src="' + oRes.msg + '" alt="" />');

}

else{

    CKEDITOR.instances['<% = me.txtContent.ClientId %>'].insertHtml('<img src="' + oRes.msg + '" alt="" />');

}

在 Chrome 中, 可以直接把圖片用 ajax 傳到 Server 上. 請參考 在 Chrome 中, 直接把剪貼簿中的圖片用貼上的方式上傳到 Server 但若是要在 CKEditor 中貼上圖片, 會遇到一些問題, 主要的原因是 Past Event 綁定的方法不太一樣: 其中 ".<% = me.txtContent.ClientId %>"  要換成 textarea 的 id

$(document).ready(function () {

CKEDITOR.replace('<% = me.txtContent.ClientId %>', {

on: {

instanceReady: function (ev) {

this.dataProcessor.writer.setRules('p', {

indent: false, //縮排

breakBeforeOpen: true, // <P>之前是否換行

breakAfterOpen: true, // <P>之後是否換行

breakBeforeClose: false, // </P>之前是否換行

breakAfterClose: true // </P>之後是否換行

});

}

},

toolbar: 'basic'

});

});



$(document).ready(function () {

if (parseInt(window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1]) >= 12) {

function bindPasteInCK() {

$("iframe").contents().find("body").bind('paste', imagePasteOnPaste);

}



CKEDITOR.instances.<% = me.txtContent.ClientId %>.on("instanceReady", bindPasteInCK);

}

});

參考資料: http://fogbugz.stackexchange.com/questions/8744/bugmonkey-paste-image-into-case-what-does-wiki-do-with-images