我在 bootstrap 中使用 Summernote 作为我的编辑器。它看起来不错,我喜欢使用它。我可以得到用户插入的文本,但是,问题是当用户插入图像时,图像的 src 返回到二进制文本。我不想将 src 的整个文本保存到数据库中,而是希望将图像直接保存到我的磁盘驱动器并复制图像名称并将其保存到数据库中。
有人知道吗?
谢谢
我在 bootstrap 中使用 Summernote 作为我的编辑器。它看起来不错,我喜欢使用它。我可以得到用户插入的文本,但是,问题是当用户插入图像时,图像的 src 返回到二进制文本。我不想将 src 的整个文本保存到数据库中,而是希望将图像直接保存到我的磁盘驱动器并复制图像名称并将其保存到数据库中。
有人知道吗?
谢谢
这是我用于我的 cms 的一个小片段。
$(document).ready(function() {
$('.editor').summernote({
height: 300,
toolbar: [
['style', ['style']],
['style', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
['fontname', ['fontname']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'picture', 'video', 'hr', 'readmore']],
['genixcms', ['elfinder']],
['view', ['fullscreen', 'codeview']],
['help', ['help']]
],
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0],editor,welEditable);
}
});
function sendFile(file,editor,welEditable) {
data = new FormData();
data.append("file", file);
$.ajax({
url: "saveimage.php",
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
$('.editor').summernote('editor.insertImage', data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus+" "+errorThrown);
}
});
}
$(".alert").alert();
});
此片段将使图像上传对话框将文件发送到磁盘。但要处理这个问题,您必须创建将处理图像上传的 php 文件。查看我的 cms 的这个小代码
$url = "http://yoursite.com";
$allowed = array('png');
if(isset($_FILES['file']) && $_FILES['file']['error'] == 0){
$extension = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
if(!in_array(strtolower($extension), $allowed)){
echo '{"status":"error"}';
exit;
}
if(move_uploaded_file($_FILES['file']['tmp_name'], GX_PATH.'/assets/images/uploads/'.$_FILES['file']['name'])){
$tmp= '/assets/images/uploads/'.$_FILES['file']['name'];
echo $url.'/assets/images/uploads/'.$_FILES['file']['name'];
//echo '{"status":"success"}';
exit;
}
}
这个 php 文件会将文件保存到路径中。将其插入您的数据库中,我想您已经知道了。
我希望这对您或遇到同样问题的任何人都有帮助。
用于使用 elFinder 文件管理器。请看这个答案。 如何在 Summernote 所见即所得编辑器中添加图像管理器?
谢谢你,