mirror of
https://github.com/codex-team/editor.js
synced 2024-06-02 14:02:17 +02:00
порядок в коде. экспорт/импорт содержимого
экспорт и импорт пока в тестовом режиме по клику на соотв кнопки textarea с которой идет работа - та же самая, что при инициализации, просто видимая надо подумать, когд делать автоматический эскпорт в textarea
This commit is contained in:
parent
2d748485b5
commit
3b546ad322
295
ce_interface.js
295
ce_interface.js
|
@ -141,33 +141,50 @@ ce.prototype.bindEvents = function () {
|
||||||
}, false );
|
}, false );
|
||||||
|
|
||||||
|
|
||||||
/** All blur on Window */
|
/** All mouseover on Window */
|
||||||
document.addEventListener('mouseover', function (event) {
|
document.addEventListener('mouseover', function (event) {
|
||||||
var sender = event.target;
|
_this.globalMouseOverCallback(event);
|
||||||
|
|
||||||
if (sender.classList.contains("node") && !_this.toolbar.isOpened) {
|
|
||||||
var toolbar = _this.toolbar;
|
|
||||||
|
|
||||||
toolbar.style.top = sender.offsetTop + "px";
|
|
||||||
|
|
||||||
toolbar.classList.add("show");
|
|
||||||
}
|
|
||||||
}, false );
|
}, false );
|
||||||
|
|
||||||
|
|
||||||
/** All blur on Window */
|
/** All mouseout on Window */
|
||||||
document.addEventListener('mouseout', function (event) {
|
document.addEventListener('mouseout', function (event) {
|
||||||
var sender = event.target
|
_this.globalMouseOutCallback(event);
|
||||||
|
|
||||||
if (!_this.toolbar.isOpened) {
|
|
||||||
var toolbar = _this.toolbar;
|
|
||||||
|
|
||||||
toolbar.classList.remove("show");
|
|
||||||
}
|
|
||||||
}, false );
|
}, false );
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* All window mouseover handles here
|
||||||
|
*/
|
||||||
|
ce.prototype.globalMouseOverCallback = function (event) {
|
||||||
|
var sender = event.target;
|
||||||
|
|
||||||
|
if (sender.classList.contains("node") && !this.toolbar.isOpened) {
|
||||||
|
var toolbar = this.toolbar;
|
||||||
|
|
||||||
|
toolbar.style.top = sender.offsetTop + "px";
|
||||||
|
|
||||||
|
toolbar.classList.add("show");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* All window mouseout handles here
|
||||||
|
*/
|
||||||
|
ce.prototype.globalMouseOutCallback = function (event) {
|
||||||
|
var sender = event.target;
|
||||||
|
|
||||||
|
if (!this.toolbar.isOpened) {
|
||||||
|
var toolbar = this.toolbar;
|
||||||
|
|
||||||
|
toolbar.classList.remove("show");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Sets focus to node conteneditable child
|
* Sets focus to node conteneditable child
|
||||||
* todo depending on node type
|
* todo depending on node type
|
||||||
|
@ -198,109 +215,77 @@ ce.prototype.isTextSelected = function(){
|
||||||
return !!window.getSelection().toString()
|
return !!window.getSelection().toString()
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Определяет, относится ли нажатая кнопка к навигационным
|
||||||
|
* */
|
||||||
|
ce.prototype.isNavigationKey = function(keyCode){
|
||||||
|
return keyCode == this.key.LEFT || keyCode == this.key.UP || keyCode == this.key.DOWN || keyCode == this.key.RIGHT
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* All window keydowns handles here
|
* All window keydowns handles here
|
||||||
*/
|
*/
|
||||||
ce.prototype.globalKeydownCallback = function (event) {
|
ce.prototype.globalKeydownCallback = function (event) {
|
||||||
console.log("keydown", event);
|
|
||||||
|
|
||||||
var _this = this;
|
/**
|
||||||
|
* Обработка клавиш на панеле добавления
|
||||||
// TODO process key navigation on toolBar then its opened
|
*/
|
||||||
if (this.toolbar.isOpened) {
|
this.processToolBarKeyPressed(event);
|
||||||
if (event.which == this.key.LEFT || event.which == this.key.UP || event.which == this.key.DOWN || event.which == this.key.RIGHT) {
|
|
||||||
this.moveToolBarButtonFocus(event.which == this.key.LEFT || event.which == this.key.UP )
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
//return
|
|
||||||
} else if (event.which == this.key.ENTER) {
|
|
||||||
|
|
||||||
|
|
||||||
// TODO process seleceted toolBtn
|
|
||||||
//insert new node or change type of current?
|
|
||||||
//and close toolbar
|
|
||||||
|
|
||||||
//debugger
|
|
||||||
var btnType = this.focusedToolbarBtn.dataset["type"];
|
|
||||||
|
|
||||||
switch (btnType){
|
|
||||||
|
|
||||||
case "header":
|
|
||||||
// TODO insertHeader()
|
|
||||||
|
|
||||||
// TODO make.HeaderNode()
|
|
||||||
var header = document.createElement("h2");
|
|
||||||
|
|
||||||
header.classList.add("node");
|
|
||||||
header.dataset["type"] = "header";
|
|
||||||
|
|
||||||
var curNode = this.getFocusedNode();
|
|
||||||
|
|
||||||
header.textContent = curNode.textContent;
|
|
||||||
curNode.textContent = "";
|
|
||||||
|
|
||||||
// insert before, if curNode is paragraph or header or some other text-editable node
|
|
||||||
if (curNode.dataset["type"] == "text")
|
|
||||||
curNode.parentNode.insertBefore(header, curNode);
|
|
||||||
// else insert header node after
|
|
||||||
else
|
|
||||||
curNode.parentNode.insertBefore(header, curNode.nextSibling);
|
|
||||||
|
|
||||||
this.focusNode(header);
|
|
||||||
|
|
||||||
break;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO closeToolar()
|
|
||||||
var toolbar = this.toolbar;
|
|
||||||
|
|
||||||
toolbar.isOpened = false;
|
|
||||||
this.focusedToolbarBtn.classList.remove("focused");
|
|
||||||
this.focusedToolbarBtn = false;
|
|
||||||
|
|
||||||
// repair buttons animation - just add css class async
|
|
||||||
setTimeout(function () {
|
|
||||||
toolbar.classList.remove("show");
|
|
||||||
toolbar.classList.remove(_this.BUTTONS_TOGGLED_CLASSNANE);
|
|
||||||
});
|
|
||||||
|
|
||||||
// TODO do the same by mouse clicking on any toolbar btn
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
return
|
|
||||||
|
|
||||||
} else if (event.which != this.key.TAB && event.which != this.key.SHIFT) {
|
|
||||||
|
|
||||||
var toolbar = this.toolbar;
|
|
||||||
|
|
||||||
toolbar.isOpened = false;
|
|
||||||
this.focusedToolbarBtn.classList.remove("focused");
|
|
||||||
this.focusedToolbarBtn = false;
|
|
||||||
|
|
||||||
// repair buttons animation - just add css class async
|
|
||||||
setTimeout(function () {
|
|
||||||
toolbar.classList.remove("show");
|
|
||||||
toolbar.classList.remove(_this.BUTTONS_TOGGLED_CLASSNANE);
|
|
||||||
});
|
|
||||||
|
|
||||||
//event.preventDefault();
|
|
||||||
//return
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.which == this.key.TAB)
|
|
||||||
this.tabKeyPressed(event)
|
|
||||||
|
|
||||||
//
|
//
|
||||||
switch (event.keyCode){
|
switch (event.keyCode){
|
||||||
//case this.key.TAB : this.tabKeyPressed(event); break; // TAB
|
case this.key.TAB : this.tabKeyPressed(event); break; // TAB
|
||||||
case this.key.ENTER : this.enterKeyPressed.call(_this, event); break; // Enter
|
case this.key.ENTER : this.enterKeyPressed(event); break; // Enter
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Обрабатывает нажатие клавиш при открытой панеле добавления
|
||||||
|
*/
|
||||||
|
ce.prototype.processToolBarKeyPressed = function(event){
|
||||||
|
if (this.toolbar.isOpened) {
|
||||||
|
|
||||||
|
if (this.isNavigationKey(event.which)) {
|
||||||
|
|
||||||
|
this.moveToolBarButtonFocus(event.which == this.key.LEFT || event.which == this.key.UP );
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
} else if (event.which == this.key.ENTER) {
|
||||||
|
// will process later
|
||||||
|
} else if (event.which != this.key.TAB && event.which != this.key.SHIFT) {
|
||||||
|
|
||||||
|
this.closeToolBar();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Closes tool bar (plus btn)
|
||||||
|
*/
|
||||||
|
ce.prototype.closeToolBar = function(){
|
||||||
|
var _this = this,
|
||||||
|
toolbar = this.toolbar;
|
||||||
|
|
||||||
|
toolbar.isOpened = false;
|
||||||
|
this.focusedToolbarBtn.classList.remove("focused");
|
||||||
|
this.focusedToolbarBtn = false;
|
||||||
|
|
||||||
|
// repair buttons animation - just add css class async
|
||||||
|
setTimeout(function () {
|
||||||
|
toolbar.classList.remove("show");
|
||||||
|
toolbar.classList.remove(_this.BUTTONS_TOGGLED_CLASSNANE);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns node which is currently focused
|
* Returns node which is currently focused
|
||||||
*/
|
*/
|
||||||
|
@ -381,33 +366,73 @@ ce.prototype.moveToolBarButtonFocus = function(focusPrev){
|
||||||
*/
|
*/
|
||||||
ce.prototype.enterKeyPressed = function(event) {
|
ce.prototype.enterKeyPressed = function(event) {
|
||||||
|
|
||||||
var _this = this;
|
var _this = this,
|
||||||
|
curNode = this.getFocusedNode();
|
||||||
|
|
||||||
|
/*
|
||||||
|
* обработка выбранной кнопки тулбара
|
||||||
|
* */
|
||||||
if (this.toolbar.isOpened) {
|
if (this.toolbar.isOpened) {
|
||||||
console.log("has focused btn", this.focusedToolbarBtn)
|
|
||||||
|
switch ( this.focusedToolbarBtn.dataset["type"] ){
|
||||||
|
|
||||||
|
case "header":
|
||||||
|
var header = this.make.headerNode();
|
||||||
|
|
||||||
|
if (curNode.textContent){
|
||||||
|
|
||||||
|
header.textContent = curNode.textContent;
|
||||||
|
curNode.textContent = "";
|
||||||
|
|
||||||
|
// insert before, if curNode is paragraph or header or some other text-editable node
|
||||||
|
if (curNode.dataset["type"] == "text"){
|
||||||
|
curNode.parentNode.insertBefore(header, curNode);
|
||||||
|
curNode.remove();
|
||||||
|
}
|
||||||
|
// else insert header node after
|
||||||
|
else
|
||||||
|
curNode.parentNode.insertBefore(header, curNode.nextSibling);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
curNode.parentNode.insertBefore(header, curNode);
|
||||||
|
curNode.remove();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.focusNode(header);
|
||||||
|
|
||||||
|
break;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.closeToolBar();
|
||||||
|
|
||||||
|
// TODO do the same by mouse clicking on any toolbar btn
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
return
|
|
||||||
}
|
}
|
||||||
|
/*
|
||||||
|
* Перехват создания нового параграфа при нахождении в заголовке.
|
||||||
|
* По-умолчанию создается просто div.
|
||||||
|
* */
|
||||||
|
else {
|
||||||
|
|
||||||
var sel = window.getSelection();
|
if (curNode.dataset["type"] == "header" && !this.isTextSelected()) {
|
||||||
var curNode = this.getFocusedNode();
|
var newNode = this.make.textNode();
|
||||||
|
|
||||||
|
/** Add node */
|
||||||
|
this.editableWrapper.insertBefore(newNode, curNode.nextSibling);
|
||||||
|
|
||||||
if (curNode.dataset["type"] == "header" && !this.isTextSelected()) {
|
/** Set auto focus */
|
||||||
var newNode = this.make.textNode();
|
setTimeout(function () {
|
||||||
|
|
||||||
/** Add node */
|
_this.focusNode(newNode);
|
||||||
this.editableWrapper.insertBefore(newNode, curNode.nextSibling);
|
});
|
||||||
|
|
||||||
/** Set auto focus */
|
event.preventDefault();
|
||||||
setTimeout(function () {
|
}
|
||||||
|
|
||||||
_this.focusNode(newNode);
|
|
||||||
});
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -477,6 +502,21 @@ ce.prototype.make = function () {
|
||||||
return node;
|
return node;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Header node
|
||||||
|
*/
|
||||||
|
function headerNode (content){
|
||||||
|
|
||||||
|
var node = document.createElement('h2');
|
||||||
|
|
||||||
|
node.classList.add("node");
|
||||||
|
node.dataset["type"] = "header";
|
||||||
|
|
||||||
|
node.innerHTML = content || '';
|
||||||
|
|
||||||
|
return node;
|
||||||
|
}
|
||||||
|
|
||||||
function editorWrapper () {
|
function editorWrapper () {
|
||||||
|
|
||||||
var wrapper = document.createElement('div'),
|
var wrapper = document.createElement('div'),
|
||||||
|
@ -496,8 +536,9 @@ ce.prototype.make = function () {
|
||||||
this.toolbar = toolbar;
|
this.toolbar = toolbar;
|
||||||
this.toolbarButtons = toolbarButtons;
|
this.toolbarButtons = toolbarButtons;
|
||||||
this.toolbarButton = toolbarButton;
|
this.toolbarButton = toolbarButton;
|
||||||
this.textNode = textNode;
|
|
||||||
this.editorWrapper = editorWrapper;
|
this.editorWrapper = editorWrapper;
|
||||||
|
this.textNode = textNode;
|
||||||
|
this.headerNode = headerNode;
|
||||||
};
|
};
|
||||||
|
|
||||||
return new ceMake();
|
return new ceMake();
|
||||||
|
|
|
@ -85,6 +85,7 @@
|
||||||
.codex_editor .node{
|
.codex_editor .node{
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
|
min-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.codex_editor .add_buttons{
|
.codex_editor .add_buttons{
|
||||||
|
@ -168,7 +169,6 @@
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-height: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.codex_editor {position: relative;}
|
.codex_editor {position: relative;}
|
||||||
|
|
Loading…
Reference in a new issue