Add upload-image toolbar #728
Conversation
|
I'm interested in implementing this in SimpleMDE for a project. I'm not having much luck so far. Once the file chooser opens it allows you to select an image but the image does not get uploaded and the response obviously comes back as just this, since no file was uploaded: |
what's your api response? |
|
The xmlhttp.responseText returns: |
{
"url": "/images/20190223/dc4a1c262d9722537e4f0e9b69f0dad5.png",
"name": "my_pic_0.png",
"md5_name": "974ebc4ebc746f5d2200d7f797451d04"
}The program will convert json-string to json-object, make result string to textarea: xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
try {
var res = JSON.parse(xmlhttp.responseText);
if(res.url) {
//The result of the textarea will be: ``
editor.codemirror.replaceSelection("![" + (res.name || file.name) + "](" + res.url + ")");
}
} catch (e) {
editor.codemirror.replaceSelection("![]()");
}
}
};This is my test: |
|
Strange. I am implementing your exact code and not getting a json string back from |
uh, JSON is the Web-server's response. |
|
Yes the JSON response comes from the server, which should come from the I’m using all the same code as your commit yet I’m not receiving a a JSON response and can’t seem to figure out why. |
|
What is the version of your browser? Chrome is ok~ |
|
Using Chrome here, too:
|
|
sry, I have no idea. Try the browser warning? Here is my code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
</head>
<body class="page-header-fixed">
<link rel="stylesheet" href="/simplemde/simplemde.min.css">
<form action="http://local.blog.com/content.html" method="POST" id="form_sample_2" class="form-horizontal" >
<div class="control-group" id = "test-editormd">
<textarea style="display:none;" id="sin-markdown" name="markdown"></textarea>
</div>
</form>
<!-- <script src="/static/metronic/media/js/jquery-1.10.1.min.js" type="text/javascript"></script> -->
<script src="/simplemde/simplemde.min.js"></script>
<style>
.CodeMirror {
min-height: 300px;
height: 500px;
}
</style>
<script>
var simplemde = new SimpleMDE({
status: ["lines", "words"],
spellChecker: false,
element: $("#sin-markdown")[0],
promptURLs: true,
uploadUrl: '/index/image/upload',
toolbar: ["upload-image"]
});
</script>
</body>
</html> |
|
@ruesin Are you using PHP to process your uploaded image? If so, could you share that code? |
public function upload()
{
$file = request()->file('image');
if (!$file) {
$this->error('no img~');
}
//move & save image to server
$info = $file->move(SOURCE_PATH . SOURCE_DIR);
$fileName = $info->getFileName();
$url = DS.SOURCE_DIR.DS.date('Ymd').DS.$fileName;
$this->save($fileName, $file->getInfo('name'), $url);
echo json_encode(['url'=>$url,'name'=>$file->getInfo('name'),'md5_name'=>md5($file->getInfo('name'))]);
} |
In my project, I need to use the image upload. At first, I used the custom toolbar. Later, I thought if I could add a feature.
So here's my code, I hope it can help others.
Add
upload-imageto toolbar, then customuploadUrlwhich is the server url for uploading images.If the upload is successful, will type like this:
