mirror of
https://github.com/codex-team/editor.js
synced 2024-06-17 05:05:58 +02:00
redactor synchronization with original textarea
now you can use it in working forms
This commit is contained in:
parent
a0b89b4854
commit
007d842870
|
@ -212,12 +212,20 @@ cEditor.ui = {
|
||||||
cEditor.callback.redactorClicked(event);
|
cEditor.callback.redactorClicked(event);
|
||||||
}, false );
|
}, false );
|
||||||
|
|
||||||
|
/** Any redactor changes: keyboard input, mouse cut/paste, drag-n-drop text */
|
||||||
|
cEditor.nodes.redactor.addEventListener('input', function (event) {
|
||||||
|
cEditor.callback.redactorInputEvent(event);
|
||||||
|
}, false );
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
cEditor.callback = {
|
cEditor.callback = {
|
||||||
|
|
||||||
|
|
||||||
|
redactorSyncTimout : null,
|
||||||
|
|
||||||
globalKeydown : function(event){
|
globalKeydown : function(event){
|
||||||
|
|
||||||
switch (event.keyCode){
|
switch (event.keyCode){
|
||||||
|
@ -240,10 +248,6 @@ cEditor.callback = {
|
||||||
|
|
||||||
tabKeyPressed : function(event){
|
tabKeyPressed : function(event){
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
console.log('TAB pressed: %o', event);
|
|
||||||
|
|
||||||
if ( !cEditor.toolbar.opened ) {
|
if ( !cEditor.toolbar.opened ) {
|
||||||
cEditor.toolbar.open();
|
cEditor.toolbar.open();
|
||||||
} else {
|
} else {
|
||||||
|
@ -252,14 +256,10 @@ cEditor.callback = {
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
// return false;
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
enterKeyPressed : function(event){
|
enterKeyPressed : function(event){
|
||||||
|
|
||||||
console.log('Enter pressed, event.target: %o', event.target);
|
|
||||||
|
|
||||||
if (cEditor.toolbar.opened && event.target == cEditor.nodes.redactor) {
|
if (cEditor.toolbar.opened && event.target == cEditor.nodes.redactor) {
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
@ -272,16 +272,14 @@ cEditor.callback = {
|
||||||
|
|
||||||
escapeKeyPressed : function(event){
|
escapeKeyPressed : function(event){
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
console.log('Escape pressed');
|
|
||||||
cEditor.toolbar.close();
|
cEditor.toolbar.close();
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
arrowKeyPressed : function(event){
|
arrowKeyPressed : function(event){
|
||||||
|
|
||||||
console.log('Arrow pressed');
|
|
||||||
|
|
||||||
cEditor.toolbar.close();
|
cEditor.toolbar.close();
|
||||||
|
|
||||||
var nodeFocused = cEditor.html.getNodeFocused();
|
var nodeFocused = cEditor.html.getNodeFocused();
|
||||||
|
@ -304,13 +302,62 @@ cEditor.callback = {
|
||||||
|
|
||||||
cEditor.toolbar.move(nodeFocused);
|
cEditor.toolbar.move(nodeFocused);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
redactorInputEvent : function (event) {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clear previous sync-timeout
|
||||||
|
*/
|
||||||
|
if (this.redactorSyncTimout){
|
||||||
|
clearTimeout(this.redactorSyncTimout);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Start waiting to input finish and sync redactor
|
||||||
|
*/
|
||||||
|
this.redactorSyncTimout = setTimeout(function() {
|
||||||
|
|
||||||
|
cEditor.content.sync();
|
||||||
|
|
||||||
|
}, 500);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @todo merge module with cEditor.html
|
||||||
|
*/
|
||||||
|
cEditor.content = {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Synchronizes redactor with original textarea
|
||||||
|
*/
|
||||||
|
sync : function () {
|
||||||
|
|
||||||
|
cEditor.core.log('syncing...');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Save redactor content to cEditor.state
|
||||||
|
*/
|
||||||
|
cEditor.state.html = cEditor.nodes.redactor.innerHTML;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Put it to the textarea
|
||||||
|
*/
|
||||||
|
cEditor.nodes.textarea.value = cEditor.state.html;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
cEditor.toolbar = {
|
cEditor.toolbar = {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Margin between focused node and toolbar
|
||||||
|
*/
|
||||||
defaultOffset : 10,
|
defaultOffset : 10,
|
||||||
|
|
||||||
opened : false,
|
opened : false,
|
||||||
|
@ -331,8 +378,6 @@ cEditor.toolbar = {
|
||||||
|
|
||||||
close : function(){
|
close : function(){
|
||||||
|
|
||||||
console.log('close!');
|
|
||||||
|
|
||||||
cEditor.nodes.toolbar.classList.remove('opened');
|
cEditor.nodes.toolbar.classList.remove('opened');
|
||||||
|
|
||||||
this.opened = false;
|
this.opened = false;
|
||||||
|
@ -394,8 +439,6 @@ cEditor.toolbar = {
|
||||||
var nodeFocused = cEditor.html.getNodeFocused(),
|
var nodeFocused = cEditor.html.getNodeFocused(),
|
||||||
newTag;
|
newTag;
|
||||||
|
|
||||||
console.log(cEditor.toolbar.current);
|
|
||||||
|
|
||||||
switch (cEditor.toolbar.current) {
|
switch (cEditor.toolbar.current) {
|
||||||
case 'header' : newTag = 'H1'; break;
|
case 'header' : newTag = 'H1'; break;
|
||||||
case 'quote' : newTag = 'BLOCKQUOTE'; break;
|
case 'quote' : newTag = 'BLOCKQUOTE'; break;
|
||||||
|
@ -412,8 +455,6 @@ cEditor.toolbar = {
|
||||||
*/
|
*/
|
||||||
move : function(destinationBlock) {
|
move : function(destinationBlock) {
|
||||||
|
|
||||||
console.log(cEditor.nodes.toolbar);
|
|
||||||
|
|
||||||
var newYCoordinate = destinationBlock.offsetTop - cEditor.toolbar.defaultOffset -
|
var newYCoordinate = destinationBlock.offsetTop - cEditor.toolbar.defaultOffset -
|
||||||
cEditor.nodes.toolbar.clientHeight;
|
cEditor.nodes.toolbar.clientHeight;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue