mirror of
https://github.com/codex-team/editor.js
synced 2024-06-26 09:20:07 +02:00
transport begin
This commit is contained in:
parent
b25ba148cc
commit
0d3423724c
|
@ -12,7 +12,8 @@ var cEditor = (function (cEditor) {
|
||||||
textareaId : 'codex-editor',
|
textareaId : 'codex-editor',
|
||||||
|
|
||||||
// First-level tags viewing as separated blocks. Other'll be inserted as child
|
// First-level tags viewing as separated blocks. Other'll be inserted as child
|
||||||
blockTags : ['P','BLOCKQUOTE','UL','CODE','OL','H1','H2','H3','H4','H5','H6']
|
blockTags : ['P','BLOCKQUOTE','UL','CODE','OL','H1','H2','H3','H4','H5','H6'],
|
||||||
|
uploadImagesUrl : '/upload/save.php',
|
||||||
};
|
};
|
||||||
|
|
||||||
// Static nodes
|
// Static nodes
|
||||||
|
@ -49,6 +50,7 @@ var cEditor = (function (cEditor) {
|
||||||
.then(this.ui.make)
|
.then(this.ui.make)
|
||||||
.then(this.ui.addTools)
|
.then(this.ui.addTools)
|
||||||
.then(this.ui.bindEvents)
|
.then(this.ui.bindEvents)
|
||||||
|
.then(this.transport.prepare)
|
||||||
// .then(this.parser.parseTextareaContent)
|
// .then(this.parser.parseTextareaContent)
|
||||||
.then(this.renderer.makeBlocksFromData)
|
.then(this.renderer.makeBlocksFromData)
|
||||||
.catch(function (error) {
|
.catch(function (error) {
|
||||||
|
@ -1551,6 +1553,95 @@ cEditor.toolbar = {
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* File transport module
|
||||||
|
*/
|
||||||
|
cEditor.transport = {
|
||||||
|
|
||||||
|
input : null,
|
||||||
|
|
||||||
|
prepare : function(){
|
||||||
|
|
||||||
|
var input = document.createElement('INPUT');
|
||||||
|
|
||||||
|
input.type = 'file';
|
||||||
|
input.addEventListener('change', cEditor.transport.fileSelected);
|
||||||
|
|
||||||
|
cEditor.transport.input = input;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callback for file selection
|
||||||
|
*/
|
||||||
|
fileSelected : function(event){
|
||||||
|
|
||||||
|
var input = this,
|
||||||
|
files = input.files,
|
||||||
|
filesLength = files.length,
|
||||||
|
formdData = new FormData(),
|
||||||
|
file,
|
||||||
|
i;
|
||||||
|
|
||||||
|
for (i = 0; i < filesLength; i++) {
|
||||||
|
|
||||||
|
file = files[i];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Uncomment if need file type checking
|
||||||
|
* if (!file.type.match('image.*')) {
|
||||||
|
* continue;
|
||||||
|
* }
|
||||||
|
*/
|
||||||
|
|
||||||
|
formdData.append('files[]', file, file.name);
|
||||||
|
}
|
||||||
|
|
||||||
|
cEditor.transport.ajax({
|
||||||
|
data : formdData
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("files: %o", files);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @todo use callback for success and error
|
||||||
|
*/
|
||||||
|
selectAndUpload : function (callback) {
|
||||||
|
|
||||||
|
this.input.click();
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ajax requests module
|
||||||
|
*/
|
||||||
|
ajax : function(params){
|
||||||
|
|
||||||
|
var xhr = new XMLHttpRequest(),
|
||||||
|
success = typeof params.success == 'function' ? params.success : function(){},
|
||||||
|
error = typeof params.error == 'function' ? params.error : function(){};
|
||||||
|
|
||||||
|
xhr.open('POST', cEditor.settings.uploadImagesUrl, true);
|
||||||
|
|
||||||
|
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
|
||||||
|
|
||||||
|
xhr.onload = function () {
|
||||||
|
if (xhr.status === 200) {
|
||||||
|
console.log("success request: %o", xhr);
|
||||||
|
success(xhr.responseText);
|
||||||
|
} else {
|
||||||
|
console.log("request error: %o", xhr);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
xhr.send(params.data);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Content parsing module
|
* Content parsing module
|
||||||
|
|
|
@ -5,18 +5,43 @@
|
||||||
* @version 0.0.1
|
* @version 0.0.1
|
||||||
*/
|
*/
|
||||||
.ce-plugin-image__holder{
|
.ce-plugin-image__holder{
|
||||||
|
position: relative;
|
||||||
background: #FEFEFE;
|
background: #FEFEFE;
|
||||||
border: 2px dashed #E8EBF5;
|
border: 2px dashed #E8EBF5;
|
||||||
border-radius: 55px;
|
border-radius: 55px;
|
||||||
margin: 30px 0;
|
margin: 30px 0;
|
||||||
padding: 30px 40px;
|
padding: 30px 110px 30px 40px;
|
||||||
white-space: nowrap;
|
|
||||||
color: #A5ABBC;
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
}
|
||||||
|
.ce-plugin-image__holder input{
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
outline: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
font-size: 1.2em;
|
||||||
|
color: #A5ABBC;
|
||||||
|
}
|
||||||
|
/* Placeholder color for Chrome */
|
||||||
|
.ce-plugin-image__holder input::-webkit-input-placeholder {
|
||||||
|
color: #A5ABBC;
|
||||||
|
}
|
||||||
|
/* Placeholder color for IE 10+ */
|
||||||
|
.ce-plugin-image__holder input:-ms-input-placeholder {
|
||||||
|
color: #A5ABBC;
|
||||||
|
}
|
||||||
|
/* Placeholder color for Firefox 19+ */
|
||||||
|
.ce-plugin-image__holder input::-moz-placeholder {
|
||||||
|
color: #A5ABBC;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
.ce-plugin-image__button{
|
.ce-plugin-image__button{
|
||||||
float: right;
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
right: 40px;
|
||||||
|
cursor: pointer;
|
||||||
font-family: "codex_editor";
|
font-family: "codex_editor";
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
color: #8990AA;
|
color: #8990AA;
|
||||||
}
|
}
|
||||||
|
.ce-plugin-image__button:hover{
|
||||||
|
color: #393F52;
|
||||||
|
}
|
|
@ -9,12 +9,15 @@ var ceImage = {
|
||||||
make : function ( data ) {
|
make : function ( data ) {
|
||||||
|
|
||||||
var holder = ceImage.ui.holder(),
|
var holder = ceImage.ui.holder(),
|
||||||
uploadButton = ceImage.ui.uploadButton();
|
uploadButton = ceImage.ui.uploadButton(),
|
||||||
|
input = ceImage.ui.input();
|
||||||
|
|
||||||
|
input.placeholder = 'Past image URL or file';
|
||||||
|
|
||||||
holder.textContent = 'Past image URL or file';
|
|
||||||
holder.appendChild(uploadButton);
|
holder.appendChild(uploadButton);
|
||||||
|
holder.appendChild(input);
|
||||||
|
|
||||||
holder.contentEditable = true;
|
uploadButton.addEventListener('click', ceImage.uploadButtonClicked, false );
|
||||||
|
|
||||||
return holder;
|
return holder;
|
||||||
|
|
||||||
|
@ -26,11 +29,16 @@ var ceImage = {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/** */
|
|
||||||
save : function ( block ){
|
save : function ( block ){
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
uploadButtonClicked : function(event){
|
||||||
|
|
||||||
|
cEditor.transport.selectAndUpload();
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
ui : {
|
ui : {
|
||||||
|
|
||||||
holder : function(){
|
holder : function(){
|
||||||
|
@ -43,6 +51,14 @@ var ceImage = {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
input : function(){
|
||||||
|
|
||||||
|
var input = document.createElement('INPUT');
|
||||||
|
|
||||||
|
return input;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
uploadButton : function(){
|
uploadButton : function(){
|
||||||
|
|
||||||
var button = document.createElement('SPAN');
|
var button = document.createElement('SPAN');
|
||||||
|
|
Loading…
Reference in a new issue