Question

I wonder if theres a way to add a html code to the tinymce textbox through a link outside the texbox. Say we have a link that looks like this:

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

And when i click the link img.jpg I would like img.jpg added to the textbox appearing as an image.
So basicly adding an image to the textbox without having to drag it there.

Best regards

Answer 1

You can embed a javascript function and a handler in the tinymce parent page (the page your image is located at). This function would call something like the following

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

UPDATE: Here is an example. You might need to tweak this code a bit, casue it will only work if the image you clicked is the only child of its parent. I suggest du work with the image attributes here instead of 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);  });

UPDATE2: This is the implementation of my own suggestion:

// 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: inserts image element + src attribute only:

// 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);  });