From 0626ca1f0769274cd061d989bd5731cfb2769ccf Mon Sep 17 00:00:00 2001 From: Menshikov Alexander Date: Sat, 2 Jul 2016 19:18:38 +0300 Subject: [PATCH] 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 --- codex-editor.js | 43 +++++++---- editor.css | 8 +- example.html | 9 ++- .../ceditor-tool-code/ceditor-tool-code.css | 7 ++ .../ceditor-tool-code/ceditor-tool-code.js | 70 ++++++++++++++++++ plugins/ceditor-tool-code/loading.gif | Bin 0 -> 329 bytes 6 files changed, 113 insertions(+), 24 deletions(-) create mode 100644 plugins/ceditor-tool-code/ceditor-tool-code.css create mode 100644 plugins/ceditor-tool-code/ceditor-tool-code.js create mode 100644 plugins/ceditor-tool-code/loading.gif diff --git a/codex-editor.js b/codex-editor.js index 17f08002..25ad6ae5 100644 --- a/codex-editor.js +++ b/codex-editor.js @@ -950,7 +950,7 @@ cEditor.content = { } /** Add redactor block classname to new block */ - newBlock.classList.add(cEditor.ui.BLOCK_CLASSNAME); + // newBlock.classList.add(cEditor.ui.BLOCK_CLASSNAME); /** Store block type */ newBlock.dataset.type = newBlockType; @@ -977,13 +977,9 @@ cEditor.content = { */ insertBlock : function(newBlockContent, blockType) { - var workingBlock = cEditor.content.currentNode, - newBlock = cEditor.draw.block('DIV'); + var workingBlock = cEditor.content.currentNode; - newBlock.classList.add(cEditor.ui.BLOCK_CLASSNAME); - newBlock.dataset.type = blockType; - - newBlock.appendChild(newBlockContent); + var newBlock = cEditor.content.composeNewBlock(newBlockContent, blockType); if (workingBlock) { @@ -1089,16 +1085,20 @@ cEditor.content = { * @param {Element} newNode * @param {Element} blockType */ - switchBlock : function(nodeToReplace, newNode, blockType){ + switchBlock : function(blockToReplace, newBlock, blockType){ + + var oldBlockEditable = blockToReplace.querySelector('[contenteditable]'); /** Saving content */ - newNode.innerHTML = nodeToReplace.innerHTML; + newBlock.innerHTML = oldBlockEditable.innerHTML; + + var newBlockComposed = cEditor.content.composeNewBlock(newBlock, blockType); /** Replacing */ - cEditor.content.replaceBlock(nodeToReplace, newNode, blockType); + cEditor.content.replaceBlock(blockToReplace, newBlockComposed, blockType); /** Add event listeners */ - cEditor.ui.addBlockHandlers(newNode); + cEditor.ui.addBlockHandlers(newBlock); }, @@ -1177,6 +1177,19 @@ cEditor.content = { } 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], workingNode = cEditor.content.currentNode, appendCallback, - newBlock; + newBlockContent; /** Make block from plugin */ - newBlock = tool.make(); + newBlockContent = tool.make(); /** Can replace? */ if (REPLACEBLE_TOOLS.indexOf(tool.type) != -1 && workingNode) { /** Replace current block */ - cEditor.content.switchBlock(workingNode, newBlock, tool.type); + cEditor.content.switchBlock(workingNode, newBlockContent, tool.type); } else { /** Insert new Block from plugin */ - cEditor.content.insertBlock(newBlock, tool.type); + cEditor.content.insertBlock(newBlockContent, tool.type); } diff --git a/editor.css b/editor.css index 05291091..19643e52 100644 --- a/editor.css +++ b/editor.css @@ -166,13 +166,7 @@ .ce_redactor li{ 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{ diff --git a/example.html b/example.html index f6c57dee..84629238 100644 --- a/example.html +++ b/example.html @@ -21,8 +21,6 @@ } - - @@ -272,5 +270,12 @@ + + + + + + + diff --git a/plugins/ceditor-tool-code/ceditor-tool-code.css b/plugins/ceditor-tool-code/ceditor-tool-code.css new file mode 100644 index 00000000..836595a2 --- /dev/null +++ b/plugins/ceditor-tool-code/ceditor-tool-code.css @@ -0,0 +1,7 @@ +.tool-code { + display: block; + font-family: 'monospace', 'monaco', 'consolas', 'courier'; + line-height: 1.5em; + background: #f8f8fd !important; + color: #4a8bd1; +} \ No newline at end of file diff --git a/plugins/ceditor-tool-code/ceditor-tool-code.js b/plugins/ceditor-tool-code/ceditor-tool-code.js new file mode 100644 index 00000000..0821b4a3 --- /dev/null +++ b/plugins/ceditor-tool-code/ceditor-tool-code.js @@ -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 + +}; \ No newline at end of file diff --git a/plugins/ceditor-tool-code/loading.gif b/plugins/ceditor-tool-code/loading.gif new file mode 100644 index 0000000000000000000000000000000000000000..72ea7ccb5321d5384d70437cfaac73011237901e GIT binary patch literal 329 zcmZ?wbhEHb9b#5NV>2k zBC~b@b~P=nNfWAe-b%_i6tS^-1y(h@EsB~1TqDA_h@fkxG$bHgvj}VxE1JLgr!*!^ ILUxTc0Q$^Q5C8xG literal 0 HcmV?d00001