正文 

当前位置： 首页 > 问答 >

如何在 Summernote 编辑器（AngularJs 版本）中上传图片？

     2023-03-22     213

关键词：

【中文标题】如何在 Summernote 编辑器（AngularJs 版本）中上传图片？【英文标题】：How to upload image in Summernote Editor (AngularJs version)? 【发布时间】：2016-06-07 04:54:05 【问题描述】：

谁能告诉我如何在summernote 编辑器（angularJs v.）中上传图片？ 我的代码：

$scope.imageUpload = function(files) 
  uploadEditorImage(files);
;

function uploadEditorImage(files) 
  if (files != null) 
       Upload.upload(
          url: ROUTES.RESOURCESUPLOADFILE,
          file: files
      ).success(function(data, status, headers, config) 
         var uploaded_file_name = data.file_name,
         file_location = '/assets/uploads/'+uploaded_file_name;
         $scope.editor.summernote('editor.insertImage', uploaded_file_name);
       );
  
;
   

 <summernote editor="editor" editable="editable" on-image-upload="imageUpload(files)"  ng-model="lessonFormEditData.description" ></summernote>

错误：

TypeError: Cannot read property 'summernote' of undefined

还有“可编辑”参数返回未定义：

$scope.imageUpload = function(files) 
          console.log($scope.editable); // undefined
;

谢谢！

【问题讨论】：

【参考方案1】：

你需要在成功后添加上面的代码。

var uploaded_file_name = data.file_name;
var file_path = '/assets/uploads/'+uploaded_file_name;
var editor = $.summernote.eventHandler.getModule();
editor.insertImage(vm.editable, file_path, uploaded_file_name);

【讨论】：

如何使用jQuery在summernote编辑器中输入内容？

】如何使用jQuery在summernote编辑器中输入内容？【英文标题】：HowtogetenteredcontentinsummernoteeditorusingjQuery?【发布时间】：2020-04-1415:26:27【问题描述】：我使用了Summernote编辑器。我可以获取编辑器，但无法获取在编辑器中输入的数据... 查看详情

如何从summernote文本编辑器导出纯文本

】如何从summernote文本编辑器导出纯文本【英文标题】：Howtoderiveplaintextfromsummernotetexteditor【发布时间】：2018-07-0621:36:55【问题描述】：我在Rails应用程序中使用Summernote文本编辑器。当我在编辑器中输入纯文本时，我会在我在编辑... 查看详情

如何关闭summernote编辑器焦点

】如何关闭summernote编辑器焦点【英文标题】：howtoturnoffsummernoteeditorfocus【发布时间】：2021-09-2201:03:48【问题描述】：我有一个包含许多输入的表单。最后一个输入是链接到summernote编辑器的textarea标签。问题是，当页面加载时，... 查看详情

如何在summernote中设置字体大小？

】如何在summernote中设置字体大小？【英文标题】：Howtosetfont-sizeinsummernote?【发布时间】：2015-01-1615:43:01【问题描述】：我一直使用summernote作为我的默认文本编辑器，但我无法在初始化时默认设置特定的字体大小。到目前为止我... 查看详情

如何从数据库中检索数据并能够在summernote编辑器中进行编辑？

】如何从数据库中检索数据并能够在summernote编辑器中进行编辑？【英文标题】：Howtoretrievedatafromdatabaseandabletoeditinsummernoteeditor?【发布时间】：2020-05-2919:59:13【问题描述】：我遇到了一个问题，但我找不到解决它的方法。我的问... 查看详情

如何在 Django Summernote 中显示编程片段的代码块？

】如何在DjangoSummernote中显示编程片段的代码块？【英文标题】：HowtoshowcodeblocksforprogrammingsnippetsinDjangoSummernote?【发布时间】：2020-12-0911:34:49【问题描述】：我在website上使用DjangoSummernote。这就是编辑器的外观。您可以在下面找到... 查看详情

Yii2的summernote编辑器如何上传图片？ [关闭]

】Yii2的summernote编辑器如何上传图片？[关闭]【英文标题】：HowtouploadimageinsummernoteeditorinYii2?[closed]【发布时间】：2015-12-1106:41:39【问题描述】：谁能告诉我如何在Yii2的夏季笔记中上传和存储图片？【问题讨论】：【参考方案1】... 查看详情

如何在angularjs中显示包括图像和格式的summernote编辑器数据的预览？

】如何在angularjs中显示包括图像和格式的summernote编辑器数据的预览？【英文标题】：Howtoshowthepreviewofsummernoteeditordataincludingimagesandformatinangularjs?【发布时间】：2016-10-0600:27:29【问题描述】：我的项目中有一个预览和编辑按钮。当... 查看详情

如何使用 jquery/javascript 在summernote 编辑器中为 textarea 限制第一个位置的空间

】如何使用jquery/javascript在summernote编辑器中为textarea限制第一个位置的空间【英文标题】：howtorestrictspaceatfirstpositioninsummernoteeditorfortextareausingjquery/javascript【发布时间】：2020-04-1506:43:21【问题描述】：这里我使用的是summernote编辑... 查看详情

如何在 Summernote 中插入占位符元素？

】如何在Summernote中插入占位符元素？【英文标题】：HowtoinsertaplaceholderelementinSummernote?【发布时间】：2016-06-2401:19:37【问题描述】：我正在为Summernote所见即所得编辑器（版本0.8.1）开发一个插件，用于将iframe元素插入代码中。使... 查看详情

如何将通过summernote生成的大型base64图像保存在我的数据库中？

】如何将通过summernote生成的大型base64图像保存在我的数据库中？【英文标题】：HowcanIsavealargebase64imagethatisgeneratedthroughsummernoteinmydatabase?【发布时间】：2017-04-2906:11:23【问题描述】：我在尝试将Summernote编辑器生成的图像保存在我... 查看详情

Summernote - 在焦点上，在编辑器末尾插入光标

】Summernote-在焦点上，在编辑器末尾插入光标【英文标题】：Summernote-Onfocus,insertcursorattheendofeditor【发布时间】：2016-05-1116:36:09【问题描述】：当Summernote文本编辑器初始化并将focus属性设置为true时，编辑器获得焦点，但将光标置... 查看详情

如何从summernote编辑器获取纯文本？

】如何从summernote编辑器获取纯文本？【英文标题】：Howtogettheplaintextfromsummernoteeditor?【发布时间】：2015-06-1418:52:02【问题描述】：例如，这是我输入的：sdf42342xxcv.code()将其转换为sdf&lt;br&gt;42342&lt;br&gt;xxcv或者别的：["... 查看详情

如何通过 ajax 从 Summernote 编辑器将数据发送到 php 文件？

】如何通过ajax从Summernote编辑器将数据发送到php文件？【英文标题】：HowcanIsenddatafromasummernoteeditorviaajaxtoaphpfile?【发布时间】：2019-11-1323:41:35【问题描述】：我正在尝试从Summernote编辑器捕获数据并通过ajax将其发送到php文件。我... 查看详情

在summernote编辑器中将内容粘贴为纯文本

】在summernote编辑器中将内容粘贴为纯文本【英文标题】：Pastecontentasplaintextinsummernoteeditor【发布时间】：2015-09-0817:22:51【问题描述】：我需要在我的summernote编辑器中复制粘贴一些内容。但是当我粘贴时，它会采用我复制它的页... 查看详情

summernote - 在 HTML 视图中更新代码

】summernote-在HTML视图中更新代码【英文标题】：summernote-updatecodewheninHTMLview【发布时间】：2015-04-2020:29:15【问题描述】：我正在使用SummernoteWYSIWYG编辑器，但我陷入了这个问题：每次视图从富文本更改为HTML时，我都想进行一些计... 查看详情

Summernote 显示在所有位置（Laravel 5.2）

】Summernote显示在所有位置（Laravel5.2）【英文标题】：Summernoteisdisplayedatallpositions(Laravel5.2)【发布时间】：2016-12-1022:38:48【问题描述】：我正在使用laravel5.2。当我点击“编辑组名”时，summernote文本编辑器显示在每个组名下方，如... 查看详情

如何使用summernote通过ajax同时传递内容和图片

】如何使用summernote通过ajax同时传递内容和图片【英文标题】：Howtousesummernotetopasscontentandimagesatsametimeviaajax【发布时间】：2019-05-1616:10:39【问题描述】：我正在尝试创建一个wp类型的文本编辑器来上传帖子的图像和内容。所以我... 查看详情