mirror of
https://github.com/codex-team/editor.js
synced 2026-03-16 15:45:47 +01:00
Update v1.5 to v1.5.4 (#169)
* quote now saves HTML in author and job * Quote.js improved * Fix (#165) * Remove tool type from switchBlock -> by default it will saved from previous (#166) * small fixes regex match must not be similar to pasted string. Ex: ```https://www.instagram.com/p/BQ3wxmlA5GN/?taken-by=thenotoriousmma`` and match is ```https://www.instagram.com/p/BQ3wxmlA5GN/```. ```SwitchBlock``` have 3 parameter that is not important * new instagram embed regex * raw plugin added (#163) * raw plugin added * Try to paste raw html to raw plugin * insert text/plain to native area instead of contenteditable element * styles updated * rename variable * fixed raw backspace click handler * paste code * Replace mask with two svg icons * Toolbox leaf fix * Remove data in example.html * Toolbar and caret behavior improvments * upd * Upd * new bundle due the local merge * new ui module (#167)
This commit is contained in:
khaydarov
Peter Savchenko
parent
70b506c202
commit
fe40755aa9
24 changed files with 365 additions and 136 deletions
|
|
@ -112,6 +112,7 @@
|
|||
margin-right: 17px;
|
||||
border-radius: 16px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
codex.js
1
codex.js
|
|
@ -131,7 +131,6 @@ module.exports = (function (editor) {
|
|||
|
||||
// If all ok, make UI, bind events and parse initial-content
|
||||
.then(editor.ui.make)
|
||||
.then(editor.ui.addTools)
|
||||
.then(editor.ui.bindEvents)
|
||||
.then(editor.tools.prepare)
|
||||
.then(editor.paste.prepare)
|
||||
|
|
|
|||
27
example.html
27
example.html
|
|
@ -51,6 +51,9 @@
|
|||
<script src="plugins/embed/embed.js"></script>
|
||||
<link rel="stylesheet" href="plugins/embed/embed.css">
|
||||
|
||||
<script src="plugins/raw/raw.js"></script>
|
||||
<link rel="stylesheet" href="plugins/raw/raw.css">
|
||||
|
||||
<script>
|
||||
codex.editor.start({
|
||||
textareaId : "codex_area",
|
||||
|
|
@ -68,8 +71,8 @@
|
|||
showInlineToolbar: true,
|
||||
allowRenderOnPaste: true
|
||||
},
|
||||
heading_styled: {
|
||||
type: 'heading_styled',
|
||||
header: {
|
||||
type: 'header',
|
||||
iconClassname: 'ce-icon-header',
|
||||
appendCallback: header.appendCallback,
|
||||
makeSettings: header.makeSettings,
|
||||
|
|
@ -120,8 +123,8 @@
|
|||
enableLineBreaks: true,
|
||||
allowedToPaste: true,
|
||||
},
|
||||
quote_styled: {
|
||||
type: 'quote_styled',
|
||||
quote: {
|
||||
type: 'quote',
|
||||
iconClassname: 'ce-icon-quote',
|
||||
makeSettings: quote.makeSettings,
|
||||
prepare: quote.prepare,
|
||||
|
|
@ -158,7 +161,7 @@
|
|||
type: 'instagram',
|
||||
iconClassname: 'ce-icon-instagram',
|
||||
prepare: instagram.prepare,
|
||||
render: instagram.reneder,
|
||||
render: instagram.render,
|
||||
validate: instagram.validate,
|
||||
save: instagram.save,
|
||||
destroy: instagram.destroy,
|
||||
|
|
@ -186,6 +189,17 @@
|
|||
destroy: embed.destroy,
|
||||
validate: embed.validate,
|
||||
renderOnPastePatterns: embed.pastePatterns,
|
||||
},
|
||||
raw: {
|
||||
type: 'raw',
|
||||
displayInToolbox: true,
|
||||
iconClassname: 'raw-plugin-icon',
|
||||
render: rawPlugin.render,
|
||||
save: rawPlugin.save,
|
||||
validate: rawPlugin.validate,
|
||||
destroy: rawPlugin.destroy,
|
||||
enableLineBreaks: true,
|
||||
allowPasteHTML: true
|
||||
}
|
||||
},
|
||||
data : {
|
||||
|
|
@ -209,11 +223,10 @@
|
|||
type : 'OL',
|
||||
items : [1,3,4]
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
count: 3
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* Codex Editor callbacks module
|
||||
*
|
||||
* @author Codex Team
|
||||
* @version 1.3.7
|
||||
* @version 1.3.10
|
||||
*/
|
||||
|
||||
module.exports = (function (callbacks) {
|
||||
|
|
@ -41,7 +41,23 @@ module.exports = (function (callbacks) {
|
|||
|
||||
callbacks.tabKeyPressed = function (event) {
|
||||
|
||||
var blockIsEmpty = !editor.content.currentNode.textContent.trim();
|
||||
|
||||
var inputs = editor.content.currentNode.querySelectorAll('textarea, input'),
|
||||
inputsAreEmpty = true,
|
||||
textContentIsEmpty = !editor.content.currentNode.textContent.trim();
|
||||
|
||||
Array.prototype.map.call(inputs, function (input) {
|
||||
|
||||
if (input.type == 'textarea' || input.type == 'text') {
|
||||
|
||||
inputsAreEmpty = inputsAreEmpty && !input.value.trim();
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
var blockIsEmpty = textContentIsEmpty && inputsAreEmpty;
|
||||
|
||||
if (!blockIsEmpty) {
|
||||
|
||||
|
|
@ -691,6 +707,21 @@ module.exports = (function (callbacks) {
|
|||
selectionLength,
|
||||
firstLevelBlocksCount;
|
||||
|
||||
if (isNativeInput(event.target)) {
|
||||
|
||||
/** If input value is empty - remove block */
|
||||
if (event.target.value.trim() == '') {
|
||||
|
||||
block.remove();
|
||||
|
||||
} else {
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (block.textContent.trim()) {
|
||||
|
||||
range = editor.content.getRange();
|
||||
|
|
@ -818,11 +849,18 @@ module.exports = (function (callbacks) {
|
|||
*/
|
||||
callbacks.blockPasteCallback = function (event) {
|
||||
|
||||
/** If area is input or textarea then allow default behaviour */
|
||||
if ( isNativeInput(event.target) ) {
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
/** Prevent default behaviour */
|
||||
event.preventDefault();
|
||||
|
||||
var editableParent = editor.content.getEditableParent(event.target),
|
||||
firstLevelBlock = editor.content.getFirstLevelBlock(event.target);
|
||||
currentNode = editor.content.currentNode;
|
||||
|
||||
/** Allow paste when event target placed in Editable element */
|
||||
if (!editableParent) {
|
||||
|
|
@ -832,7 +870,8 @@ module.exports = (function (callbacks) {
|
|||
}
|
||||
|
||||
/** get html pasted data - dirty data */
|
||||
var data = event.clipboardData.getData('text/html') || event.clipboardData.getData('text/plain');
|
||||
var htmlData = event.clipboardData.getData('text/html'),
|
||||
plainData = event.clipboardData.getData('text/plain');
|
||||
|
||||
/** Temporary DIV that is used to work with childs as arrays item */
|
||||
var div = editor.draw.node('DIV', '', {}),
|
||||
|
|
@ -843,9 +882,16 @@ module.exports = (function (callbacks) {
|
|||
/** Create fragment, that we paste to range after proccesing */
|
||||
fragment = document.createDocumentFragment();
|
||||
|
||||
cleanData = cleaner.clean(data);
|
||||
if ( htmlData.trim() != '' ) {
|
||||
|
||||
div.innerHTML = cleanData;
|
||||
cleanData = cleaner.clean(htmlData);
|
||||
div.innerHTML = cleanData;
|
||||
|
||||
} else {
|
||||
|
||||
div.innerText = plainData.toString();
|
||||
|
||||
}
|
||||
|
||||
var node, lastNode;
|
||||
|
||||
|
|
@ -859,7 +905,7 @@ module.exports = (function (callbacks) {
|
|||
}
|
||||
|
||||
|
||||
if (editor.tools[firstLevelBlock.dataset.tool].allowRenderOnPaste) {
|
||||
if (editor.tools[currentNode.dataset.tool].allowRenderOnPaste) {
|
||||
|
||||
if (editor.paste.pasted(event)) return;
|
||||
|
||||
|
|
@ -933,6 +979,18 @@ module.exports = (function (callbacks) {
|
|||
|
||||
};
|
||||
|
||||
/**
|
||||
* Check block for
|
||||
* @param target
|
||||
*/
|
||||
var isNativeInput = function (target) {
|
||||
|
||||
var nativeInputAreas = ['INPUT', 'TEXTAREA'];
|
||||
|
||||
return (nativeInputAreas.indexOf(target.tagName) != -1);
|
||||
|
||||
};
|
||||
|
||||
return callbacks;
|
||||
|
||||
})({});
|
||||
|
|
@ -49,7 +49,7 @@ module.exports = (function (caret) {
|
|||
}
|
||||
|
||||
/** If Element is INPUT */
|
||||
if (el.tagName == 'INPUT') {
|
||||
if (el.contentEditable != 'true') {
|
||||
|
||||
el.focus();
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* Works with DOM
|
||||
*
|
||||
* @author Codex Team
|
||||
* @version 1.3.11
|
||||
* @version 1.3.12
|
||||
*/
|
||||
|
||||
module.exports = (function (content) {
|
||||
|
|
@ -347,6 +347,7 @@ module.exports = (function (content) {
|
|||
*/
|
||||
content.switchBlock = function (blockToReplace, newBlock, tool) {
|
||||
|
||||
tool = tool || editor.content.currentNode.dataset.tool;
|
||||
var newBlockComposed = editor.content.composeNewBlock(newBlock, tool);
|
||||
|
||||
/** Replacing */
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* Codex Editor Paste module
|
||||
*
|
||||
* @author Codex Team
|
||||
* @version 1.0
|
||||
* @version 1.1.1
|
||||
*/
|
||||
|
||||
module.exports = function (paste) {
|
||||
|
|
@ -25,6 +25,7 @@ module.exports = function (paste) {
|
|||
|
||||
tools[tool].renderOnPastePatterns.map(function (pattern) {
|
||||
|
||||
|
||||
patterns.push(pattern);
|
||||
|
||||
});
|
||||
|
|
@ -69,7 +70,10 @@ module.exports = function (paste) {
|
|||
|
||||
patterns.map( function (pattern) {
|
||||
|
||||
if (pattern.regex.test(string)) {
|
||||
var execArray = pattern.regex.exec(string),
|
||||
match = execArray && execArray[0];
|
||||
|
||||
if ( match && match === string.trim()) {
|
||||
|
||||
/** current block is not empty */
|
||||
if ( content.textContent.trim() && plugin == editor.settings.initialBlockPlugin ) {
|
||||
|
|
|
|||
|
|
@ -46,6 +46,8 @@ module.exports = (function (toolbox) {
|
|||
/** toolbox state */
|
||||
editor.toolbar.toolbox.opened = false;
|
||||
|
||||
editor.toolbar.current = null;
|
||||
|
||||
};
|
||||
|
||||
toolbox.leaf = function () {
|
||||
|
|
@ -75,21 +77,14 @@ module.exports = (function (toolbox) {
|
|||
|
||||
} else {
|
||||
|
||||
nextToolIndex = tools.indexOf(currentTool) + 1;
|
||||
nextToolIndex = (tools.indexOf(currentTool) + 1) % tools.length;
|
||||
visibleTool = tools[nextToolIndex];
|
||||
|
||||
while (!editor.tools[visibleTool].displayInToolbox) {
|
||||
|
||||
nextToolIndex++;
|
||||
nextToolIndex = (nextToolIndex + 1) % tools.length;
|
||||
visibleTool = tools[nextToolIndex];
|
||||
|
||||
if ( nextToolIndex == tools.length ) {
|
||||
|
||||
nextToolIndex = 0;
|
||||
visibleTool = tools[nextToolIndex];
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
217
modules/ui.js
217
modules/ui.js
|
|
@ -2,7 +2,7 @@
|
|||
* Codex Editor UI module
|
||||
*
|
||||
* @author Codex Team
|
||||
* @version 1.1
|
||||
* @version 1.2.0
|
||||
*/
|
||||
|
||||
module.exports = (function (ui) {
|
||||
|
|
@ -58,90 +58,54 @@ module.exports = (function (ui) {
|
|||
*/
|
||||
ui.make = function () {
|
||||
|
||||
var wrapper,
|
||||
toolbar,
|
||||
toolbarContent,
|
||||
redactor,
|
||||
blockButtons,
|
||||
blockSettings,
|
||||
showSettingsButton,
|
||||
showTrashButton,
|
||||
toolbox,
|
||||
plusButton;
|
||||
return new Promise(function (resolve) {
|
||||
|
||||
/** Make editor wrapper */
|
||||
wrapper = editor.draw.wrapper();
|
||||
let wrapper = editor.draw.wrapper(),
|
||||
redactor = editor.draw.redactor(),
|
||||
toolbar = makeToolBar_();
|
||||
|
||||
/** Append editor wrapper after initial textarea */
|
||||
editor.core.insertAfter(editor.nodes.textarea, wrapper);
|
||||
wrapper.appendChild(toolbar);
|
||||
wrapper.appendChild(redactor);
|
||||
|
||||
/** Append block with notifications to the document */
|
||||
editor.notifications.createHolder();
|
||||
/** Save created ui-elements to static nodes state */
|
||||
editor.nodes.wrapper = wrapper;
|
||||
editor.nodes.redactor = redactor;
|
||||
|
||||
/** Make toolbar and content-editable redactor */
|
||||
toolbar = editor.draw.toolbar();
|
||||
toolbarContent = editor.draw.toolbarContent();
|
||||
plusButton = editor.draw.plusButton();
|
||||
showSettingsButton = editor.draw.settingsButton();
|
||||
showTrashButton = editor.toolbar.settings.makeRemoveBlockButton();
|
||||
blockSettings = editor.draw.blockSettings();
|
||||
blockButtons = editor.draw.blockButtons();
|
||||
toolbox = editor.draw.toolbox();
|
||||
redactor = editor.draw.redactor();
|
||||
/** Append editor wrapper with redactor zone after initial textarea */
|
||||
editor.core.insertAfter(editor.nodes.textarea, wrapper);
|
||||
|
||||
/** settings */
|
||||
var defaultSettings = editor.draw.defaultSettings(),
|
||||
pluginSettings = editor.draw.pluginsSettings();
|
||||
resolve();
|
||||
|
||||
/** Add default and plugins settings */
|
||||
blockSettings.appendChild(pluginSettings);
|
||||
blockSettings.appendChild(defaultSettings);
|
||||
})
|
||||
|
||||
/** Make blocks buttons
|
||||
* This block contains settings button and remove block button
|
||||
*/
|
||||
blockButtons.appendChild(showSettingsButton);
|
||||
blockButtons.appendChild(showTrashButton);
|
||||
blockButtons.appendChild(blockSettings);
|
||||
|
||||
/** Append plus button */
|
||||
toolbarContent.appendChild(plusButton);
|
||||
|
||||
/** Appending toolbar tools */
|
||||
toolbarContent.appendChild(toolbox);
|
||||
|
||||
/** Appending first-level block buttons */
|
||||
toolbar.appendChild(blockButtons);
|
||||
|
||||
/** Append toolbarContent to toolbar */
|
||||
toolbar.appendChild(toolbarContent);
|
||||
|
||||
wrapper.appendChild(toolbar);
|
||||
|
||||
wrapper.appendChild(redactor);
|
||||
|
||||
/** Save created ui-elements to static nodes state */
|
||||
editor.nodes.wrapper = wrapper;
|
||||
editor.nodes.toolbar = toolbar;
|
||||
editor.nodes.plusButton = plusButton;
|
||||
editor.nodes.toolbox = toolbox;
|
||||
editor.nodes.blockSettings = blockSettings;
|
||||
editor.nodes.pluginSettings = pluginSettings;
|
||||
editor.nodes.defaultSettings = defaultSettings;
|
||||
editor.nodes.showSettingsButton = showSettingsButton;
|
||||
editor.nodes.showTrashButton = showTrashButton;
|
||||
|
||||
editor.nodes.redactor = redactor;
|
||||
/** Add toolbox tools */
|
||||
.then(addTools_)
|
||||
|
||||
/** Make container for inline toolbar */
|
||||
editor.ui.makeInlineToolbar();
|
||||
.then(makeInlineToolbar_)
|
||||
|
||||
/** Add inline toolbar tools */
|
||||
.then(addInlineToolbarTools_)
|
||||
|
||||
/** Draw wrapper for notifications */
|
||||
.then(makeNotificationHolder_)
|
||||
|
||||
/** fill in default settings */
|
||||
editor.toolbar.settings.addDefaultSettings();
|
||||
.then(editor.toolbar.settings.addDefaultSettings)
|
||||
|
||||
.catch( function () {
|
||||
|
||||
editor.core.log("Can't draw editor interface");
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
ui.makeInlineToolbar = function () {
|
||||
/**
|
||||
* @private
|
||||
* Draws inline toolbar zone
|
||||
*/
|
||||
var makeInlineToolbar_ = function () {
|
||||
|
||||
var container = editor.draw.inlineToolbar();
|
||||
|
||||
|
|
@ -162,11 +126,90 @@ module.exports = (function (ui) {
|
|||
|
||||
};
|
||||
|
||||
var makeToolBar_ = function () {
|
||||
|
||||
let toolbar = editor.draw.toolbar(),
|
||||
blockButtons = makeToolbarSettings_(),
|
||||
toolbarContent = makeToolbarContent_();
|
||||
|
||||
/** Appending first-level block buttons */
|
||||
toolbar.appendChild(blockButtons);
|
||||
|
||||
/** Append toolbarContent to toolbar */
|
||||
toolbar.appendChild(toolbarContent);
|
||||
|
||||
/** Make toolbar global */
|
||||
editor.nodes.toolbar = toolbar;
|
||||
|
||||
return toolbar;
|
||||
|
||||
};
|
||||
|
||||
var makeToolbarContent_ = function () {
|
||||
|
||||
let toolbarContent = editor.draw.toolbarContent(),
|
||||
toolbox = editor.draw.toolbox(),
|
||||
plusButton = editor.draw.plusButton();
|
||||
|
||||
/** Append plus button */
|
||||
toolbarContent.appendChild(plusButton);
|
||||
|
||||
/** Appending toolbar tools */
|
||||
toolbarContent.appendChild(toolbox);
|
||||
|
||||
/** Make Toolbox and plusButton global */
|
||||
editor.nodes.toolbox = toolbox;
|
||||
editor.nodes.plusButton = plusButton;
|
||||
|
||||
return toolbarContent;
|
||||
|
||||
};
|
||||
|
||||
var makeToolbarSettings_ = function () {
|
||||
|
||||
let blockSettings = editor.draw.blockSettings(),
|
||||
blockButtons = editor.draw.blockButtons(),
|
||||
defaultSettings = editor.draw.defaultSettings(),
|
||||
showSettingsButton = editor.draw.settingsButton(),
|
||||
showTrashButton = editor.toolbar.settings.makeRemoveBlockButton(),
|
||||
pluginSettings = editor.draw.pluginsSettings();
|
||||
|
||||
/** Add default and plugins settings */
|
||||
blockSettings.appendChild(pluginSettings);
|
||||
blockSettings.appendChild(defaultSettings);
|
||||
|
||||
/**
|
||||
* Make blocks buttons
|
||||
* This block contains settings button and remove block button
|
||||
*/
|
||||
blockButtons.appendChild(showSettingsButton);
|
||||
blockButtons.appendChild(showTrashButton);
|
||||
blockButtons.appendChild(blockSettings);
|
||||
|
||||
/** Make BlockSettings, PluginSettings, DefaultSettings global */
|
||||
editor.nodes.blockSettings = blockSettings;
|
||||
editor.nodes.pluginSettings = pluginSettings;
|
||||
editor.nodes.defaultSettings = defaultSettings;
|
||||
editor.nodes.showSettingsButton = showSettingsButton;
|
||||
editor.nodes.showTrashButton = showTrashButton;
|
||||
|
||||
return blockButtons;
|
||||
|
||||
};
|
||||
|
||||
/** Draw notifications holder */
|
||||
var makeNotificationHolder_ = function () {
|
||||
|
||||
/** Append block with notifications to the document */
|
||||
editor.nodes.notifications = editor.notifications.createHolder();
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Append tools passed in editor.tools
|
||||
*/
|
||||
ui.addTools = function () {
|
||||
var addTools_ = function () {
|
||||
|
||||
var tool,
|
||||
toolName,
|
||||
|
|
@ -178,7 +221,7 @@ module.exports = (function (ui) {
|
|||
|
||||
editor.tools[toolName] = tool;
|
||||
|
||||
if (!tool.iconClassname) {
|
||||
if (!tool.iconClassname && tool.displayInToolbox) {
|
||||
|
||||
editor.core.log('Toolbar icon classname missed. Tool %o skipped', 'warn', toolName);
|
||||
continue;
|
||||
|
|
@ -209,15 +252,9 @@ module.exports = (function (ui) {
|
|||
|
||||
}
|
||||
|
||||
/**
|
||||
* Add inline toolbar tools
|
||||
*/
|
||||
editor.ui.addInlineToolbarTools();
|
||||
|
||||
|
||||
};
|
||||
|
||||
ui.addInlineToolbarTools = function () {
|
||||
var addInlineToolbarTools_ = function () {
|
||||
|
||||
var tools = {
|
||||
|
||||
|
|
@ -297,12 +334,6 @@ module.exports = (function (ui) {
|
|||
*/
|
||||
editor.listeners.add(editor.nodes.showSettingsButton, 'click', editor.callback.showSettingsButtonClicked, false );
|
||||
|
||||
/**
|
||||
* @deprecated ( but now in use for syncronization );
|
||||
* Any redactor changes: keyboard input, mouse cut/paste, drag-n-drop text
|
||||
*/
|
||||
// editor.nodes.redactor.addEventListener('input', editor.callback.redactorInputEvent, false );
|
||||
|
||||
/** Bind click listeners on toolbar buttons */
|
||||
for (var button in editor.nodes.toolbarButtons) {
|
||||
|
||||
|
|
@ -351,8 +382,20 @@ module.exports = (function (ui) {
|
|||
|
||||
var redactor = editor.nodes.redactor;
|
||||
|
||||
editor.state.inputs = [];
|
||||
|
||||
/** Save all inputs in global variable state */
|
||||
editor.state.inputs = redactor.querySelectorAll('[contenteditable], input');
|
||||
var inputs = redactor.querySelectorAll('[contenteditable], input, textarea');
|
||||
|
||||
Array.prototype.map.call(inputs, function (current) {
|
||||
|
||||
if (!current.type || current.type == 'text' || current.type == 'textarea') {
|
||||
|
||||
editor.state.inputs.push(current);
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "codex.editor",
|
||||
"version": "1.5.1",
|
||||
"version": "1.5.4",
|
||||
"description": "Codex Editor. Native JS, based on API and Open Source",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ var embed = function(embed_plugin){
|
|||
var methods = {
|
||||
|
||||
addInternal: function (content) {
|
||||
codex.editor.content.switchBlock(codex.editor.content.currentNode, content, 'video_extended');
|
||||
codex.editor.content.switchBlock(codex.editor.content.currentNode, content);
|
||||
|
||||
var blockContent = codex.editor.content.currentNode.childNodes[0];
|
||||
blockContent.classList.add('embed__loader');
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ var header = (function(header_plugin) {
|
|||
new_header.setAttribute('data-placeholder', 'Заголовок');
|
||||
new_header.dataset.headerData = type;
|
||||
|
||||
codex.editor.content.switchBlock(old_header, new_header, 'heading_styled');
|
||||
codex.editor.content.switchBlock(old_header, new_header);
|
||||
|
||||
/** Close settings after replacing */
|
||||
codex.editor.toolbar.settings.close();
|
||||
|
|
|
|||
|
|
@ -369,7 +369,7 @@ var image = (function(image_plugin) {
|
|||
|
||||
var newImage = make_(data);
|
||||
|
||||
codex.editor.content.switchBlock(image.holder, newImage, 'image_extended');
|
||||
codex.editor.content.switchBlock(image.holder, newImage);
|
||||
newImage.classList.add(elementClasses_.imagePreview);
|
||||
|
||||
/**
|
||||
|
|
@ -414,7 +414,7 @@ var image = (function(image_plugin) {
|
|||
var oldHolder = image.holder;
|
||||
var form = ui_.makeForm();
|
||||
|
||||
codex.editor.content.switchBlock(oldHolder, form, 'image_extended');
|
||||
codex.editor.content.switchBlock(oldHolder, form);
|
||||
|
||||
}
|
||||
},
|
||||
|
|
@ -479,7 +479,7 @@ var image = (function(image_plugin) {
|
|||
|
||||
var img = image.querySelector('img');
|
||||
|
||||
codex.editor.content.switchBlock(codex.editor.content.currentNode, image, 'image_extended');
|
||||
codex.editor.content.switchBlock(codex.editor.content.currentNode, image);
|
||||
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ var instagram = (function(instagram_plugin) {
|
|||
|
||||
render : function(content) {
|
||||
|
||||
codex.editor.content.switchBlock(codex.editor.content.currentNode, content, 'instagram');
|
||||
codex.editor.content.switchBlock(codex.editor.content.currentNode, content);
|
||||
|
||||
setTimeout(function() {
|
||||
window.instgrm.Embeds.process();
|
||||
|
|
@ -144,7 +144,7 @@ var instagram = (function(instagram_plugin) {
|
|||
instagram_plugin.pastePatterns = [
|
||||
{
|
||||
type: 'instagram',
|
||||
regex: /http?.+instagram.com\/p\/([a-zA-Z0-9]*)/,
|
||||
regex: /http?.+instagram.com\/p\/([a-zA-Z0-9]*)\S*/,
|
||||
callback: instagram_plugin.urlPastedCallback
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ var list = (function(list_plugin) {
|
|||
newEditable.innerHTML = oldEditable.innerHTML;
|
||||
newEditable.classList.add(elementClasses_.pluginWrapper);
|
||||
|
||||
codex.editor.content.switchBlock(currentBlock, newEditable, 'list');
|
||||
codex.editor.content.switchBlock(currentBlock, newEditable);
|
||||
},
|
||||
keyDown: function (e) {
|
||||
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ var quote = (function(quote_plugin) {
|
|||
/* make Author contentEditable */
|
||||
author.contentEditable = 'true';
|
||||
|
||||
author.textContent = data.cite || '';
|
||||
author.innerHTML = data.cite || '';
|
||||
|
||||
/* Appending created components */
|
||||
wrapper.dataset.quoteStyle = 'withCaption';
|
||||
|
|
@ -200,11 +200,11 @@ var quote = (function(quote_plugin) {
|
|||
|
||||
/* make author block contentEditable */
|
||||
author.contentEditable = 'true';
|
||||
author.textContent = data.cite || '';
|
||||
author.innerHTML = data.cite || '';
|
||||
|
||||
/* Author's position and job */
|
||||
job.contentEditable = 'true';
|
||||
job.textContent = data.caption || '';
|
||||
job.innerHTML = data.caption || '';
|
||||
|
||||
var authorsWrapper = ui_.makeBlock('DIV', [elementClasses_.withPhoto.authorHolder]);
|
||||
authorsWrapper.appendChild(author);
|
||||
|
|
@ -234,20 +234,34 @@ var quote = (function(quote_plugin) {
|
|||
quote ;
|
||||
|
||||
/** Simple quote text placed in Blockquote tag*/
|
||||
if ( currentNode.dataset.quoteStyle == 'simple' )
|
||||
if ( currentNode.dataset.quoteStyle == 'simple' ){
|
||||
|
||||
quote = currentNode.innerHTML || '';
|
||||
else
|
||||
|
||||
} else {
|
||||
|
||||
quote = currentNode.querySelector('.' + elementClasses_.quoteText).innerHTML;
|
||||
|
||||
if (job)
|
||||
job = job.textContent || '';
|
||||
}
|
||||
|
||||
if (author)
|
||||
author = author.textContent || '';
|
||||
if (job){
|
||||
|
||||
job = job.innerHTML || '';
|
||||
|
||||
}
|
||||
|
||||
if (author){
|
||||
|
||||
author = author.innerHTML || '';
|
||||
|
||||
}
|
||||
|
||||
if (photo){
|
||||
|
||||
if (photo)
|
||||
photo = photo.dataset.bigUrl;
|
||||
|
||||
}
|
||||
|
||||
var data = {
|
||||
style : currentNode.dataset.quoteStyle,
|
||||
text : quote,
|
||||
|
|
|
|||
7
plugins/raw/raw-icon-black.svg
Normal file
7
plugins/raw/raw-icon-black.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg class="raw-plugin-icon-svg" width="19px" height="6px" viewBox="0 0 19 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>RAW</title>
|
||||
<defs></defs>
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M3.17724609,0.00146484375 C4.53955078,0.00146484375 5.31298828,0.766113281 5.31298828,1.93505859 C5.31298828,2.84033203 4.75048828,3.42480469 4.22753906,3.62255859 L5.43164062,6 L4.01660156,6 L2.97509766,3.81591797 L1.98632812,3.81591797 L1.98632812,6 L0.733886719,6 L0.733886719,0.00146484375 L3.17724609,0.00146484375 Z M1.98632812,2.84912109 L2.97509766,2.84912109 C3.59912109,2.84912109 4.00341797,2.55029297 4.00341797,1.95263672 C4.00341797,1.34179688 3.5859375,1.01660156 2.99267578,1.01660156 L1.98632812,1.01660156 L1.98632812,2.84912109 Z M6.85976562,6 L5.58095703,6 L7.56728515,0.00146484375 L9.0790039,0.00146484375 L11.056543,6 L9.70302734,6 L9.26357421,4.54541016 L7.30800781,4.54541016 L6.85976562,6 Z M8.31874999,1.22753906 L8.26162109,1.22753906 L7.55849609,3.57421875 L9.01748046,3.57421875 L8.31874999,1.22753906 Z M13.7107422,6 L12.5374023,6 L10.9641601,0.00146484375 L12.3308594,0.00146484375 L13.187793,4.20263672 L13.2493164,4.20263672 L14.2820312,0.00146484375 L15.3542969,0.00146484375 L16.3914062,4.20263672 L16.4529297,4.20263672 L17.3054687,0.00146484375 L18.6677734,0.00146484375 L17.0989258,6 L15.9255859,6 L14.8445312,2.00537109 L14.7961914,2.00537109 L13.7107422,6 Z" id="RAW" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
7
plugins/raw/raw-icon-white.svg
Normal file
7
plugins/raw/raw-icon-white.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg class="raw-plugin-icon-svg" width="19px" height="6px" viewBox="0 0 19 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>RAW</title>
|
||||
<defs></defs>
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M3.17724609,0.00146484375 C4.53955078,0.00146484375 5.31298828,0.766113281 5.31298828,1.93505859 C5.31298828,2.84033203 4.75048828,3.42480469 4.22753906,3.62255859 L5.43164062,6 L4.01660156,6 L2.97509766,3.81591797 L1.98632812,3.81591797 L1.98632812,6 L0.733886719,6 L0.733886719,0.00146484375 L3.17724609,0.00146484375 Z M1.98632812,2.84912109 L2.97509766,2.84912109 C3.59912109,2.84912109 4.00341797,2.55029297 4.00341797,1.95263672 C4.00341797,1.34179688 3.5859375,1.01660156 2.99267578,1.01660156 L1.98632812,1.01660156 L1.98632812,2.84912109 Z M6.85976562,6 L5.58095703,6 L7.56728515,0.00146484375 L9.0790039,0.00146484375 L11.056543,6 L9.70302734,6 L9.26357421,4.54541016 L7.30800781,4.54541016 L6.85976562,6 Z M8.31874999,1.22753906 L8.26162109,1.22753906 L7.55849609,3.57421875 L9.01748046,3.57421875 L8.31874999,1.22753906 Z M13.7107422,6 L12.5374023,6 L10.9641601,0.00146484375 L12.3308594,0.00146484375 L13.187793,4.20263672 L13.2493164,4.20263672 L14.2820312,0.00146484375 L15.3542969,0.00146484375 L16.3914062,4.20263672 L16.4529297,4.20263672 L17.3054687,0.00146484375 L18.6677734,0.00146484375 L17.0989258,6 L15.9255859,6 L14.8445312,2.00537109 L14.7961914,2.00537109 L13.7107422,6 Z" id="RAW" fill="#ffffff"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
36
plugins/raw/raw.css
Normal file
36
plugins/raw/raw.css
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
.raw-plugin__input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
border: 0;
|
||||
background: #fdfdfd;
|
||||
box-shadow: inset 0 2px 8px rgba(23, 32, 74, 0.06);
|
||||
border-radius: 3px;
|
||||
margin: 1em auto;
|
||||
padding: 1em;
|
||||
box-sizing: border-box;
|
||||
white-space: pre;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
|
||||
font-family: 'monospace', 'monaco', 'consolas', 'courier';
|
||||
line-height: 1.7em;
|
||||
font-size: 12px;
|
||||
color: #152b48;
|
||||
overflow: auto;
|
||||
letter-spacing: 0.015em;
|
||||
}
|
||||
|
||||
.raw-plugin-icon {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
background: url(raw-icon-black.svg) no-repeat center center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
li:hover .raw-plugin-icon,
|
||||
.selected .raw-plugin-icon{
|
||||
background: url(raw-icon-white.svg) no-repeat center center;
|
||||
background-size: contain;
|
||||
}
|
||||
51
plugins/raw/raw.js
Normal file
51
plugins/raw/raw.js
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
/**
|
||||
* Plugin for CodeX.Editor
|
||||
* Implements RAW-data block
|
||||
*/
|
||||
var rawPlugin = function (plugin) {
|
||||
|
||||
var editor = codex.editor;
|
||||
|
||||
plugin.render = function (data) {
|
||||
|
||||
var input = editor.draw.node('TEXTAREA', 'raw-plugin__input', {});
|
||||
|
||||
input.placeholder = 'Вставьте HTML код';
|
||||
|
||||
if (data && data.html) {
|
||||
input.value = data.html;
|
||||
}
|
||||
|
||||
return input;
|
||||
|
||||
};
|
||||
|
||||
plugin.save = function (block) {
|
||||
|
||||
return {
|
||||
html: block.value
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
plugin.validate = function (data) {
|
||||
|
||||
if (data.html.trim() === '') {
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
return true;
|
||||
|
||||
};
|
||||
|
||||
plugin.destroy = function () {
|
||||
|
||||
rawPlugin = null;
|
||||
|
||||
};
|
||||
|
||||
return plugin;
|
||||
|
||||
}({});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue