Question

我正在使用TinyMCE编辑器插入带格式的文本，而我的要求之一是插入带有诸如在文本上包裹文本的内容的图像。因此，我计划使其以另一种方式工作。我现在正在做什么，使用HTML文件上传来上传图像，然后将演示内容插入编辑器。像这样：

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

因此，使用上面的代码，我首先上传图像，然后使图像可单击，最后将一些默认文本插入编辑器。样本图片：

现在，我想将图像插入编辑器，因此我试图检索图像源，如下所示，但无法做到：

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

我不确定，但似乎我在这里遗漏了一些东西。如果有人让我对此有所了解，我将非常感谢-谢谢。完整的代码如下：

<!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

您可以修改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 + '\"/>')"/>

这应该有效。

或者另一个选择是创建执行此操作的功能：

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

然后输入如下：

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

将图像添加到TinyMCE编辑器

1 个答案: