Javascript 添加图像而不拖动鼠标

我想知道是否有办法通过texbox外部的链接向tinymce文本框添加html代码。假设我们有一个如下链接：

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

当我点击链接img.jpg时，我想把img.jpg添加到显示为图像的文本框中。 因此，基本上是将图像添加到文本框中，而不必将其拖动到文本框中

---

致意

您可以在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);  });

更新2:这是我个人建议的实施：

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

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

---

非常感谢您的回复。这在html示例中是如何工作的？谢谢您的帮助。我尝试过这个方法，但当我点击一个图像时，它会将整个页面添加到tinymce中。所以我觉得我们越来越近了，但不是真的在那里。我真的不理解父母的孩子。这可能是添加整个页面的原因吗？就是这样（我提到它只适用于包含该子元素的父元素中的图像）。请看我编辑的帖子，在那里我按照自己的建议做得很好。它现在工作得很好。我对javascript和jquery非常陌生，但我认为我正在取得进展。也许你可以给我一个提示，如何插入img，但删除宽度和高度等属性？所以基本上，它只是插入带有源（src）的图像。Iv'e现在也开始研究父、子和兄弟结构。参见我编辑的帖子，我只将src属性分配给创建的img元素，而不是克隆整个img元素。