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

无需拖动TinyMCE即可添加图像

1 个答案: