代码之家 › 专栏 › 技术社区 › AT-2017

将图像添加到tinymce编辑器

tinymce jquery javascript

AT-2017 · 技术社区 · 6 年前

我正在使用 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>

1 回复 | 直到 6 年前

SouXin 6 年前

您可以对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()">

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前