mirror of
https://github.com/codex-team/editor.js
synced 2024-06-17 13:15:20 +02:00
review refactoring
This commit is contained in:
parent
09df6ad75b
commit
e0e9eb2649
130
ce_interface.js
130
ce_interface.js
|
@ -5,40 +5,22 @@
|
||||||
|
|
||||||
var ce = function(settings) {
|
var ce = function(settings) {
|
||||||
|
|
||||||
this.textareaId = "codex_editor";
|
this.resultTextarea = document.getElementById("codex_editor");
|
||||||
this.resultTextarea = document.getElementById(this.textareaId);
|
|
||||||
|
|
||||||
if (typeof this.resultTextarea == undefined || this.resultTextarea == null ){
|
if (typeof this.resultTextarea == undefined || this.resultTextarea == null ){
|
||||||
|
|
||||||
console.warn('Textarea not found with ID %o', this.textareaId);
|
console.warn('Textarea not found with ID %o', this.textareaId);
|
||||||
return this;
|
return this;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// prepare settings
|
/* Prepare settings */
|
||||||
this.allTools = ['header', 'picture', 'list', 'quote', 'code', 'twitter', 'instagram', 'smile'];
|
if ("undefined" == typeof settings) settings = this.defaultSettings;
|
||||||
|
|
||||||
var defaultSettings = {
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
if ("undefined" == typeof settings || "object" != typeof settings)
|
|
||||||
settings = defaultSettings;
|
|
||||||
else {
|
else {
|
||||||
// todo just merge settings with defaults
|
// todo just merge settings with defaults
|
||||||
}
|
}
|
||||||
|
|
||||||
if ("undefined" == typeof settings.tools || !Array.isArray(settings.tools))
|
settings.tools = settings.tools || this.allTools;
|
||||||
settings.tools = this.allTools;
|
this.settings = settings;
|
||||||
|
|
||||||
this.settings = settings;
|
|
||||||
|
|
||||||
/** Some configurations */
|
|
||||||
this.toolbarOpened = false;
|
|
||||||
|
|
||||||
this.BUTTONS_TOGGLED_CLASSNANE = 'buttons_toggled';
|
|
||||||
this.key = { TAB: 9, ENTER: 13, BACKSPACE: 8, DELETE: 46, DOWN: 40, SPACE: 32, ESC: 27, CTRL: 17, META: 91, SHIFT: 16, ALT: 18 };
|
|
||||||
|
|
||||||
/** Making a wrapper and interface */
|
/** Making a wrapper and interface */
|
||||||
this.makeInterface();
|
this.makeInterface();
|
||||||
|
@ -48,49 +30,47 @@ var ce = function(settings) {
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// All posible tools
|
||||||
|
ce.prototype.allTools = ['header', 'picture', 'list', 'quote', 'code', 'twitter', 'instagram', 'smile'];
|
||||||
|
|
||||||
|
// Default settings configuration
|
||||||
|
ce.prototype.defaultSettings = {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add this class when open tool bar for css animation
|
||||||
|
ce.prototype.BUTTONS_TOGGLED_CLASSNANE = 'buttons_toggled';
|
||||||
|
|
||||||
|
// Default tool bar is closed
|
||||||
|
ce.prototype.toolbarOpened = false;
|
||||||
|
|
||||||
|
// Key event constants
|
||||||
|
ce.prototype.key = { TAB: 9, ENTER: 13, BACKSPACE: 8, DELETE: 46, DOWN: 40, SPACE: 32, ESC: 27, CTRL: 17, META: 91, SHIFT: 16, ALT: 18 };
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Editor interface drawing
|
* Editor interface drawing
|
||||||
|
* calls one time in editor constructor
|
||||||
*/
|
*/
|
||||||
ce.prototype.makeInterface = function () {
|
ce.prototype.makeInterface = function () {
|
||||||
|
|
||||||
var wrapper = this.make.editorWrapper(),
|
var wrapper = this.make.editorWrapper(),
|
||||||
firstNode = this.make.textNode('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quia nihil repellendus aut cupiditate reprehenderit sapiente magnam nobis doloremque eaque! Sint nobis assumenda nisi ducimus minima illo tenetur, cumque facilis.' ),
|
firstNode = this.make.textNode('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quia nihil repellendus aut cupiditate reprehenderit sapiente magnam nobis doloremque eaque! Sint nobis assumenda nisi ducimus minima illo tenetur, cumque facilis.' ),
|
||||||
toolbar = this.make.toolbar(),
|
toolbar = this.make.toolbar();
|
||||||
button,
|
|
||||||
tool;
|
|
||||||
|
|
||||||
this.wrapper = wrapper;
|
this.wrapper = wrapper;
|
||||||
this.toolbar = toolbar;
|
this.toolbar = toolbar;
|
||||||
|
|
||||||
this.toolbarButtons = document.createElement("span");
|
this.toolbarButtons = this.make.toolbarButtons(this.allTools, this.settings.tools);
|
||||||
this.toolbarButtons.classList.add("buttons");
|
|
||||||
|
|
||||||
// îáõîäèì áàçîâûé ñïèñîê, ÷òîáû ñîõðàíèòü îðèãèíàëüíóþ ïîñëåäîâàòåëüíîñòü êíîïîê
|
/** Add first node and tool bar*/
|
||||||
for (var i = 0; i < this.allTools.length; i++) {
|
|
||||||
tool = this.allTools[i];
|
|
||||||
|
|
||||||
if (this.settings.tools.indexOf(tool) < 0)
|
|
||||||
continue;
|
|
||||||
|
|
||||||
button = this.make.toolbarButton(tool);
|
|
||||||
this.toolbarButtons.appendChild(button);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/** Add first node */
|
|
||||||
wrapper.appendChild(firstNode);
|
wrapper.appendChild(firstNode);
|
||||||
|
|
||||||
/** Add toolbar to node */
|
|
||||||
wrapper.appendChild(toolbar);
|
wrapper.appendChild(toolbar);
|
||||||
|
|
||||||
/** Insert Editor after initial textarea. Hide textarea */
|
/** Insert Editor after initial textarea. Hide textarea */
|
||||||
this.resultTextarea.parentNode.insertBefore(wrapper, this.resultTextarea.nextSibling);
|
this.resultTextarea.parentNode.insertBefore(wrapper, this.resultTextarea.nextSibling);
|
||||||
this.resultTextarea.hidden = true;
|
this.resultTextarea.hidden = true;
|
||||||
|
|
||||||
/** Set auto focus */
|
this.focusNode(firstNode);
|
||||||
var contentEditable = firstNode.getElementsByClassName('ce_node_content');
|
|
||||||
contentEditable.length && contentEditable[0].focus();
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -107,6 +87,17 @@ ce.prototype.bindEvents = function () {
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sets focus to node conteneditable child
|
||||||
|
* todo depending on node type
|
||||||
|
*/
|
||||||
|
ce.prototype.focusNode = function (node) {
|
||||||
|
|
||||||
|
var contentEditable = node.getElementsByClassName('ce_node_content');
|
||||||
|
contentEditable.length && contentEditable[0].focus();
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* All window keydowns handles here
|
* All window keydowns handles here
|
||||||
*/
|
*/
|
||||||
|
@ -125,15 +116,14 @@ ce.prototype.globalKeydownCallback = function (event) {
|
||||||
ce.prototype.tabKeyPressed = function(event) {
|
ce.prototype.tabKeyPressed = function(event) {
|
||||||
|
|
||||||
// check if currently focused in contenteditable element
|
// check if currently focused in contenteditable element
|
||||||
if ("BODY" == event.target.tagName)
|
if ("BODY" == event.target.tagName) return;
|
||||||
return;
|
|
||||||
|
|
||||||
var toolbar = event.target.parentNode.nextSibling,
|
var toolbar = event.target.parentNode.nextSibling,
|
||||||
_this = this;
|
_this = this;
|
||||||
|
|
||||||
toolbar.appendChild(this.toolbarButtons);
|
toolbar.appendChild(this.toolbarButtons);
|
||||||
|
|
||||||
// repair buttons animation
|
// repair buttons animation - just add css class async
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
|
|
||||||
if ( !toolbar.className.includes(_this.BUTTONS_TOGGLED_CLASSNANE) ){
|
if ( !toolbar.className.includes(_this.BUTTONS_TOGGLED_CLASSNANE) ){
|
||||||
|
@ -144,7 +134,7 @@ ce.prototype.tabKeyPressed = function(event) {
|
||||||
_this.toolbarOpened = false
|
_this.toolbarOpened = false
|
||||||
}
|
}
|
||||||
|
|
||||||
}, 10);
|
});
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
|
@ -158,11 +148,9 @@ ce.prototype.enterKeyPressed = function(event) {
|
||||||
if (event.shiftKey){
|
if (event.shiftKey){
|
||||||
document.execCommand('insertHTML', false, '<br><br>');
|
document.execCommand('insertHTML', false, '<br><br>');
|
||||||
} else {
|
} else {
|
||||||
var
|
var newNode = this.make.textNode(),
|
||||||
newNode = this.make.textNode(),
|
|
||||||
toolbar = this.make.toolbar();
|
toolbar = this.make.toolbar();
|
||||||
|
|
||||||
|
|
||||||
/** Add node */
|
/** Add node */
|
||||||
this.wrapper.insertBefore(newNode, event.target.parentNode.nextSibling);
|
this.wrapper.insertBefore(newNode, event.target.parentNode.nextSibling);
|
||||||
|
|
||||||
|
@ -182,6 +170,8 @@ ce.prototype.enterKeyPressed = function(event) {
|
||||||
*/
|
*/
|
||||||
ce.prototype.make = function () {
|
ce.prototype.make = function () {
|
||||||
|
|
||||||
|
var _this = this;
|
||||||
|
|
||||||
/** Empty toolbar with toggler */
|
/** Empty toolbar with toggler */
|
||||||
function toolbar () {
|
function toolbar () {
|
||||||
|
|
||||||
|
@ -197,6 +187,7 @@ ce.prototype.make = function () {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Creates one button with given type
|
||||||
function toolbarButton (type) {
|
function toolbarButton (type) {
|
||||||
|
|
||||||
var button = document.createElement('button');
|
var button = document.createElement('button');
|
||||||
|
@ -205,6 +196,26 @@ ce.prototype.make = function () {
|
||||||
button.innerHTML = '<i class="ce_icon-' + type + '"></i>';
|
button.innerHTML = '<i class="ce_icon-' + type + '"></i>';
|
||||||
|
|
||||||
return button;
|
return button;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Creates all tool bar buttons from editor settings
|
||||||
|
// allTools, usedTools - needs becose cant get them from editor object - bad context
|
||||||
|
function toolbarButtons (allTools, usedTools) {
|
||||||
|
|
||||||
|
var toolbarButtons = document.createElement("span");
|
||||||
|
|
||||||
|
toolbarButtons.classList.add("buttons");
|
||||||
|
|
||||||
|
// Walk base buttons list - save buttons origin sorting
|
||||||
|
allTools.forEach(function(item) {
|
||||||
|
|
||||||
|
if (usedTools.indexOf(item) >= 0) toolbarButtons.appendChild( this.toolbarButton(item) );
|
||||||
|
|
||||||
|
}, this);
|
||||||
|
|
||||||
|
return toolbarButtons;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -231,10 +242,11 @@ ce.prototype.make = function () {
|
||||||
}
|
}
|
||||||
|
|
||||||
var ceMake = function () {
|
var ceMake = function () {
|
||||||
this.toolbar = toolbar;
|
this.toolbar = toolbar;
|
||||||
this.toolbarButton = toolbarButton;
|
this.toolbarButtons = toolbarButtons;
|
||||||
this.textNode = textNode;
|
this.toolbarButton = toolbarButton;
|
||||||
this.editorWrapper = editorWrapper;
|
this.textNode = textNode;
|
||||||
|
this.editorWrapper = editorWrapper;
|
||||||
};
|
};
|
||||||
|
|
||||||
return new ceMake();
|
return new ceMake();
|
||||||
|
|
141
editor.css
141
editor.css
|
@ -84,21 +84,21 @@
|
||||||
|
|
||||||
.codex_editor .node{
|
.codex_editor .node{
|
||||||
position: relative;
|
position: relative;
|
||||||
|
z-index: 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.codex_editor .add_buttons{
|
.codex_editor .add_buttons{
|
||||||
/* position: relative; */
|
|
||||||
/* left: -42px; */
|
|
||||||
/* top: -30px; */
|
|
||||||
color: #3b4352;
|
color: #3b4352;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-left: -42px;
|
margin-left: -42px;
|
||||||
margin-top: -20px;
|
margin-top: -50px;
|
||||||
margin-bottom: -25px;
|
margin-bottom: -25px;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.add_buttons .buttons {
|
.add_buttons .buttons {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
top: 3px;
|
||||||
}
|
}
|
||||||
.codex_editor .add_buttons button:hover,
|
.codex_editor .add_buttons button:hover,
|
||||||
.codex_editor .add_buttons .focused{
|
.codex_editor .add_buttons .focused{
|
||||||
|
@ -109,10 +109,10 @@
|
||||||
transform: translate3d(-50px, 0 , 0);
|
transform: translate3d(-50px, 0 , 0);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
/*display: none;*/
|
|
||||||
}
|
}
|
||||||
.codex_editor .buttons_toggled{
|
.codex_editor .buttons_toggled{
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
.codex_editor .buttons_toggled button{
|
.codex_editor .buttons_toggled button{
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
@ -121,8 +121,6 @@
|
||||||
|
|
||||||
|
|
||||||
.codex_editor .toggler{
|
.codex_editor .toggler{
|
||||||
/* position: relative; */
|
|
||||||
/* left: -42px; */
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 23px;
|
font-size: 23px;
|
||||||
color: #387ff5;
|
color: #387ff5;
|
||||||
|
@ -133,137 +131,12 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
}
|
}
|
||||||
.codex_editor .buttons_toggled .plus_btn{
|
.codex_editor .buttons_toggled .toggler{
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/** Typography styles */
|
/** Typography styles */
|
||||||
.codex_editor p{
|
.codex_editor p{
|
||||||
margin: 30px 0;
|
margin: 30px 0;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
.editor_content {}
|
|
||||||
.editor_content label {display:block;margin-bottom:10px;}
|
|
||||||
.editor_content input[type=file]{}
|
|
||||||
.editor_content textarea{}
|
|
||||||
*/
|
|
||||||
/*
|
|
||||||
.editor_content button#btn_save{
|
|
||||||
padding: 5px 15px;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
.editor_content .cover{
|
|
||||||
border: 1px solid gray;
|
|
||||||
width: 96%;
|
|
||||||
display: block;
|
|
||||||
margin: 5px 0 15px 0;
|
|
||||||
padding: 2%;
|
|
||||||
}
|
|
||||||
.editor_content .cover img{max-width: 100%;margin: auto;display: block;}
|
|
||||||
|
|
||||||
.editor_content .cover .actions {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.editor_content .cover .actions a{
|
|
||||||
margin: 0 10px;
|
|
||||||
border-bottom: 1px dashed;
|
|
||||||
}
|
|
||||||
.editor_content .cover .actions a:hover{
|
|
||||||
text-decoration:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor_content .actions span{
|
|
||||||
|
|
||||||
color: #6091c8;
|
|
||||||
|
|
||||||
margin-right: 15px;
|
|
||||||
|
|
||||||
border-bottom: 1px dashed;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.editor_content .add_buttons{
|
|
||||||
width: 300px;
|
|
||||||
margin: 21px auto;
|
|
||||||
padding: 10px 0;
|
|
||||||
text-align: center;
|
|
||||||
background: #F2F2F6;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.editor_content .add_buttons:before{
|
|
||||||
content: "";
|
|
||||||
background: no-repeat url(/public/img/editor_buttons.png) -135px 0px;
|
|
||||||
position: absolute;
|
|
||||||
padding: 10px;
|
|
||||||
left: 140px;
|
|
||||||
top: 17px;
|
|
||||||
}
|
|
||||||
.editor_content .add_buttons:hover:before{background-image: none;}
|
|
||||||
.editor_content .add_buttons:hover button{
|
|
||||||
visibility: visible;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
.editor_content .add_buttons button {
|
|
||||||
float: none;
|
|
||||||
padding: 5px;
|
|
||||||
margin: 0px 0px;
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
border: none;
|
|
||||||
position: relative;
|
|
||||||
visibility: hidden;
|
|
||||||
z-index: -1;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
.editor_content .add_buttons button:before {
|
|
||||||
content: "";
|
|
||||||
background: no-repeat url(/public/img/editor_buttons.png?) 0;
|
|
||||||
position: absolute;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
left: 8px;
|
|
||||||
top: 8px;
|
|
||||||
}
|
|
||||||
.editor_content .add_buttons .paragraph:before{
|
|
||||||
background-position: -156px -1px;
|
|
||||||
}
|
|
||||||
.editor_content .add_buttons .img:before{
|
|
||||||
background-position: -27px 0;
|
|
||||||
width: 22px;
|
|
||||||
left: 7px;
|
|
||||||
}
|
|
||||||
.editor_content .add_buttons .list:before{
|
|
||||||
background-position: -56px 0;
|
|
||||||
width: 21px;
|
|
||||||
}
|
|
||||||
.editor_content .node{
|
|
||||||
border: 1px dashed;
|
|
||||||
padding: 5px;
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
.editor_content .node .content{}
|
|
||||||
.editor_content .node .content p{min-height: 25px;}
|
|
||||||
.editor_content .node .action_buttons{
|
|
||||||
border-top: 1px dashed;
|
|
||||||
text-align: right;
|
|
||||||
padding: 5px 0 0;
|
|
||||||
}
|
|
||||||
.editor_content .node .action_buttons button{
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor_wrapper #html_result {
|
|
||||||
height: 350px;
|
|
||||||
}*/
|
|
Loading…
Reference in a new issue