Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Зуев Егор
/
wiki.dev
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Commits
Issue Boards
Files
Commits
Network
Compare
Branches
Tags
Authored by
Dan Brown
2016-09-02 21:18:48 +0100
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
Commit
63c6d3478de133df353a3be696c6a2cd90108526
63c6d347
1 parent
781f0e78
Added image paste and drop to markdown editor
Only currently tested in chrome. Closes #128
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
82 additions
and
3 deletions
resources/assets/js/directives.js
resources/assets/js/pages/page-form.js
resources/assets/js/directives.js
View file @
63c6d34
...
...
@@ -370,6 +370,83 @@ module.exports = function (ngApp, events) {
});
});
// Upload and insert image on paste
function
editorPaste
(
e
)
{
e
=
e
.
originalEvent
;
if
(
!
e
.
clipboardData
)
return
var
items
=
e
.
clipboardData
.
items
;
if
(
!
items
)
return
;
for
(
var
i
=
0
;
i
<
items
.
length
;
i
++
)
{
uploadImage
(
items
[
i
].
getAsFile
());
}
}
input
.
on
(
'paste'
,
editorPaste
);
// Handle image drop, Uploads images to BookStack.
function
handleImageDrop
(
event
)
{
event
.
stopPropagation
();
event
.
preventDefault
();
let
files
=
event
.
originalEvent
.
dataTransfer
.
files
;
for
(
let
i
=
0
;
i
<
files
.
length
;
i
++
)
{
uploadImage
(
files
[
i
]);
}
}
input
.
on
(
'drop'
,
handleImageDrop
);
// Handle image upload and add image into markdown content
function
uploadImage
(
file
)
{
if
(
file
.
type
.
indexOf
(
'image'
)
!==
0
)
return
;
var
formData
=
new
FormData
();
var
ext
=
'png'
;
var
xhr
=
new
XMLHttpRequest
();
if
(
file
.
name
)
{
var
fileNameMatches
=
file
.
name
.
match
(
/
\.(
.+
)
$/
);
if
(
fileNameMatches
)
{
ext
=
fileNameMatches
[
1
];
}
}
// Insert image into markdown
let
id
=
"image-"
+
Math
.
random
().
toString
(
16
).
slice
(
2
);
let
selectStart
=
input
[
0
].
selectionStart
;
let
selectEnd
=
input
[
0
].
selectionEnd
;
let
content
=
input
[
0
].
value
;
let
selectText
=
content
.
substring
(
selectStart
,
selectEnd
);
let
placeholderImage
=
`/loading.gif#upload
${
id
}
`
;
let
innerContent
=
((
selectEnd
>
selectStart
)
?
`![
${
selectText
}
]`
:
'![]'
)
+
`(
${
placeholderImage
}
)`
;
input
[
0
].
value
=
content
.
substring
(
0
,
selectStart
)
+
innerContent
+
content
.
substring
(
selectEnd
);
input
.
focus
();
input
[
0
].
selectionStart
=
selectStart
;
input
[
0
].
selectionEnd
=
selectStart
;
let
remoteFilename
=
"image-"
+
Date
.
now
()
+
"."
+
ext
;
formData
.
append
(
'file'
,
file
,
remoteFilename
);
formData
.
append
(
'_token'
,
document
.
querySelector
(
'meta[name="token"]'
).
getAttribute
(
'content'
));
xhr
.
open
(
'POST'
,
window
.
baseUrl
(
'/images/gallery/upload'
));
xhr
.
onload
=
function
()
{
let
selectStart
=
input
[
0
].
selectionStart
;
if
(
xhr
.
status
===
200
||
xhr
.
status
===
201
)
{
var
result
=
JSON
.
parse
(
xhr
.
responseText
);
input
[
0
].
value
=
input
[
0
].
value
.
replace
(
placeholderImage
,
result
.
url
);
input
.
change
();
}
else
{
console
.
log
(
'An error occurred uploading the image'
);
console
.
log
(
xhr
.
responseText
);
input
[
0
].
value
=
input
[
0
].
value
.
replace
(
innerContent
,
''
);
input
.
change
();
}
input
.
focus
();
input
[
0
].
selectionStart
=
selectStart
;
input
[
0
].
selectionEnd
=
selectStart
;
};
xhr
.
send
(
formData
);
}
}
}
}]);
...
...
resources/assets/js/pages/page-form.js
View file @
63c6d34
"use strict"
;
function
editorPaste
(
e
)
{
function
editorPaste
(
e
,
editor
)
{
if
(
!
e
.
clipboardData
)
return
var
items
=
e
.
clipboardData
.
items
;
if
(
!
items
)
return
;
...
...
@@ -32,7 +32,7 @@ function editorPaste(e) {
var
result
=
JSON
.
parse
(
xhr
.
responseText
);
editor
.
dom
.
setAttrib
(
id
,
'src'
,
result
.
url
);
}
else
{
console
.
log
(
'An error occured uploading the image'
);
console
.
log
(
'An error occur
r
ed uploading the image'
);
console
.
log
(
xhr
.
responseText
);
editor
.
dom
.
remove
(
id
);
}
...
...
@@ -181,6 +181,8 @@ var mceOptions = module.exports = {
});
// Paste image-uploads
editor
.
on
(
'paste'
,
editorPaste
);
editor
.
on
(
'paste'
,
function
(
event
)
{
editorPaste
(
event
,
editor
);
});
}
};
\ No newline at end of file
...
...
Please
register
or
sign in
to post a comment