summernote 图片上传和替代不起作用
Posted
技术标签:
【中文标题】summernote 图片上传和替代不起作用【英文标题】:summernote image upload and alternative not working 【发布时间】:2015-07-27 06:04:52 【问题描述】:我在我的网站上使用 summernote 编辑器,并使用他们网站here 上提到的 Click2edit 方法实现了它。
但是,如果按原样使用图像上传,则会导致各种问题。我的理解是这是使用一种叫做 base64 的东西。我尝试使用另一个 *** 答案 [此处] 中的代码将其替换为更直接的文件上传到服务器。 (Summernote image upload) 但是它似乎没有做任何事情,图像仍然以原始方法插入。如果你能帮我弄清楚如何正确实现这一点。
就错误而言,我的网站有几个选项卡,其中一个选项卡包括 click2edit summernote 编辑器,当我尝试使用图片上传并保存时,图片不显示,它会将选项卡组合为 1页面(可能某处的某些特殊字符会导致问题?)。其次,作为文本数据类型的 sql 列在 sql management studio 中查看时没有显示内容,并且内容是可编辑的,给出了某种保存错误。我最终需要一起删除该条目以恢复正常。
我的代码:
实施summernote:
<div class="click2edit">click2edit</div>
var edit = function()
$('.click2edit').summernote(focus: true);
;
var save = function()
var ahtml = $('.click2edit').code(); //save HTML If you need(aHTML: array).
$('.click2edit').destroy();
;
对于我正在使用的文件上传:
$(document).ready(function()
$('#summernote').summernote(
height: 200,
onImageUpload: function(files, editor, welEditable)
sendFile(files[0], editor, welEditable);
);
function sendFile(file, editor, welEditable)
data = new FormData();
data.append("file", file);
$.ajax(
data: data,
type: "POST",
url: "form_summernote_doc_upload_post.php",
cache: false,
contentType: false,
processData: false,
success: function(url)
editor.insertImage(welEditable, url);
);
);
我还应该提到输出正在使用 Post 上传到 sql,其中包括
(stuff)....sql_safe($Postarray[text])....(stuff)
我认为这可能与我使用 click2edit 方法来启动 Summernote 而不是直接给它 #summernote id 的事实有关。但我也试过了,结果是一样的。我也不明白如何禁用summernotes自己的上传方法,也许那是压倒一切的。谢谢
【问题讨论】:
【参考方案1】:夏日笔记新版本只传递一个参数。 所以你可以使用这个脚本
$('.summer').summernote(
height: "200px",
callbacks:
onImageUpload: function(files)
url = $(this).data('upload'); //path is defined as data attribute for textarea
sendFile(files[0], url, $(this));
);
function sendFile(file, url, editor)
var data = new FormData();
data.append("file", file);
$.ajax(
data: data,
type: "POST",
url: url,
cache: false,
contentType: false,
processData: false,
success: function(objFile)
editor.summernote('insertImage', objFile.folder+objFile.file);
,
error: function(jqXHR, textStatus, errorThrown)
);
【讨论】:
【参考方案2】:我对编辑器做了一些小改动,
原来的summernote将上传的图片转换为base64格式。 这个编辑器通过 PHP 上传图片到文件系统, 只需确保您对 img-uploads 文件夹具有写入权限即可。
https://github.com/pherdee/summernote-img-upload
【讨论】:
在将您的项目复制到更多帖子之前,请阅读How to offer personal open-source libraries?。 举个例子也不错。【参考方案3】:我意识到我犯了一个愚蠢的错误,
onImageUpload: function(files, editor, welEditable)
sendFile(files[0], editor, welEditable);
需要像这样包含在summernote初始化函数中:
var editit = function()
$("#defaulttab").addClass("active");
$('.click2edit').summernote(
focus: true,
onImageUpload: function(files, editor, welEditable)
sendFile(files[0], editor, welEditable);
【讨论】:
以上是关于summernote 图片上传和替代不起作用的主要内容,如果未能解决你的问题,请参考以下文章
Summernote 图像上传在 codeigniter 中不起作用