无需拖动TinyMCE即可添加图像

Question

我想知道是否有办法通过texbox外部的链接将一个HTML代码添加到tinymce文本框中.假设我们有一个如下所示的链接:

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

当我点击链接img.jpg时,我希望img.jpg添加到文本框中,显示为图像.所以基本上将图像添加到文本框而不必将其拖动到那里.

最好的祝福

Answer 1

您可以在tinymce父页面(图像所在的页面)中嵌入javascript函数和处理程序.此函数将调用类似以下内容的函数

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

更新:这是一个例子.您可能需要稍微调整一下这个代码,只有当您单击的图像是其父代的唯一子代时,它才会起作用.我建议在这里使用图像属性而不是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:这是我自己的建议的实现:

// 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:仅插入图像元素+ 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);  });