mirror of
https://github.com/codex-team/editor.js
synced 2024-06-29 02:40:23 +02:00
quote plugin - begiing
This commit is contained in:
parent
3a96e94d5b
commit
ad1b4fd849
231
codex-editor.js
231
codex-editor.js
|
@ -922,6 +922,17 @@ cEditor.content = {
|
||||||
newBlock.dataset.type = blockType;
|
newBlock.dataset.type = blockType;
|
||||||
|
|
||||||
|
|
||||||
|
/** Content-editable blocks. We can set focus to such blocks and hang listeners */
|
||||||
|
switch (blockType) {
|
||||||
|
case 'header' :
|
||||||
|
case 'paragraph':
|
||||||
|
case 'quote' :
|
||||||
|
case 'list' :
|
||||||
|
cEditor.ui.addBlockHandlers(newBlock);
|
||||||
|
break;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
if (workingNode) {
|
if (workingNode) {
|
||||||
|
|
||||||
cEditor.core.insertAfter(workingNode, newBlock);
|
cEditor.core.insertAfter(workingNode, newBlock);
|
||||||
|
@ -2076,3 +2087,223 @@ cEditor.tools.header = {
|
||||||
save : headerTool.save
|
save : headerTool.save
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/** QUOTE PLUGIN **/
|
||||||
|
|
||||||
|
var quoteTools = {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Make Quote from JSON datasets
|
||||||
|
*/
|
||||||
|
makeBlockToAppend : function(data) {
|
||||||
|
|
||||||
|
var tag;
|
||||||
|
|
||||||
|
if (data && data.text) {
|
||||||
|
|
||||||
|
switch (data.type) {
|
||||||
|
case 'simple':
|
||||||
|
tag = quoteTools.makeSimpleQuote(data);
|
||||||
|
break;
|
||||||
|
case 'withCaption':
|
||||||
|
tag = quoteTools.makeQuoteWithCaption(data);
|
||||||
|
break;
|
||||||
|
case 'withPhoto':
|
||||||
|
tag = quoteTools.makeQuoteWithPhoto(data);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
|
||||||
|
tag = document.createElement('BLOCKQUOTE');
|
||||||
|
tag.contentEditable = 'true';
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return tag;
|
||||||
|
},
|
||||||
|
|
||||||
|
render : function(data) {
|
||||||
|
return quoteTools.makeBlockToAppend(data);
|
||||||
|
},
|
||||||
|
|
||||||
|
save : function(block) {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parses to JSON quote block and get from there:
|
||||||
|
* @param {Text} text, {Text} author, {Object} photo
|
||||||
|
*/
|
||||||
|
parsedblock = quoteTools.parseBlockQuote(block);
|
||||||
|
|
||||||
|
var data = {
|
||||||
|
type : 'quote',
|
||||||
|
text : parsedblock.text,
|
||||||
|
author : parsedblock.author,
|
||||||
|
photo : parsedblock.photo,
|
||||||
|
};
|
||||||
|
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
|
||||||
|
makeSettings : function(data) {
|
||||||
|
|
||||||
|
var holder = document.createElement('DIV'),
|
||||||
|
caption = document.createElement('SPAN'),
|
||||||
|
types = {
|
||||||
|
simple : 'Простая цитата',
|
||||||
|
withCaption : 'Цитата с подписью',
|
||||||
|
withPhoto : 'Цитата с фото и ФИО'
|
||||||
|
},
|
||||||
|
selectTypeButton;
|
||||||
|
|
||||||
|
/** Add holder classname */
|
||||||
|
holder.className = 'ce_plugin_quote--settings'
|
||||||
|
|
||||||
|
/** Add settings helper caption */
|
||||||
|
caption.textContent = 'Настройки цитат';
|
||||||
|
caption.className = 'ce_plugin_quote--caption';
|
||||||
|
|
||||||
|
holder.appendChild(caption);
|
||||||
|
|
||||||
|
/** Now add type selectors */
|
||||||
|
for (var type in types){
|
||||||
|
|
||||||
|
selectTypeButton = document.createElement('SPAN');
|
||||||
|
|
||||||
|
selectTypeButton.textContent = types[type];
|
||||||
|
|
||||||
|
selectTypeButton.className = 'ce_plugin_quote--select_button';
|
||||||
|
|
||||||
|
this.addSelectTypeClickListener(selectTypeButton, type, data);
|
||||||
|
|
||||||
|
holder.appendChild(selectTypeButton);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return holder;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
addSelectTypeClickListener : function(el, type, data) {
|
||||||
|
|
||||||
|
var quoteStyleFunction;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Choose Quote style to replace
|
||||||
|
*/
|
||||||
|
switch (type) {
|
||||||
|
case 'simple':
|
||||||
|
quoteStyleFunction = quoteTools.makeSimpleQuote;
|
||||||
|
break;
|
||||||
|
case 'withCaption':
|
||||||
|
quoteStyleFunction = quoteTools.makeQuoteWithCaption;
|
||||||
|
break;
|
||||||
|
case 'withPhoto':
|
||||||
|
quoteStyleFunction = quoteTools.makeQuoteWithPhoto;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
el.addEventListener('click', function () {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parsing currentNode to JSON.
|
||||||
|
*/
|
||||||
|
var parsedOldQuote = quoteTools.parseBlockQuote(),
|
||||||
|
newStyledQuote = quoteStyleFunction(parsedOldQuote);
|
||||||
|
|
||||||
|
cEditor.content.replaceBlock(cEditor.content.currentNode, newStyledQuote, 'quote');
|
||||||
|
|
||||||
|
cEditor.ui.addBlockHandlers(newStyledQuote);
|
||||||
|
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
makeSimpleQuote : function(data) {
|
||||||
|
|
||||||
|
|
||||||
|
var blockquote = document.createElement('BLOCKQUOTE');
|
||||||
|
|
||||||
|
blockquote.innerHTML = data.text;
|
||||||
|
blockquote.setAttribute('id', 'text');
|
||||||
|
blockquote.contentEditable = 'true';
|
||||||
|
|
||||||
|
return blockquote;
|
||||||
|
},
|
||||||
|
|
||||||
|
makeQuoteWithCaption : function(data) {
|
||||||
|
|
||||||
|
var block = document.createElement('BLOCKQUOTE');
|
||||||
|
|
||||||
|
var quote = document.createElement('DIV');
|
||||||
|
quote.contentEditable = 'true';
|
||||||
|
quote.setAttribute('id', 'text');
|
||||||
|
quote.innerHTML = data.text;
|
||||||
|
|
||||||
|
var author = document.createElement('DIV');
|
||||||
|
author.contentEditable = 'true';
|
||||||
|
author.setAttribute('id', 'author');
|
||||||
|
author.textContent = data.author;
|
||||||
|
|
||||||
|
block.appendChild(quote);
|
||||||
|
block.appendChild(author);
|
||||||
|
|
||||||
|
return block;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
makeQuoteWithPhoto : function(data) {
|
||||||
|
|
||||||
|
var block = document.createElement('BLOCKQUOTE');
|
||||||
|
|
||||||
|
var photo = document.createElement('DIV');
|
||||||
|
|
||||||
|
var author = document.createElement('DIV');
|
||||||
|
author.contentEditable = 'true';
|
||||||
|
author.setAttribute('id', 'author');
|
||||||
|
author.textContent = data.author;
|
||||||
|
|
||||||
|
var quote = document.createElement('DIV');
|
||||||
|
quote.contentEditable = 'true';
|
||||||
|
quote.setAttribute('id', 'text');
|
||||||
|
quote.innerHTML = data.text;
|
||||||
|
|
||||||
|
block.appendChild(photo);
|
||||||
|
block.appendChild(author);
|
||||||
|
block.appendChild(quote);
|
||||||
|
|
||||||
|
|
||||||
|
return block;
|
||||||
|
},
|
||||||
|
|
||||||
|
parseBlockQuote : function(block) {
|
||||||
|
|
||||||
|
var currentNode = block || cEditor.content.currentNode;
|
||||||
|
|
||||||
|
var quote = currentNode.querySelector('#text') ? currentNode.querySelector('#text').textContent : currentNode.textContent,
|
||||||
|
caption = currentNode.querySelector('#author') ? currentNode.querySelector('#author').textContent : '',
|
||||||
|
avatar = currentNode.querySelector('#photo') || '';
|
||||||
|
|
||||||
|
|
||||||
|
var data = {
|
||||||
|
text : quote,
|
||||||
|
author : caption,
|
||||||
|
photo : avatar,
|
||||||
|
};
|
||||||
|
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
cEditor.tools.quote = {
|
||||||
|
|
||||||
|
type : 'quote',
|
||||||
|
iconClassname : 'ce-icon-quote',
|
||||||
|
append : quoteTools.makeBlockToAppend(),
|
||||||
|
appendCallback : null,
|
||||||
|
settings : quoteTools.makeSettings(),
|
||||||
|
render : quoteTools.render,
|
||||||
|
save : quoteTools.save,
|
||||||
|
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in a new issue