mirror of
https://github.com/codex-team/editor.js
synced 2024-06-28 18:30:25 +02:00
Tool code (#67)
* Add error background * Add tool code Fix switch block and insert block for new system with div wrappers * Remove unneccessary appendChild * Fix css in tool code
This commit is contained in:
parent
e228172a5c
commit
0626ca1f07
|
@ -950,7 +950,7 @@ cEditor.content = {
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Add redactor block classname to new block */
|
/** Add redactor block classname to new block */
|
||||||
newBlock.classList.add(cEditor.ui.BLOCK_CLASSNAME);
|
// newBlock.classList.add(cEditor.ui.BLOCK_CLASSNAME);
|
||||||
|
|
||||||
/** Store block type */
|
/** Store block type */
|
||||||
newBlock.dataset.type = newBlockType;
|
newBlock.dataset.type = newBlockType;
|
||||||
|
@ -977,13 +977,9 @@ cEditor.content = {
|
||||||
*/
|
*/
|
||||||
insertBlock : function(newBlockContent, blockType) {
|
insertBlock : function(newBlockContent, blockType) {
|
||||||
|
|
||||||
var workingBlock = cEditor.content.currentNode,
|
var workingBlock = cEditor.content.currentNode;
|
||||||
newBlock = cEditor.draw.block('DIV');
|
|
||||||
|
|
||||||
newBlock.classList.add(cEditor.ui.BLOCK_CLASSNAME);
|
var newBlock = cEditor.content.composeNewBlock(newBlockContent, blockType);
|
||||||
newBlock.dataset.type = blockType;
|
|
||||||
|
|
||||||
newBlock.appendChild(newBlockContent);
|
|
||||||
|
|
||||||
if (workingBlock) {
|
if (workingBlock) {
|
||||||
|
|
||||||
|
@ -1089,16 +1085,20 @@ cEditor.content = {
|
||||||
* @param {Element} newNode
|
* @param {Element} newNode
|
||||||
* @param {Element} blockType
|
* @param {Element} blockType
|
||||||
*/
|
*/
|
||||||
switchBlock : function(nodeToReplace, newNode, blockType){
|
switchBlock : function(blockToReplace, newBlock, blockType){
|
||||||
|
|
||||||
|
var oldBlockEditable = blockToReplace.querySelector('[contenteditable]');
|
||||||
|
|
||||||
/** Saving content */
|
/** Saving content */
|
||||||
newNode.innerHTML = nodeToReplace.innerHTML;
|
newBlock.innerHTML = oldBlockEditable.innerHTML;
|
||||||
|
|
||||||
|
var newBlockComposed = cEditor.content.composeNewBlock(newBlock, blockType);
|
||||||
|
|
||||||
/** Replacing */
|
/** Replacing */
|
||||||
cEditor.content.replaceBlock(nodeToReplace, newNode, blockType);
|
cEditor.content.replaceBlock(blockToReplace, newBlockComposed, blockType);
|
||||||
|
|
||||||
/** Add event listeners */
|
/** Add event listeners */
|
||||||
cEditor.ui.addBlockHandlers(newNode);
|
cEditor.ui.addBlockHandlers(newBlock);
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -1177,6 +1177,19 @@ cEditor.content = {
|
||||||
}
|
}
|
||||||
|
|
||||||
return block;
|
return block;
|
||||||
|
},
|
||||||
|
|
||||||
|
composeNewBlock : function (block, blockType) {
|
||||||
|
|
||||||
|
newBlock = cEditor.draw.block('DIV');
|
||||||
|
|
||||||
|
newBlock.classList.add(cEditor.ui.BLOCK_CLASSNAME);
|
||||||
|
newBlock.dataset.type = blockType;
|
||||||
|
|
||||||
|
newBlock.appendChild(block);
|
||||||
|
|
||||||
|
return newBlock;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
@ -1439,21 +1452,21 @@ cEditor.toolbar = {
|
||||||
tool = cEditor.tools[cEditor.toolbar.current],
|
tool = cEditor.tools[cEditor.toolbar.current],
|
||||||
workingNode = cEditor.content.currentNode,
|
workingNode = cEditor.content.currentNode,
|
||||||
appendCallback,
|
appendCallback,
|
||||||
newBlock;
|
newBlockContent;
|
||||||
|
|
||||||
/** Make block from plugin */
|
/** Make block from plugin */
|
||||||
newBlock = tool.make();
|
newBlockContent = tool.make();
|
||||||
|
|
||||||
/** Can replace? */
|
/** Can replace? */
|
||||||
if (REPLACEBLE_TOOLS.indexOf(tool.type) != -1 && workingNode) {
|
if (REPLACEBLE_TOOLS.indexOf(tool.type) != -1 && workingNode) {
|
||||||
|
|
||||||
/** Replace current block */
|
/** Replace current block */
|
||||||
cEditor.content.switchBlock(workingNode, newBlock, tool.type);
|
cEditor.content.switchBlock(workingNode, newBlockContent, tool.type);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
/** Insert new Block from plugin */
|
/** Insert new Block from plugin */
|
||||||
cEditor.content.insertBlock(newBlock, tool.type);
|
cEditor.content.insertBlock(newBlockContent, tool.type);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -166,13 +166,7 @@
|
||||||
.ce_redactor li{
|
.ce_redactor li{
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
}
|
}
|
||||||
.ce_redactor code{
|
|
||||||
display: block;
|
|
||||||
font-family: 'monospace', 'monaco', 'consolas', 'courier';
|
|
||||||
line-height: 1.5em;
|
|
||||||
background: #f8f8fd !important;
|
|
||||||
color: #4a8bd1;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.ce_redactor .ce_block{
|
.ce_redactor .ce_block{
|
||||||
|
|
|
@ -21,8 +21,6 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<link rel="stylesheet" href="plugins/ceditor-tool-link/ceditor-tool-link.css" />
|
|
||||||
<link rel="stylesheet" href="plugins/ceditor-tool-quote/ceditor-tool-quote.css" />
|
|
||||||
<link rel="stylesheet" href="plugins/images/plugin.css" />
|
<link rel="stylesheet" href="plugins/images/plugin.css" />
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
@ -272,5 +270,12 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script src="plugins/ceditor-tool-link/ceditor-tool-link.js"></script>
|
<script src="plugins/ceditor-tool-link/ceditor-tool-link.js"></script>
|
||||||
|
<link rel="stylesheet" href="plugins/ceditor-tool-link/ceditor-tool-link.css" />
|
||||||
|
|
||||||
|
<script src="plugins/ceditor-tool-code/ceditor-tool-code.js"></script>
|
||||||
|
<link rel="stylesheet" href="plugins/ceditor-tool-code/ceditor-tool-code.css" />
|
||||||
|
|
||||||
<script src="plugins/ceditor-tool-quote/ceditor-tool-quote.js"></script>
|
<script src="plugins/ceditor-tool-quote/ceditor-tool-quote.js"></script>
|
||||||
|
<link rel="stylesheet" href="plugins/ceditor-tool-quote/ceditor-tool-quote.css" />
|
||||||
|
|
||||||
<script src="plugins/images/plugin.js"></script>
|
<script src="plugins/images/plugin.js"></script>
|
||||||
|
|
7
plugins/ceditor-tool-code/ceditor-tool-code.css
Normal file
7
plugins/ceditor-tool-code/ceditor-tool-code.css
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
.tool-code {
|
||||||
|
display: block;
|
||||||
|
font-family: 'monospace', 'monaco', 'consolas', 'courier';
|
||||||
|
line-height: 1.5em;
|
||||||
|
background: #f8f8fd !important;
|
||||||
|
color: #4a8bd1;
|
||||||
|
}
|
70
plugins/ceditor-tool-code/ceditor-tool-code.js
Normal file
70
plugins/ceditor-tool-code/ceditor-tool-code.js
Normal file
|
@ -0,0 +1,70 @@
|
||||||
|
/**
|
||||||
|
* Code Plugin\
|
||||||
|
* Creates code tag and adds content to this tag
|
||||||
|
*/
|
||||||
|
var codeTool = {
|
||||||
|
|
||||||
|
baseClass : "tool-code",
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Make initial header block
|
||||||
|
* @param {object} JSON with block data
|
||||||
|
* @return {Element} element to append
|
||||||
|
*/
|
||||||
|
make : function (data) {
|
||||||
|
|
||||||
|
var tag = document.createElement('code');
|
||||||
|
|
||||||
|
tag.classList += codeTool.baseClass;
|
||||||
|
|
||||||
|
if (data && data.text) {
|
||||||
|
tag.innerHTML = data.text;
|
||||||
|
}
|
||||||
|
|
||||||
|
tag.contentEditable = true;
|
||||||
|
|
||||||
|
return tag;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method to render HTML block from JSON
|
||||||
|
*/
|
||||||
|
render : function (data) {
|
||||||
|
|
||||||
|
return codeTool.make(data);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method to extract JSON data from HTML block
|
||||||
|
*/
|
||||||
|
save : function (block){
|
||||||
|
|
||||||
|
var data = {
|
||||||
|
text : null
|
||||||
|
};
|
||||||
|
|
||||||
|
data.text = blockData.textContent;
|
||||||
|
|
||||||
|
return data;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Now plugin is ready.
|
||||||
|
* Add it to redactor tools
|
||||||
|
*/
|
||||||
|
cEditor.tools.code = {
|
||||||
|
|
||||||
|
type : 'code',
|
||||||
|
iconClassname : 'ce-icon-code',
|
||||||
|
make : codeTool.make,
|
||||||
|
appendCallback : null,
|
||||||
|
settings : null,
|
||||||
|
render : codeTool.render,
|
||||||
|
save : codeTool.save
|
||||||
|
|
||||||
|
};
|
BIN
plugins/ceditor-tool-code/loading.gif
Normal file
BIN
plugins/ceditor-tool-code/loading.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 329 B |
Loading…
Reference in a new issue