将上传的图像插入 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 编辑器 的相关文章

  • 为什么Promise中的代码会同步执行? [复制]

    这个问题在这里已经有答案了 在我的项目中 我有一个很长时间运行的操作 所以我决定将其放入Promise因为我认为这样我就可以在里面的代码继续执行其他操作Promise正在跑步 调试的时候发现外面的代码Promise仅当里面的代码执行Prom
  • 在已标记的输入元素上使用“aria-labelledby”的目的是什么?

    许多 ARIA 演示网站使用以下代码
  • 如何使用 github 托管外部 CSS 文件?

    我将 css 上传到 github 然后转到网站上的文件并单击 raw 选项 我尝试将其添加到网页中 但 chrome 给出以下错误 资源解释为样式表 但使用 MIME 类型 text plain 进行传输 https raw github
  • 如何使用 HTML 和 CSS 在我的网站上显示社交图标?

    我拼命尝试向我的网站添加一些图标 但无法让它们正确显示 我想要的只是一个包含图像并在线显示它们的容器 然后我想在该容器和图像之间添加一些填充 仅此而已 看这里我的方法 如果有人可以帮助我并纠正我的代码 使其真正有效 我会非常高兴 在我的 H
  • document.write 在同一页面上显示内容。

    我对 javascript document write 方法有疑问 大多数情况下 当我使用 document write 时 它会向我显示在不同页面中使用该方法编写的内容 例如 如果我写这样的命令 document write Hello
  • 在 jQuery 选择器上使用正则表达式查找基于 ids 的所有元素

    我有几个具有唯一 id 的元素 如下所示 div div div div div div 我希望使用 jQuery 可以实现以下功能 item top each function this hide 我对正则表达式没有很好的掌握 希望得到一
  • 在给定索引上将字符串分成两部分并返回两部分

    我有一个字符串 需要在给定索引上拆分 然后返回两个部分 并用逗号分隔 例如 string 8211 8 211 98700 98 700 因此 我需要能够在任何给定索引上拆分字符串 然后返回字符串的两半 内置方法似乎执行分割 但只返回分割的
  • 为什么这个递归函数返回未定义?

    我正在尝试编写一个使用递归组合两个字符串的函数 我的代码如下 但我不知道为什么该函数返回未定义 特别是当我在基本情况下使用 console log 时 它不会打印未定义而是打印正确的值 var str3 function merge str
  • 等待异步 grunt 任务完成

    我收到了 grunt 设置 其中一个新任务应该执行 grunt task run 已经存在的任务 要执行的任务是异步的 新任务应该等待异步任务完成 执行此操作的首选方法是什么 grunt 已经涵盖了这一点 你应该将你的任务声明为异步任务 并
  • 无法从 JQuery ajax 调用接收 JSON

    我已经确定来自服务器的 JSON 是有效的 手动进行 ajax 调用 但我真的很想使用 JQuery 我还使用 firebug 确定发送到服务器的 post URL 是正确的 但是 错误回调仍然被触发 解析错误 我还尝试了数据类型 文本 我
  • 基本 jQuery 动画:省略号(三个点依次出现)

    我需要的 我需要一个动画省略号 一个点一个接一个地出现 动画需要循环播放 我想通过 jQuery 实现这一点 动画序列 Frame 1 等待您的选择 Frame 2 等待您的选择 Frame 3 等待您的选择 Frame 4 等待您的选择
  • 如何在 CSS 中将容器内的多个 div 居中

    我正在测试像 Windows Metro 风格的中心分隔线 container height 300px width 70 background EEE margin 10px auto position relative block ba
  • 使用 jQuery 从 ASP.Net JSON 服务获取数据

    我正在尝试调用 Google 地图地理编码 API 从纬度 经度对中获取格式化的地址 然后将其记录到控制台 我正在尝试获取为给定位置返回的第一个 formatted address 项目 我很简单无法从 JSON 中提取该项目 我不知道为什
  • JavaScript setTimeout 和更改系统时间会导致问题

    我注意到如果我设置setTimeout未来1分钟 然后将我的系统时间更改为过去5分钟 setTimeout功能将在 6 分钟后触发 我这样做是因为我想看看夏令时系统时钟更改期间会发生什么 我的 JavaScript 网页使用setTimeo
  • jQuery DataTables:隐藏最后一行的“删除”按钮

    我有一个DataTable在某些情况下可以返回多个页面 返回的每一行都显示一个删除按钮 但我需要它在返回的最后一行上隐藏此按钮 无论是 1 pg 还是多个 因此不能在其中使用 CSS 我想学习如何实现这一点 因为DataTables对我来说
  • 有序 JSON 对象

    我有一个 servlet 它与数据库通信 然后返回有序 按时间排序 对象的列表 在servlet部分 我有 access DB returns a list of User objects ordered ArrayList users M
  • Radiobutton-带有纯 html/css 的按钮

    是否可以创建像这样的单选按钮JQuery http jqueryui com demos button radio那些 用纯html css thanks 试试这个小提琴 http jsfiddle net mcXm7 1 http jsf
  • YouTube 点击时禁用 HTML5

    有没有办法让我们通过javascript禁用HTML5视频的 播放 暂停 点击全屏 功能 然后在我们再次需要时将其放回去 我不知道你是否可以禁用它们 但你可以使用 css 删除它们 video webkit media controls f
  • 在引导程序中以编程方式更改选项卡窗格选项卡

    我使用的选项卡窗格定义为 ul class nav nav tabs li a href personal Personal Information a li li class active a href contact Contact a
  • jQuery appendTo(), json 在 IE 6,7,8 中不起作用

    我这两天绞尽脑汁想找到解决办法 我使用 jQuery ajax 从数据库中获取值 以便在另一个框发生更改时更新一个框 php 脚本从数据库中获取值 然后输出 json 它在 FF 中工作正常 但在所有版本的 IE 中 选择框都不会更新 我已

随机推荐

  • 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