我对编辑器 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文件。 我做错了什么?如果我点击图片上传并转到编辑器,图片不在文本区域中。
如果我删除 sendFile 函数和 onImageUpload:图像保存在 base64 上。
summernote 链接:http://hackerwins.github.io/summernote/
最佳答案
我测试了这段代码并且有效
Javascript
<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);
}
}
});
关于javascript - Summernote图片上传,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21628222/