将上传的图像插入 Summernote 编辑器

2024-04-13

我的目标是将上传的图像(本地文件)插入到 Summernote 编辑器中。

图片上传成功,只需插入编辑器即可。

我试图控制台记录编辑器实例,但它显示未定义。如果我可以将编辑器实例传递给sendFile功能,我想这个问题将会得到解决。

jsfiddle https://jsfiddle.net/weodsagb/9/

$(document).ready(function () {

  $('.summernote').summernote({
    callbacks: {
     onImageUpload: function(files, editor, welEditable) {
      var url= sendFile(files[0], editor, welEditable);
    }
  },
  height: 300,
  focus: true,

});

  function sendFile(file, editor, welEditable) {
    data = new FormData();
    data.append("file", file);
    console.log(editor);
    /* $.ajax({
      data: data,
      type: "POST",
      url: "Test/test",
      cache: false,
      contentType: false,
      processData: false,
      success: function(url) {
        editor.insertImage(welEditable, url);
        console.log(url); //eg:https://server-url/assets/images/a8f15ed.jpg
      },
      error: function(jqXHR, stat, err){
        console.log(stat+':'+err);
      }
    }); */
  }
});
<head> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.js"></script>
</head>


<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="col-md-4">
        <div class="summernote"></div>
      </div>
    </div>
  </div>
</div>

您可以尝试设置'text/html' mode

Note:没有editor, welEditable参数在onImageUpload https://summernote.org/deep-dive/#onimageupload打回来

$(document).ready(function() {

  $('.summernote').summernote({
    height: 300,
    focus: true,
    codemirror: {
      mode: 'text/html',
    }
  });
  
});
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.css" rel="stylesheet" />

  <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.js"></script>
</head>


<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="col-md-4">
        <div class="summernote"></div>
      </div>
    </div>
  </div>
</div>

UPDATE在 ajax 成功时,您可以通过以下方式插入图像

// getting old html 
let html = $('.summernote').summernote('code'); 

// setting updated html with image url
$('.summernote').summernote('code', html + '<img src="' + url + '"/>'); 
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将上传的图像插入 Summernote 编辑器 的相关文章

  • IE 中的 HR 标签 - 删除边框

    在除 IE7 及更低版本之外的其他浏览器中 hr 在 hr 标签周围显示边框 但我不希望它出现 我已经尝试过这个解决方案 但它周围似乎仍然有边框 它看起来像这样 我该如何摆脱它 See http webdesign about com od
  • 判断一个数字是否能被 3 或 5 整除 (FizzBu​​zz)

    如何根据输出是否能被 3 或 5 整除来更改输出 如果它能被 3 整除 我想显示 rock 如果它能被 5 整除 我想显示 star 类似于 FizzBu zz 如果两者都有 他们都会看到 这是我的代码 if var n Math floo
  • 如何从 JSON 响应重定向?

    所以我尝试使用 Flask 和 Javascript 上传器 Dropzone 上传文件并在上传完成后重定向 文件上传正常 但在烧瓶中使用传统的重定向 return redirect http somesite com 不执行任何操作 页面
  • html css 下拉菜单

    这是我第一次在 Stack Overflow 上发帖 我不熟悉论坛发帖规定 所以请让我知道我做错了什么 我在论坛中研究过这个问题 但我所遇到的一切都没有给我明确的答案 我试图从 新闻 元素创建一个下拉菜单 但在运行代码时我从未得到任何可见的
  • 如何打开弹出窗口并用父窗口中的数据填充它?

    如何使用 JavaScript jQuery 使用父页面中 JS 变量的数据填充弹出窗口 在我的示例中 我有一个文件名数组 我在父窗口中最多列出五个 如果还有更多 我想提供一个链接来打开弹出窗口并列出数组中的每个帖子 因此 如果我打开一个包
  • 即使在包裹后也具有等宽的弹性项目

    是否可以制作一个像这样的纯 CSS 解决方案 物品有一些min width 它们应该动态增长以填充所有容器宽度 然后换行到新行 列表中的所有项目都应具有相同的宽度 现在看起来是这样的 这就是我希望它看起来像的样子 我已经手动管理这些底部项目
  • 计算文本选择的 xy 位置

    我正在尝试使用 DOM 元素创建自己的文本选择 是的 我的意思是当您在此元素中选择文本时 您会在文本后面看到蓝色背景 这个想法是停止默认行为 蓝色 并使用我自己的元素来完成工作 方法是找到选择的 xy 位置 然后放置绝对定位的元素 我希望能
  • 如何在 ASP.NET MVC 3 的 Razor 视图中编码嵌入的 javascript?

    如何在以下上下文中正确编码 JavaScript 我的 JSON 对象中的值是由应用程序管理员设置的 因此我假设它们需要正确编码 对于 HTML 和 JavaScript 都是如此 我在用着System Web Script Seriali
  • 如何限制下拉列表更改而不禁用它

    如何在不禁用下拉列表的情况下限制下拉列表选项更改 意味着我无法更改选项 并且下拉列表不应该是只读的 我的问题是我的服务器没有读取禁用的元素 这是我的出价 http jsfiddle net m3v7y jQuery var lastSel
  • Ember Data 中出现“超出最大调用堆栈大小”错误的原因可能是什么?

    Ember 发布新版本 3 6 0 后 我开始在控制台中收到错误 rsvp js 24 未捕获 RangeError 超出最大调用堆栈大小 在 WeakMap get 在 getCacheFor metal js 25 在 Computed
  • 如何在html中制作多行类型的文本框?

  • 从 DirectionsRenderer 中获取折线或标记的事件

    我正在使用 DirectionsService 和路线方法来生成 DirectionsResult 我还使用 DirectionsRenderer 对象来显示结果 因为它非常易于使用 我在检测 Directions changed 事件时没
  • JavaScript 数组扩展语法的时间复杂度是多少?

    我想知道在 JavaScript 中使用数组扩展的时间复杂度是多少 是线性 O n 还是常数 O 1 下面的语法示例 let lar Math max nums 传播称为 Symbol iterator 有关对象的属性 对于数组 这将迭代数
  • 如何让div与包含td的高度相匹配?

    我沿着桌子的一排布置了三个 面板 一个比另外两个高 我希望所有三个面板都与最高的一个的高度相匹配 我尝试将 div 的样式设置为 height 100 但是即使包含的 tds 增长 短面板仍然很短 我的 HTML 是由 JSF 生成的 因此
  • JavaScript:测试与执行

    我想知道检查字符串 例如邮件 密码等 的最佳方法是什么 i exec a vs i test a exec返回值 test true test 1 way var mail req body mail if check mail exec
  • 当复选框条件更改时,如何使用ajax更新mysql数据库?

    我有一个在客户端按行显示的文章表 每篇文章都有一个唯一的 ID 并包含一个复选框以指示该文章是否被选中为收藏夹 如果它是最喜欢的 则该复选框已被选中 如果没有 则未选中 现在 如果特定于每一行的复选框条件发生变化 我需要 js 或 jque
  • MongoDB中如何通过引用字段进行查询?

    我有两个 Mongo 模式 User id ObjectId name String country ObjectId Reference to schema Country Country id ObjectId name String
  • 强制输入数字小数位

    我想强制
  • Flowtype 属性“msg”缺失为 null 或未定义

    我发现 Flow 很难用 我明白那个Array find可以返回或未定义 因此 通过阅读以下内容 github Array find on Array 引发 https github com facebook flow issues 351
  • 使用 JQuery 根据下拉列表选择的值显示/隐藏控件

    我正在尝试使用 JQuery 根据下拉菜单的选定索引显示 隐藏 div 标签 但它不起作用 任何帮助将不胜感激 Thanks

随机推荐

  • Visual Studio 代码覆盖率未显示所有程序集

    我的 SLN 文件中有 20 个项目 我正在通过测试资源管理器运行单元测试并生成代码覆盖率 只有八个项目出现在报道中 见屏幕截图 我正在使用一个 runsettings 文件 其中注释掉了所有 标记的内容 如下所示
  • 忽略空格的查询

    运行查询以便字段中的空格是最好的方法是什么 被忽视 例如 以下查询 SELECT FROM mytable WHERE username JohnBobJones SELECT FROM mytable WHERE username Joh
  • 查找 GIT 中具有特定单词/行的最新提交

    如果我有一个包含最新提交的文件 如下所示 class A String name Mary 在特定的提交中 String name Mary 被更改为String name Bob 问题是 这一行已经被修改了几次 有一次是 John 另一个
  • 上传数据到Meteor/Mongodb

    我有一个 Meteor 应用程序 想将数据 从 csv 上传到流星集合 我已经发现 解决方案 例如集合fs https github com CollectionFS Meteor CollectionFS 处理文件上传 方法用于直接上传
  • 如何在 Windows Azure 上部署 Java 应用程序

    您好 我是一名计算机科学专业三年级学生 我已经在 netbeans 上用 java 创建了一个三年级项目 现在我想将其部署到带有 windows azure 的虚拟机上 重点是 我希望能够在任何连接到互联网的计算机上使用这个应用程序 只需访
  • 单链打印C++

    我正在尝试以 1 2 3 4 etc 格式选择我的链 您可以在下面找到头文件 其中包含节点的布局 我只是对如何循环浏览列表以打印项目感到困惑 任何指导将不胜感激 set h using namespace std include
  • Go:在二进制文件中嵌入静态文件

    这可能是一个非常业余的问题 我正在尝试将静态文件嵌入到二进制文件中 即 html 我该怎么做https github com jteeuwen go bindata https github com jteeuwen go bindata
  • front() 和 begin() 之间的区别

    两者有什么区别front and begin 许多 STL 容器中出现的函数 begin http www cplusplus com reference stl list begin 返回一个可用于迭代集合的迭代器 而front http
  • OnItemCLickListener 在列表视图中不起作用

    Activity班级代码 conversationList ListView findViewById android R id list ConversationArrayAdapter conversationArrayAdapter
  • 从干草堆索引中删除对象

    我使用 django 删除一条记录 r model objects get id 1 r delete 现在我想从索引中删除记录而不重新索引 如何 我无法让remove object工作并且干草堆文档 http django haystac
  • 从 Windows 服务打印 pcl 文件的 LPR 命令不起作用(现在是托盘应用程序)

    我已经四处寻找可能的解决方案和解释一段时间了 但我找不到任何东西 以下命令正在从 Windows 服务运行 如果直接在 cmd 中使用 相同的命令也可以运行 它不会返回任何错误或与此相关的任何其他内容 System Diagnostics
  • 每 5 分钟自动运行一次 Selenium 测试

    有没有办法自动执行每五分钟运行一次的硒测试 如果您已将测试打包为可执行文件 最简单的方法可能是运行 CRON 作业或 Windows 计划任务 也就是说 Hudson 或另一个持续集成系统 几乎肯定是更好的长期策略
  • 日期格式:Android 联系人生日周年纪念日

    处理联系人生日和周年纪念日 我得到这样的详细信息和生日 12 2 2012 或 12 2 2012 或 12 02 2012 或 2 12 12 问题 所有三星手机的日期格式都相同吗 如果是 日期格式是什么 猜测不适用于所有 Android
  • sbt 中未解决的依赖关系

    运行我的sbt构建 我得到以下内容未解决的依赖关系 warn warn UNRESOLVED DEPENDENCIES warn warn com typesafe play sbt link 2 2 0 not found warn co
  • t-SQL 授予表删除和创建权限

    如何授予某些用户仅在 VB net 2005 Win 应用程序访问的 SQL 2005 数据库中删除和创建单个表的权限 有些文章建议授予表的控制权 但我无法做到这一点 如果您认为这是正确的方法 您能告诉我正确的语法吗 您不能在单个表上分配
  • 密码重置链接未重定向到网站

    我正在尝试使用 django Rest 框架在我的 React 应用程序中实现密码重置功能 我正在使用rest auth Issue 当我尝试从网站重置密码后 它会将密码重置链接发送到电子邮件 但单击该链接后 它会重定向到 DRF 默认密码
  • 如何从颤振路径中获取音频元数据?

    我有音频文件的路径 如 sdcard music ABC mp3 如何从该路径获取其他详细信息 例如专辑 艺术家 持续时间等 如果您正在使用颤动声音 https pub dev packages flutter sound 有一些实用方法可
  • 使用 Array.every 缩小数组类型的联合

    我有一个变量 其类型是不同数组类型的联合 我想将其类型缩小为该联合的单个成员 这样我就可以为每种类型运行适当的代码 使用Array every https developer mozilla org en US docs Web JavaS
  • 如何放大和缩小图像pygame并使用鼠标位置作为缩放中心

    我遇到了无法解决的 PyGame 问题 所以 我的想法是我有一张可以放大 缩小的地图 放大效果很好 但缩小后显示图片的其余部分已被删除 现在仅存在之前在窗口上可见的图像部分 这是我的代码 import pygame from pygame
  • 将上传的图像插入 Summernote 编辑器

    我的目标是将上传的图像 本地文件 插入到 Summernote 编辑器中 图片上传成功 只需插入编辑器即可 我试图控制台记录编辑器实例 但它显示未定义 如果我可以将编辑器实例传递给sendFile功能 我想这个问题将会得到解决 jsfidd