不拖拽TinyMCE添加图像 [英] Add image without drag TinyMCE

问题描述

我想知道是否通过texbox外部的链接添加html代码到tinymce文本框的方法。假设我们有这样的链接：

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>

当我点击链接img.jpg时，我想将img.jpg添加到出现的文本框中一个图像。
基本上在文本框中添加一个图像，而不必将其拖到那里。

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

推荐答案

您可以在tinymce父页面（图像所在的页面）中嵌入JavaScript函数和处理程序。这个函数会调用如下所示的内容：

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

更新：以下是一个示例。您可能需要稍微调整这些代码，只有当您点击的图像是其父项的唯一子项时，它才会起作用。我建议在这里使用图片属性，而不是element.parentNode.innerHTML。

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：这是我自己建议的实现：

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：仅插入图片元素+ src属性：

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

这篇关于不拖拽TinyMCE添加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！