mirror of
https://github.com/codex-team/editor.js
synced 2024-06-26 09:20:07 +02:00
Tool list (#69)
* Add tool-list Add rendering Remove unneccessary files * Add settings for list plugin * remove code stylws * default paramètres iimproved * remove logs
This commit is contained in:
parent
120ae9793d
commit
90f1a20863
|
@ -278,4 +278,7 @@
|
||||||
<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" />
|
<link rel="stylesheet" href="plugins/ceditor-tool-quote/ceditor-tool-quote.css" />
|
||||||
|
|
||||||
|
<script src="plugins/ceditor-tool-list/ceditor-tool-list.js"></script>
|
||||||
|
<link rel="stylesheet" href="plugins/ceditor-tool-list/ceditor-tool-list.css" />
|
||||||
|
|
||||||
<script src="plugins/images/plugin.js"></script>
|
<script src="plugins/images/plugin.js"></script>
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 329 B |
21
plugins/ceditor-tool-list/ceditor-tool-list.css
Normal file
21
plugins/ceditor-tool-list/ceditor-tool-list.css
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
.ce_plugin_list--settings{
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce_plugin_list--caption{
|
||||||
|
color: #b9c2c2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce_plugin_list--select_button{
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 40px;
|
||||||
|
border-bottom: 1px solid #c3d5ed;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
color: #5399d4;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ce_plugin_list--select_button:hover{
|
||||||
|
border-bottom-color: #f6d8da;
|
||||||
|
color: #cc7d74;
|
||||||
|
}
|
166
plugins/ceditor-tool-list/ceditor-tool-list.js
Normal file
166
plugins/ceditor-tool-list/ceditor-tool-list.js
Normal file
|
@ -0,0 +1,166 @@
|
||||||
|
/**
|
||||||
|
* Code Plugin\
|
||||||
|
* Creates code tag and adds content to this tag
|
||||||
|
*/
|
||||||
|
var listTool = {
|
||||||
|
|
||||||
|
baseClass : "tool-list",
|
||||||
|
elementClasses : {
|
||||||
|
li : "tool-list-li"
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Make initial header block
|
||||||
|
* @param {object} JSON with block data
|
||||||
|
* @return {Element} element to append
|
||||||
|
*/
|
||||||
|
make : function () {
|
||||||
|
|
||||||
|
var tag = listTool.ui.make(),
|
||||||
|
li = listTool.ui.block("li", "tool-link-li");
|
||||||
|
|
||||||
|
tag.appendChild(li);
|
||||||
|
|
||||||
|
return tag;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method to render HTML block from JSON
|
||||||
|
*/
|
||||||
|
render : function (data) {
|
||||||
|
|
||||||
|
var type = data.type == 'ordered' ? 'OL' : 'UL',
|
||||||
|
tag = listTool.ui.make(type);
|
||||||
|
|
||||||
|
data.items.forEach(function (element, index, array) {
|
||||||
|
|
||||||
|
var newLi = listTool.ui.block("li", listTool.elementClasses.li);
|
||||||
|
|
||||||
|
newLi.innerHTML = element;
|
||||||
|
|
||||||
|
tag.appendChild(newLi);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
return tag;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method to extract JSON data from HTML block
|
||||||
|
*/
|
||||||
|
save : function (block){
|
||||||
|
|
||||||
|
var data = {
|
||||||
|
text : null
|
||||||
|
};
|
||||||
|
|
||||||
|
data.text = blockData.textContent;
|
||||||
|
|
||||||
|
return data;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
makeSettings : function(data) {
|
||||||
|
|
||||||
|
var holder = document.createElement('DIV'),
|
||||||
|
caption = document.createElement('SPAN'),
|
||||||
|
selectTypeButton;
|
||||||
|
|
||||||
|
/** Add holder classname */
|
||||||
|
holder.className = 'ce_plugin_list--settings';
|
||||||
|
|
||||||
|
/** Add settings helper caption */
|
||||||
|
caption.textContent = 'Настройки списков';
|
||||||
|
caption.className = 'ce_plugin_list--caption';
|
||||||
|
|
||||||
|
var orderedButton = listTool.ui.button("ordered"),
|
||||||
|
unorderedButton = listTool.ui.button("unordered");
|
||||||
|
|
||||||
|
orderedButton.addEventListener('click', function (event) {
|
||||||
|
listTool.changeBlockStyle(event, 'ol');
|
||||||
|
cEditor.toolbar.settings.close();
|
||||||
|
});
|
||||||
|
|
||||||
|
unorderedButton.addEventListener('click', function (event) {
|
||||||
|
listTool.changeBlockStyle(event, 'ul');
|
||||||
|
cEditor.toolbar.settings.close();
|
||||||
|
});
|
||||||
|
|
||||||
|
holder.appendChild(caption);
|
||||||
|
holder.appendChild(orderedButton);
|
||||||
|
holder.appendChild(unorderedButton);
|
||||||
|
|
||||||
|
return holder;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
changeBlockStyle : function (event, blockType) {
|
||||||
|
|
||||||
|
var currentBlock = cEditor.content.currentNode,
|
||||||
|
newEditable = listTool.ui.make(blockType),
|
||||||
|
oldEditable = currentBlock.querySelector("[contenteditable]");
|
||||||
|
|
||||||
|
newEditable.innerHTML = oldEditable.innerHTML;
|
||||||
|
|
||||||
|
currentBlock.appendChild(newEditable);
|
||||||
|
oldEditable.remove();
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
listTool.ui = {
|
||||||
|
|
||||||
|
make : function (blockType) {
|
||||||
|
|
||||||
|
var wrapper = this.block(blockType || 'UL', listTool.baseClass);
|
||||||
|
|
||||||
|
wrapper.contentEditable = true;
|
||||||
|
|
||||||
|
return wrapper;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
block : function (blockType, blockClass) {
|
||||||
|
|
||||||
|
var block = document.createElement(blockType);
|
||||||
|
|
||||||
|
if ( blockClass ) block.classList.add(blockClass);
|
||||||
|
|
||||||
|
return block;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
button : function (buttonType) {
|
||||||
|
|
||||||
|
var types = {
|
||||||
|
unordered : 'Обычный список',
|
||||||
|
ordered : 'Нумерованный список'
|
||||||
|
},
|
||||||
|
button = document.createElement('SPAN');
|
||||||
|
|
||||||
|
button.textContent = types[buttonType];
|
||||||
|
|
||||||
|
button.className = 'ce_plugin_list--select_button';
|
||||||
|
|
||||||
|
return button;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Now plugin is ready.
|
||||||
|
* Add it to redactor tools
|
||||||
|
*/
|
||||||
|
cEditor.tools.list = {
|
||||||
|
|
||||||
|
type : 'list',
|
||||||
|
iconClassname : 'ce-icon-list-bullet',
|
||||||
|
make : listTool.make,
|
||||||
|
appendCallback : null,
|
||||||
|
settings : listTool.makeSettings(),
|
||||||
|
render : listTool.render,
|
||||||
|
save : listTool.save
|
||||||
|
|
||||||
|
};
|
Loading…
Reference in a new issue