plugins

.gitignore

@@ -5,5 +5,4 @@ Thumbs.db
 /*.sublime-project
 /*.sublime-workspace
 
-node_modules/*
-plugins/*
+node_modules/*

plugins/code/code.css

@@ -0,0 +1,25 @@
+.ce-code {
+ display: block;
+ border: 1px solid #ebeef3;
+ border-radius: 3px;
+ background: #fdfdff !important;
+
+ margin: 1em 0 !important;
+ padding: .5em .8em;
+ box-sizing: border-box;
+ white-space: pre-wrap;
+
+ font-family: 'monospace', 'monaco', 'consolas', 'courier';
+ line-height: 1.5em;
+ color: #325179;
+ font-size: .8em;
+}
+
+
+/**
+* CodeX Editor styles overlay
+* @todo change for ce-tool-wrapper__code
+*/
+.ce_block[data-type="code"]{
+ padding: 1em 0 !important;
+}

plugins/code/code.js

@@ -0,0 +1,72 @@
+/**
+ * Code Plugin\
+ * Creates code tag and adds content to this tag
+ */
+var codeTool = {
+
+ baseClass : "ce-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.add(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 (blockContent){
+
+ var data = {
+ text : null,
+ };
+
+ data.text = blockContent.innerHTML;
+
+ return data;
+
+ }
+
+};
+
+/**
+ * Now plugin is ready.
+ * Add it to redactor tools
+ */
+// codeTool = {
+//
+// type : 'code',
+// iconClassname : 'ce-icon-code',
+// make : codeTool.make,
+// appendCallback : null,
+// settings : null,
+// render : codeTool.render,
+// save : codeTool.save,
+// displayInToolbox : true,
+// enableLineBreaks : true
+//
+// };

plugins/header/header.css

@@ -0,0 +1,41 @@
+/**
+* Plugin styles
+*/
+.ce-header {
+ padding: .7em 0;
+ margin: 0;
+ line-height: 1.4em;
+}
+.ce-header p,
+.ce-header div{
+ padding: 0 !important;
+ margin: 0 !important;
+}
+
+/** H e a d e r - settings */
+.ce_plugin_header--select_button{
+ display: block;
+ color: #306ac7;
+ cursor: pointer;
+ line-height: 1.3em;
+}
+ .ce_plugin_header--select_button:not(:last-of-type){
+ margin-bottom: 1.5em;
+ }
+ .ce_plugin_header--select_button:hover{
+ color: #a1b4ec;
+ }
+
+
+/**
+* Empty header placeholder
+*/
+.ce-header:empty::before{
+ content : attr(data-placeholder);
+ color: #818BA1;
+ opacity: .7;
+ transition: opacity 200ms ease;
+}
+.ce-header:focus::before{
+ opacity: .1;
+}

plugins/header/header.js

@@ -0,0 +1,177 @@
+/**
+* Example of making plugin
+* H e a d e r
+*/
+var headerTool = {
+
+ /**
+ * Make initial header block
+ * @param {object} JSON with block data
+ * @return {Element} element to append
+ */
+ make : function (data) {
+
+ var availableTypes = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'],
+ tag;
+
+ if (data && data.type && availableTypes.includes(data.type)) {
+
+ tag = document.createElement( data.type );
+
+ /**
+ * Save header type in data-attr.
+ * We need it in save method to extract type from HTML to JSON
+ */
+ tag.dataset.headerData = data.type;
+
+ } else {
+
+ tag = document.createElement( 'H2' );
+ tag.dataset.headerData = 'H2';
+
+ }
+
+ if (data && data.text) {
+ tag.textContent = data.text;
+ }
+
+ tag.classList.add('ce-header');
+ tag.setAttribute('data-placeholder', 'Heading');
+ tag.contentEditable = true;
+
+ return tag;
+
+ },
+
+ /**
+ * Method to render HTML block from JSON
+ */
+ render : function (data) {
+
+ return headerTool.make(data);
+
+ },
+
+ /**
+ * Method to extract JSON data from HTML block
+ */
+ save : function (blockContent) {
+
+ var data = {
+ "heading-styles": blockContent.dataset.headerData,
+ format:"html",
+ text : null,
+
+ };
+
+ data.text = blockContent.textContent;
+
+ return data;
+
+ },
+
+ /**
+ * Block appending callback
+ */
+ appendCallback : function (argument) {
+
+ console.log('header appended...');
+
+ },
+
+ /**
+ * Settings panel content
+ * - - - - - - - - - - - - -
+ * | настройки H1 H2 H3 |
+ * - - - - - - - - - - - - -
+ * @return {Element} element contains all settings
+ */
+ makeSettings : function () {
+
+ var holder = document.createElement('DIV'),
+ types = {
+ H2: 'Заголовок раздела',
+ H3: 'Подзаголовок',
+ H4: 'Заголовок 3-его уровня'
+ },
+ selectTypeButton;
+
+ /** Add holder classname */
+ holder.className = 'ce_plugin_header--settings';
+
+ /** Now add type selectors */
+ for (var type in types){
+
+ selectTypeButton = document.createElement('SPAN');
+
+ selectTypeButton.textContent = types[type];
+ selectTypeButton.className = 'ce_plugin_header--select_button';
+
+ this.addSelectTypeClickListener(selectTypeButton, type);
+
+ holder.appendChild(selectTypeButton);
+
+ }
+
+ return holder;
+
+ },
+
+ /**
+ * Binds click event to passed button
+ */
+ addSelectTypeClickListener : function (el, type) {
+
+ el.addEventListener('click', function () {
+
+ headerTool.selectTypeClicked(type);
+
+ }, false);
+ },
+
+ /**
+ * Replaces old header with new type
+ * @params {string} type - new header tagName: H1—H6
+ */
+ selectTypeClicked : function (type) {
+
+ var old_header, new_header;
+
+ /** Now current header stored as a currentNode */
+ old_header = codex.content.currentNode.querySelector('[contentEditable]');
+
+ /** Making new header */
+ new_header = document.createElement(type);
+
+ new_header.innerHTML = old_header.innerHTML;
+ new_header.contentEditable = true;
+ new_header.setAttribute('data-placeholder', 'Heading');
+ new_header.classList.add('ce-header');
+
+ new_header.dataset.headerData = type;
+
+ codex.content.switchBlock(old_header, new_header, 'header');
+
+ /** Close settings after replacing */
+ codex.toolbar.settings.close();
+ },
+
+};
+
+/**
+* Now plugin is ready.
+* Add it to redactor tools
+*/
+// headerTool = {
+//
+// type : 'header',
+// iconClassname : 'ce-icon-header',
+// make : headerTool.make,
+// appendCallback : headerTool.appendCallback,
+// settings : headerTool.makeSettings(),
+// render : headerTool.render,
+// save : headerTool.save,
+// displayInToolbox : true,
+// enableLineBreaks : false
+//
+// };