Summernote插入图片对话框如何设置图片扩展
How to set image extensions for insert image dialog of Summernote
我正在使用 Summernote,一切正常,但有一件事我想不通。以下是我为 SummerNote 使用的设置:
summerNoteElement.summernote({
toolbar: [
['magic', ['style', 'h1', 'h2', 'h3', 'h4']],
['actions', ['undo', 'redo']],
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['fontname', 'strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['media', ['picture', 'video', 'link', 'table', 'hr']],
['insert', ['map', 'localmap']],
['uploadcare', ['uploadcare']],
['misc', ['help', 'fullscreen']]
],
height: 300,
maximumImageFileSize: maxImageFileSize,
}
现在我在此处附上屏幕截图以显示我想要更改的内容。所以我点击下面栏中的插入图片按钮:
然后点击选择文件:
现在,如果您 select 文件扩展名,您将看到允许的图像格式列表:
我喜欢做的是将这些扩展名限制为 JPG、BMP、PNG 等几种。
我是否缺少任何配置或执行此操作的技巧?谢谢。
summernote没有这个控制扩展的选项,它接受各种图片,但我需要发布pdf上传的文件,找到解决方案检查:
在 summernote.js 的主文件中查找行:
'type = "file" name = "files" accept = "image / *" multiple = "multiple" />' +
并将 accept = "image / *" 更改为您想要的格式
例如:
' type="file" name="files" accept="image/gif,image/jpeg,image/jpg,image/png,application/pdf,application/vnd.ms-excel,application/msword, application/vnd.ms-powerpoint,text/plain" multiple="multiple" />' +
希望对您有所帮助
对于那些需要完整代码的人,除图像外,还需要服务器通过 summernote 发送 pdf 文件、doc、txt 等,如下所示:
js代码
$ (document) .ready (function () {
(summernote) summernote ({
toolbar: [
['myotherbutton', ['parameters']],
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear'
['fontname', ['fontname']],
['fontsize', ['fontsize']],
['color', ['color']]
['for', ['ul', 'ol', 'paragraph']]
['table', ['table']],
['insert', ['link', 'picture', 'video', 'hr', 'codeview']]
],
lang: 'pt-BR',
height: 300,
minHeight: null,
maxHeight: null,
callbacks: {
onImageUpload: function (files) {
uploadFile (files [0]);
},
onMediaDelete: function (target) {
alert (target [0] .src)
deleteFile (target [0] .src);
}
}
});
function uploadFile (file) {
data = new FormData ();
data.append ("file", file);
$ .ajax ({
date: date,
type: "POST",
url: "../midia/upload.php", // replace with your url
cache: false,
contentType: false,
processData: false,
success: function (url) {
alert (url);
function checkURL (url) {
return (url.match (/ \. (jpeg | jpg | gif | png) $ /)! = null);
}
if (checkURL (url)) {
var linkfile = url.split ("Images /");
alert (linkfile [1]);
$ image = "../midia/Images/"+linkfile[1];
$ ('# publisher'). summernote ("insertImage", $ image);
} else {
var linkfile = url.split ("Images /");
$ ('# publisher'). summernote ('createLink', {
text: linkfile [1],
url: url,
isNewWindow: true
});
}
}
});
}
function deleteFile (src) {
$ .ajax ({
date: {src: src},
type: "POST",
url: "../midia/delete.php", // replace with your url
cache: false,
success: function (resp) {
console.log (resp);
}
});
}
});
发送php个文件到文件夹/媒体/
upload.php
<? php
$ allowed = array ('png', 'jpg', 'gif', 'pdf', 'doc', 'docx', 'txt', 'mp3');
if (isset ($ _ FILES ['file']) && $ _FILES ['file'] ['error'] == 0) {
$ extension = pathinfo ($ _FILES ['file'] ['name'], PATHINFO_EXTENSION);
if (! in_array (strtolower ($ extension), $ allowed)) {
echo 'AN ERROR OCCURED - INVALID IMAGE';
exit;
}
if (move_uploaded_file ($ _FILES ['file'] ['tmp_name'], '../midia/Images/'.$_FILES['file']['name'])) {
echo $ _SERVER ['SERVER_NAME']. dirname ($ _ SERVER ['PHP_SELF']). '/ Images /'.$_ FILES [' file '] [' name ']; // echo absolute file_url
exit;
}
}
echo 'AN ERROR OCCURED';
exit;
?>
delete.php
<? php
$ url = explode ("Images", $ _ POST ['src']);
$ file_name = str_replace ($ url [0], '', $ _ POST ['src']); // striping host to get relative path
if (unlink ($ file_name))
{
echo 'file deleted!';
}
?>
我正在使用 Summernote,一切正常,但有一件事我想不通。以下是我为 SummerNote 使用的设置:
summerNoteElement.summernote({
toolbar: [
['magic', ['style', 'h1', 'h2', 'h3', 'h4']],
['actions', ['undo', 'redo']],
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['fontname', 'strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['media', ['picture', 'video', 'link', 'table', 'hr']],
['insert', ['map', 'localmap']],
['uploadcare', ['uploadcare']],
['misc', ['help', 'fullscreen']]
],
height: 300,
maximumImageFileSize: maxImageFileSize,
}
现在我在此处附上屏幕截图以显示我想要更改的内容。所以我点击下面栏中的插入图片按钮:
然后点击选择文件:
现在,如果您 select 文件扩展名,您将看到允许的图像格式列表:
我喜欢做的是将这些扩展名限制为 JPG、BMP、PNG 等几种。
我是否缺少任何配置或执行此操作的技巧?谢谢。
summernote没有这个控制扩展的选项,它接受各种图片,但我需要发布pdf上传的文件,找到解决方案检查:
在 summernote.js 的主文件中查找行:
'type = "file" name = "files" accept = "image / *" multiple = "multiple" />' +
并将 accept = "image / *" 更改为您想要的格式 例如:
' type="file" name="files" accept="image/gif,image/jpeg,image/jpg,image/png,application/pdf,application/vnd.ms-excel,application/msword, application/vnd.ms-powerpoint,text/plain" multiple="multiple" />' +
希望对您有所帮助
对于那些需要完整代码的人,除图像外,还需要服务器通过 summernote 发送 pdf 文件、doc、txt 等,如下所示:
js代码
$ (document) .ready (function () {
(summernote) summernote ({
toolbar: [
['myotherbutton', ['parameters']],
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear'
['fontname', ['fontname']],
['fontsize', ['fontsize']],
['color', ['color']]
['for', ['ul', 'ol', 'paragraph']]
['table', ['table']],
['insert', ['link', 'picture', 'video', 'hr', 'codeview']]
],
lang: 'pt-BR',
height: 300,
minHeight: null,
maxHeight: null,
callbacks: {
onImageUpload: function (files) {
uploadFile (files [0]);
},
onMediaDelete: function (target) {
alert (target [0] .src)
deleteFile (target [0] .src);
}
}
});
function uploadFile (file) {
data = new FormData ();
data.append ("file", file);
$ .ajax ({
date: date,
type: "POST",
url: "../midia/upload.php", // replace with your url
cache: false,
contentType: false,
processData: false,
success: function (url) {
alert (url);
function checkURL (url) {
return (url.match (/ \. (jpeg | jpg | gif | png) $ /)! = null);
}
if (checkURL (url)) {
var linkfile = url.split ("Images /");
alert (linkfile [1]);
$ image = "../midia/Images/"+linkfile[1];
$ ('# publisher'). summernote ("insertImage", $ image);
} else {
var linkfile = url.split ("Images /");
$ ('# publisher'). summernote ('createLink', {
text: linkfile [1],
url: url,
isNewWindow: true
});
}
}
});
}
function deleteFile (src) {
$ .ajax ({
date: {src: src},
type: "POST",
url: "../midia/delete.php", // replace with your url
cache: false,
success: function (resp) {
console.log (resp);
}
});
}
});
发送php个文件到文件夹/媒体/
upload.php
<? php
$ allowed = array ('png', 'jpg', 'gif', 'pdf', 'doc', 'docx', 'txt', 'mp3');
if (isset ($ _ FILES ['file']) && $ _FILES ['file'] ['error'] == 0) {
$ extension = pathinfo ($ _FILES ['file'] ['name'], PATHINFO_EXTENSION);
if (! in_array (strtolower ($ extension), $ allowed)) {
echo 'AN ERROR OCCURED - INVALID IMAGE';
exit;
}
if (move_uploaded_file ($ _FILES ['file'] ['tmp_name'], '../midia/Images/'.$_FILES['file']['name'])) {
echo $ _SERVER ['SERVER_NAME']. dirname ($ _ SERVER ['PHP_SELF']). '/ Images /'.$_ FILES [' file '] [' name ']; // echo absolute file_url
exit;
}
}
echo 'AN ERROR OCCURED';
exit;
?>
delete.php
<? php
$ url = explode ("Images", $ _ POST ['src']);
$ file_name = str_replace ($ url [0], '', $ _ POST ['src']); // striping host to get relative path
if (unlink ($ file_name))
{
echo 'file deleted!';
}
?>