我对编辑器Summernote有问题。我想将图像上传到服务器上的目录中。我有一些脚本:
<script type="text/javascript">
$(function () {
$('.summernote').summernote({
height: 200
});
$('.summernote').summernote({
height:300,
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0],editor,welEditable);
}
});
});
</script>
<script type="text/javascript">
function sendFile(file, editor, welEditable) {
data = new FormData();
data.append("file", file);
url = "http://localhost/spichlerz/uploads";
$.ajax({
data: data,
type: "POST",
url: url,
cache: false,
contentType: false,
processData: false,
success: function (url) {
editor.insertImage(welEditable, url);
}
});
}
</script>
<td><textarea class="summernote" rows="10" cols="100" name="tekst"></textarea></td>
当然,我有所有的js和CSS文件。我做错了什么?如果我单击图像上传并转到编辑器,则图像不在文本区域中。
如果我删除发送文件函数和图像上传:图像保存在base64上。
链接到夏季笔记:http://hackerwins.github.io/summernote/
我测试了这段代码并工作
爪哇语
<script>
$(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: "Your URL POST (php)",
cache: false,
contentType: false,
processData: false,
success: function(url) {
editor.insertImage(welEditable, url);
}
});
}
});
</script>
.PHP
if ($_FILES['file']['name']) {
if (!$_FILES['file']['error']) {
$name = md5(rand(100, 200));
$ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
$filename = $name.
'.'.$ext;
$destination = '/assets/images/'.$filename; //change this directory
$location = $_FILES["file"]["tmp_name"];
move_uploaded_file($location, $destination);
echo 'http://test.yourdomain.al/images/'.$filename; //change this URL
} else {
echo $message = 'Ooops! Your upload triggered the following error: '.$_FILES['file']['error'];
}
}
更新:
在 0.7.0 之后,onImageUpload
应该在callbacks
选项内,如@tugberk所述
$('#summernote').summernote({
height: 200,
callbacks: {
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0], editor, welEditable);
}
}
});
Summernote v0.8.1 的图片上传
对于大图像
$('#summernote').summernote({
height: ($(window).height() - 300),
callbacks: {
onImageUpload: function(image) {
uploadImage(image[0]);
}
}
});
function uploadImage(image) {
var data = new FormData();
data.append("image", image);
$.ajax({
url: 'Your url to deal with your image',
cache: false,
contentType: false,
processData: false,
data: data,
type: "post",
success: function(url) {
var image = $('<img>').attr('src', 'http://' + url);
$('#summernote').summernote("insertNode", image[0]);
},
error: function(data) {
console.log(data);
}
});
}
使用进度条上传图片
以为我会扩展user3451783的答案,并提供一个HTML5进度条。我发现上传照片而不知道是否发生了什么事非常烦人。
.HTML
<progress></progress>
<div id="summernote"></div>
.JS
// initialise editor
$('#summernote').summernote({
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0], editor, welEditable);
}
});
// send the file
function sendFile(file, editor, welEditable) {
data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: 'POST',
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
return myXhr;
},
url: root + '/assets/scripts/php/app/uploadEditorImages.php',
cache: false,
contentType: false,
processData: false,
success: function(url) {
editor.insertImage(welEditable, url);
}
});
}
// update progress bar
function progressHandlingFunction(e){
if(e.lengthComputable){
$('progress').attr({value:e.loaded, max:e.total});
// reset progress on complete
if (e.loaded == e.total) {
$('progress').attr('value','0.0');
}
}
}
此代码适用于新版本 (v0.8.12) (2019-05-21)
$('#summernote').summernote({
callbacks: {
onImageUpload: function(files) {
for(let i=0; i < files.length; i++) {
$.upload(files[i]);
}
}
},
height: 500,
});
$.upload = function (file) {
let out = new FormData();
out.append('file', file, file.name);
$.ajax({
method: 'POST',
url: 'upload.php',
contentType: false,
cache: false,
processData: false,
data: out,
success: function (img) {
$('#summernote').summernote('insertImage', img);
},
error: function (jqXHR, textStatus, errorThrown) {
console.error(textStatus + " " + errorThrown);
}
});
};
PHP 代码 (上传.php)
if ($_FILES['file']['name']) {
if (!$_FILES['file']['error']) {
$name = md5(rand(100, 200));
$ext = explode('.', $_FILES['file']['name']);
$filename = $name . '.' . $ext[1];
$destination = 'images/' . $filename; //change this directory
$location = $_FILES["file"]["tmp_name"];
move_uploaded_file($location, $destination);
echo 'images/' . $filename;//change this URL
}
else
{
echo $message = 'Ooops! Your upload triggered the following error: '.$_FILES['file']['error'];
}
}
Summernote 会将您上传的图像转换为 base64 编码字符串,您可以处理此字符串,或者正如其他研究员提到的,您可以使用onImageUpload
回调上传图像。你可以看看这个要点,我在这里修改了一点以适应拉拉维尔csrf token
。但这对我不起作用,我没有时间找出原因!相反,我通过基于这篇博文的服务器端解决方案解决了它。它获取夏季笔记的输出,然后上传图像并更新最终的降价 HTML。
use IlluminateHttpRequest;
use IlluminateSupportFacadesStorage;
Route::get('/your-route-to-editor', function () {
return view('your-view');
});
Route::post('/your-route-to-processor', function (Request $request) {
$this->validate($request, [
'editordata' => 'required',
]);
$data = $request->input('editordata');
//loading the html data from the summernote editor and select the img tags from it
$dom = new DomDocument();
$dom->loadHtml($data, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$images = $dom->getElementsByTagName('img');
foreach($images as $k => $img){
//for now src attribute contains image encrypted data in a nonsence string
$data = $img->getAttribute('src');
//getting the original file name that is in data-filename attribute of img
$file_name = $img->getAttribute('data-filename');
//extracting the original file name and extension
$arr = explode('.', $file_name);
$upload_base_directory = 'public/';
$original_file_name='time()'.$k;
$original_file_extension='png';
if (sizeof($arr) == 2) {
$original_file_name = $arr[0];
$original_file_extension = $arr[1];
}
else
{
//the file name contains extra . in itself
$original_file_name = implode("_",array_slice($arr,0,sizeof($arr)-1));
$original_file_extension = $arr[sizeof($arr)-1];
}
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
$path = $upload_base_directory.$original_file_name.'.'.$original_file_extension;
//uploading the image to an actual file on the server and get the url to it to update the src attribute of images
Storage::put($path, $data);
$img->removeAttribute('src');
//you can remove the data-filename attribute here too if you want.
$img->setAttribute('src', Storage::url($path));
// data base stuff here :
//saving the attachments path in an array
}
//updating the summernote WYSIWYG markdown output.
$data = $dom->saveHTML();
// data base stuff here :
// save the post along with it attachments array
return view('your-preview-page')->with(['data'=>$data]);
});
我在这里尝试了几乎所有的答案,但没有一个在 v0.8.18 中对我有用。
我找到了一个简单的解决方案,有人可能需要它。
在这里:
打开您的 js summernote/summernote-lite.js
并找到onImageUpload: null,
。
替换为 :
onImageUpload: function(files) {
var $editor = $(this);
var data = new FormData();
data.append('file', files[0]);
$.ajax({
url: 'editor-upload.php',
method: 'POST',
data: data,
processData: false,
contentType: false,
success: function(response) {
$editor.summernote('insertImage', response);
}
});
},
简单的php示例: editor-upload.php
if(empty($_FILES['file']))
{
echo "Insert image";
}
$errorImgFile = "img/img_upload_error.jpg";
$destinationFilePath = 'img-uploads/'.$_FILES['file']['name'];
if(!move_uploaded_file($_FILES['file']['tmp_name'], $destinationFilePath)){
echo $errorImgFile;
}
else{
echo $destinationFilePath;
}
清除浏览数据并刷新页面,就是这样,它就像一个魅力。
注意:我不使用缩小版本,所以要小心,先备份你的文件。