ドラッグしないで画像を追加TinyMCE

Question

texboxの外側のリンクを介してtinymceテキストボックスにhtmlコードを追加する方法がありますか？

<a href="#" onclick="addimage"><img src="img.jpg" width="30px" height="30px" /></a> 

とするとき、私は画像として表示されるテキストボックスに追加img.jpgをご希望のリンクimg.jpgをクリックしてください：私たちはこのようになりますリンクを持っていると言います。 イメージをテキストボックスにドラッグしなくても基本的に追加できます。

敬具

Answer 1

あなたはjavascript機能とTinyMCEの親ページ（あなたのイメージがに位置されているページ）でハンドラを埋め込むことができます。ここでの例である：この関数は、次の

to_add = clicked_element.parentNode.innerHTML; 
tinymce.get(editor_id).execCommand('mceInsertContent', false, to_add); 

UPDATEのようなものを呼び出します。このコードをちょっと微調整する必要があるかもしれません。クリックした画像がその親の唯一の子である場合にのみ機能します。

// function to enter html element to caret position in editor 
function add_element_to_tinymce(element, editor_id){ 
    var editor = editor_id ? tinymce.get(editor_id) : tinymce.editors[0]; 
    var doc = editor.getDoc(); 
    var new_p = editor.getDoc().createElement('p'); 
    var new_img = $(element).clone().get(0); 
    $(new_p).append(new_img); 
    editor.execCommand('mceInsertContent', false, new_p.innerHTML); 
} 

// add jQuery handler to all images on the page 
jQuery('img').bind('click', function (evt){ add_element_to_tinymce(this); }); 

Update3と：：挿入画像要素これは私自身の提案の実装です：私は提案した画像との仕事はelement.parentNode.innerHTMLするのではなく、ここでは属性

// function to enter html element to caret position in editor 
function add_element_to_tinymce(elem, editor_id){ 
    var editor = editor_id ? tinymce.get(editor_id) : tinymce.editors[0]; 
    editor.execCommand('mceInsertContent', false, elem.parentNode.innerHTML); 
} 

// add jQuery handler to all images on the page 
jQuery('img').bind('click', function (evt){ add_element_to_tinymce(this); }); 

アップデート2デュ+ src属性のみ：

// function to enter html element+src only to caret position in editor 
function add_element_to_tinymce(element, editor_id){ 
    var editor = editor_id ? tinymce.get(editor_id) : tinymce.editors[0]; 
    var doc = editor.getDoc(); 
    var new_p = editor.getDoc().createElement('p'); 
    var new_img = editor.getDoc().createElement('img'); 
    $(new_img).attr('src', $(element).attr('src')); 
    $(new_p).append(new_img); 
    editor.execCommand('mceInsertContent', false, new_p.innerHTML); 
} 

// add jQuery handler to all images on the page 
jQuery('img').bind('click', function (evt){ add_element_to_tinymce(this); });