无需拖动即可添加图像 TinyMCE

发布于 2024-11-28 17:32:38 字数 291 浏览 1 评论 0原文

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

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

当我单击链接 img.jpg 时，我希望将 img.jpg 添加到以图像形式显示的文本框中。因此，基本上将图像添加到文本框，而无需将其拖到那里。

此致

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

别理我 2024-12-05 17:32:38

您可以在tinymce父页面（图像所在的页面）中嵌入一个javascript函数和一个处理程序。该函数将调用类似以下内容的

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

UPDATE：以下是一个示例。您可能需要稍微调整一下这段代码，因为只有当您单击的图像是其父级的唯一子级时，它才会起作用。我建议你在这里使用图像属性而不是 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);  });

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

回复收藏 0 原文

~没有更多了~