将图像添加到TinyMCE编辑器

Question

I am using TinyMCE editor to insert formatted text and one of my requirement is to insert images with contents like wrapping text over the image. 我正在使用TinyMCE编辑器插入带格式的文本，而我的要求之一是插入图像，例如在图像上包裹文字。 So I've planned to make it work in another way. 因此，我计划使其以另一种方式工作。 What I am doing now, uploading the image with HTML file upload and then inserting demo contents into the editor. 我现在正在做什么，用HTML文件上传上传图像，然后将演示内容插入编辑器。 Something like this: 像这样：

$(document).ready(function () {
    $('#sample img').click(function () {
       tinyMCE.activeEditor.setContent('Hello World!');
   });
});

So with the above code, I upload the image first, then making the image clickable and finally inserting some default texts into the editor. 因此，使用上面的代码，我首先上传图像，然后使图像可单击，最后将一些默认文本插入编辑器。 Sample image: 样本图片：

Now I want to insert the image to the editor, so I was trying to retrieve the image source something like the below but unable to do so: 现在，我想将图像插入编辑器，因此我尝试检索图像源，如下所示，但无法做到：

tinyMCE.activeEditor.setContent('<img src='' />');

I am not sure but seems like I am missing something here. 我不确定，但似乎我在这里遗漏了一些东西。 Would really appreciate if someone makes me understand on this - Thanks. 如果有人让我对此有所了解，我将不胜感激-谢谢。 The full code is as follows: 完整的代码如下：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
  <script>
  $(document).ready(function () {
        $('#sample img').click(function () {
             tinyMCE.activeEditor.setContent('Hello World!');
       });
  });  

 tinymce.init({ selector:'textarea' });
</script>
</head>
<body>
  <textarea></textarea>

  <span id="sample">
     <img id="blah" alt="Upload Image Here" width="100" height="100" />
  </span>

  <input type="file" onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">
</body>
</html>

Answer 1

You can modify onchange event some thing like this: 您可以修改onchange事件，如下所示：

<input type="file" onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0]); 
     tinyMCE.activeEditor.setContent(tinyMCE.activeEditor.getContent() + '<img src=\"'+document.getElementById('blah').src + '\"/>')"/>

This should work. 这应该工作。

Or another option is to create a function which performs this operation: 或者另一个选择是创建一个执行此操作的函数：

function onChangeEvent()
{
   document.getElementById('blah').src = window.URL.createObjectURL(this.files[0]);
   tinyMCE.activeEditor.setContent(tinyMCE.activeEditor.getContent() + 
   '<img src="'+document.getElementById('blah').src + '"/>')/>
}

And then input looks like: 然后输入如下所示：

<input type="file" onchange="onChangeEvent()">

将图像添加到TinyMCE编辑器

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-06-19 18:58:28

将图像添加到TinyMCE编辑器

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-06-19 18:58:28

解决方案1
1 已采纳 2018-06-19 18:58:28