How to upload word pictures in batches in ueditor?
1. Front-end reference code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>Editor full version example-1.2.6.0</title>
<script type="text/javascript"src="ueditor.config.js"charset="utf-8"></script>
<script type="text/javascript"src="ueditor.all.js"charset="utf-8"></script>
<link type="text/css"rel="Stylesheet"href="WordPaster/css/WordPaster.css"/>
<link type="text/css"rel="Stylesheet"href="WordPaster/js/skygqbox.css"/>
<scrip ttype="text/javascript"src="WordPaster/js/json2.min.js"charset="utf-8"></script>
<scrip ttype="text/javascript"src="WordPaster/js/jquery-1.4.min.js"charset="utf-8"></script>
<scrip ttype="text/javascript"src="WordPaster/js/WordPaster.js"charset="utf-8"></script>
<scrip ttype="text/javascript"src="WordPaster/js/skygqbox.js"charset="utf-8"></script>
</head>
<body>
<textarea name="key of background value"id="myEditor">write your initial content here</textarea>
<script type="text/javascript">
var pasterMgr = new WordPasterManager();
pasterMgr.Config["PostUrl"] = "http://localhost:81/WordPaster2/WordPasterUEditor1x/php/upload.php"
pasterMgr.Load();//Load control
UE.getEditor('myEditor',(onready:function(){//Create an editor instance
pasterMgr.SetEditor(this);
}});
</script>
</body>
</html>
request
The default request for file upload is a file as form data with an "upload" field.
Response: The file was successfully uploaded
The JSON response when the file is successfully uploaded:
uploaded- is set to 1.
fileName-the name of the uploaded file.
url-The URL of the uploaded file.
Response: The file could not be uploaded
uploaded- is set to 0.
error.message-The error message to be displayed to the user.
2. The image path in the pasted word is fill://D. I understand that this format is not supported by many browsers that are not safe.
The current project uses a flexible method:
First upload the word to the background, poi analysis, store the picture, convert the html, replace the picture, and display it in the rich text box
(There is a pit in the rich text display: no way to directly assign a value to the rich text is found, the record must be destroyed first
success : function(data) {
$('#content').attr('value',data.imagePath);
var editor = CKEDITOR.instances["content"]; //The value of the "name" attribute of your editor
if (editor) {
editor.destroy(true);//Destroy the editor
}
CKEDITOR.replace('content'); //Replace the editor, editorID is the value of the "id" attribute of ckeditor
$("#content").val(result); //Assign a value to the editor
//CKEDITOR.instances.contentCkeditor.setData($("#content").text());
}
3. Receive the uploaded picture and save it on the server
<?php
ob_start();
//201201/10
$timeDir =date("Ym")."/".date("d");
$uploadDir =dirname(__FILE__).'/upload/'.$timeDir;
$curDomain = "http://".$_SERVER["HTTP_HOST"]."/";
//Relative path http://www.ncmem.com/upload/2012-1-10/
$relatPath = $curDomain ."WordPaster2/WordPasterUEditor1x/php/upload/" . $timeDir . "/";
//Create directory automatically. upload/2012-1-10
if(!is_dir($uploadDir))
{
mkdir($uploadDir,0777,true);
}
//If the PHP page is UTF-8 encoded, please use urldecode to decode the file name
//$fileName = urldecode($_FILES['postedFile']['name']);
//If the PHP page is GB2312 encoding, the file name can be read directly
$fileName = $_FILES['file']['name'];
$tmpName = $_FILES['file']['tmp_name'];
//Take the file extension jpg, gif, bmp, png
$path_parts =pathinfo($fileName);
$ext = $path_parts["extension"];
$ext =strtolower($ext);//jpg,png,gif,bmp
//Only allow to upload image type files
if($ext == "jpg"
|| $ext == "jpeg"
|| $ext == "png"
|| $ext == "gif"
|| $ext == "bmp")
{
//Year_month_day_hour, minute, second, millisecond.jpg
$saveFileName = $fileName;
//xxx/2011_05_05_091250000.jpg
$savePath = $uploadDir . "/" . $saveFileName;
//Save as new file name
if (!move_uploaded_file($tmpName,$savePath))
{
exit('upload error!'. "File name:" .$fileName. "Save path:". $savePath);
}
}
//Output image path
//$_SERVER['HTTP_HOST'] localhost:81
//$_SERVER['REQUEST_URI'] /FCKEditor2.4.6.1/php/test.php
$reqPath =str_replace("upload.php","",$_SERVER['REQUEST_URI']);
echo $relatPath . $saveFileName;
header('Content-type: text/html; charset=utf-8');
header('Content-Length: ' .ob_get_length());
?>
Show results:
You need to configure it before use, you can refer to this article I wrote: http://blog.ncmem.com/wordpress/2019/08/07/umeditor%E7%B2%98%E8%B4%B4word%E5% 9B%BE%E7%89%87/
Discussion group: 223813913