bug fixing
This commit is contained in:
parent
74469b9087
commit
8bfa4d4c3f
@ -419,6 +419,8 @@ function buildLongTextInput(source, textarea, label) {
|
|||||||
"bold",
|
"bold",
|
||||||
"italic",
|
"italic",
|
||||||
"underline",
|
"underline",
|
||||||
|
"strikethrough",
|
||||||
|
"paragraph",
|
||||||
"heading1",
|
"heading1",
|
||||||
"heading2",
|
"heading2",
|
||||||
{
|
{
|
||||||
@ -434,8 +436,6 @@ function buildLongTextInput(source, textarea, label) {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
activeState.editor = editor;
|
|
||||||
|
|
||||||
let actionBar = editor.getElementsByClassName("pell-actionbar")[0];
|
let actionBar = editor.getElementsByClassName("pell-actionbar")[0];
|
||||||
let content = editor.getElementsByClassName("pell-content")[0];
|
let content = editor.getElementsByClassName("pell-content")[0];
|
||||||
|
|
||||||
|
|||||||
@ -59,13 +59,13 @@ function insertTextBlocks(t) {
|
|||||||
if (element === null) {
|
if (element === null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
element.value += insert;
|
element.value += " "+insert;
|
||||||
let tB = document.getElementById("navTb");
|
let tB = document.getElementById("navTb");
|
||||||
tB.className.replace(" w3-show", "");
|
tB.className.replace(" w3-show", "");
|
||||||
|
|
||||||
if (element.parentElement != undefined) {
|
if (element.parentElement != undefined) {
|
||||||
if (element.parentElement.getElementsByClassName("pell-content")[0] != undefined) {
|
if (element.parentElement.getElementsByClassName("pell-content")[0] != undefined) {
|
||||||
activeState.editor.content.innerHTML = element.value;
|
element.parentElement.getElementsByClassName("pell-content")[0].innerHTML = element.value;
|
||||||
element = element.parentElement.getElementsByClassName("pell-content")[0];
|
element = element.parentElement.getElementsByClassName("pell-content")[0];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -46,8 +46,7 @@ window.activeState = {
|
|||||||
"markup",
|
"markup",
|
||||||
],
|
],
|
||||||
markups: ["title", "link", "italic", "green_highlighted", "highlighted"],
|
markups: ["title", "link", "italic", "green_highlighted", "highlighted"],
|
||||||
storage: [],
|
storage: []
|
||||||
editor: null
|
|
||||||
};
|
};
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
|
|||||||
452
js/2.0.0/pell.js
452
js/2.0.0/pell.js
@ -1,226 +1,254 @@
|
|||||||
(function (global, factory) {
|
(function (global, factory) {
|
||||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
typeof exports === "object" && typeof module !== "undefined"
|
||||||
typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
? factory(exports)
|
||||||
(factory((globalThis.pell = {})));
|
: typeof define === "function" && define.amd
|
||||||
}(this, (function (exports) { 'use strict';
|
? define(["exports"], factory)
|
||||||
|
: factory((globalThis.pell = {}));
|
||||||
|
})(this, function (exports) {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
var _extends =
|
||||||
|
Object.assign ||
|
||||||
var defaultParagraphSeparatorString = 'defaultParagraphSeparator';
|
function (target) {
|
||||||
var formatBlock = 'formatBlock';
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
var addEventListener = function addEventListener(parent, type, listener) {
|
var source = arguments[i];
|
||||||
return parent.addEventListener(type, listener);
|
for (var key in source) {
|
||||||
};
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||||
var appendChild = function appendChild(parent, child) {
|
target[key] = source[key];
|
||||||
return parent.appendChild(child);
|
}
|
||||||
};
|
}
|
||||||
var createElement = function createElement(tag) {
|
}
|
||||||
return document.createElement(tag);
|
return target;
|
||||||
};
|
|
||||||
var queryCommandState = function queryCommandState(command) {
|
|
||||||
return document.queryCommandState(command);
|
|
||||||
};
|
|
||||||
var queryCommandValue = function queryCommandValue(command) {
|
|
||||||
return document.queryCommandValue(command);
|
|
||||||
};
|
|
||||||
|
|
||||||
var exec = function exec(command) {
|
|
||||||
var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
||||||
return document.execCommand(command, false, value);
|
|
||||||
};
|
|
||||||
|
|
||||||
var defaultActions = {
|
|
||||||
bold: {
|
|
||||||
icon: '<b>B</b>',
|
|
||||||
title: 'Bold',
|
|
||||||
state: function state() {
|
|
||||||
return queryCommandState('bold');
|
|
||||||
},
|
|
||||||
result: function result() {
|
|
||||||
return exec('bold');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
italic: {
|
|
||||||
icon: '<i>I</i>',
|
|
||||||
title: 'Italic',
|
|
||||||
state: function state() {
|
|
||||||
return queryCommandState('italic');
|
|
||||||
},
|
|
||||||
result: function result() {
|
|
||||||
return exec('italic');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
underline: {
|
|
||||||
icon: '<u>U</u>',
|
|
||||||
title: 'Underline',
|
|
||||||
state: function state() {
|
|
||||||
return queryCommandState('underline');
|
|
||||||
},
|
|
||||||
result: function result() {
|
|
||||||
return exec('underline');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
strikethrough: {
|
|
||||||
icon: '<strike>S</strike>',
|
|
||||||
title: 'Strike-through',
|
|
||||||
state: function state() {
|
|
||||||
return queryCommandState('strikeThrough');
|
|
||||||
},
|
|
||||||
result: function result() {
|
|
||||||
return exec('strikeThrough');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
heading1: {
|
|
||||||
icon: '<b>H<sub>1</sub></b>',
|
|
||||||
title: 'Heading 1',
|
|
||||||
result: function result() {
|
|
||||||
return exec(formatBlock, '<h1>');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
heading2: {
|
|
||||||
icon: '<b>H<sub>2</sub></b>',
|
|
||||||
title: 'Heading 2',
|
|
||||||
result: function result() {
|
|
||||||
return exec(formatBlock, '<h2>');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
paragraph: {
|
|
||||||
icon: '¶',
|
|
||||||
title: 'Paragraph',
|
|
||||||
result: function result() {
|
|
||||||
return exec(formatBlock, '<p>');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
quote: {
|
|
||||||
icon: '“ ”',
|
|
||||||
title: 'Quote',
|
|
||||||
result: function result() {
|
|
||||||
return exec(formatBlock, '<blockquote>');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
olist: {
|
|
||||||
icon: '#',
|
|
||||||
title: 'Ordered List',
|
|
||||||
result: function result() {
|
|
||||||
return exec('insertOrderedList');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
ulist: {
|
|
||||||
icon: '•',
|
|
||||||
title: 'Unordered List',
|
|
||||||
result: function result() {
|
|
||||||
return exec('insertUnorderedList');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
code: {
|
|
||||||
icon: '</>',
|
|
||||||
title: 'Code',
|
|
||||||
result: function result() {
|
|
||||||
return exec(formatBlock, '<pre>');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
line: {
|
|
||||||
icon: '―',
|
|
||||||
title: 'Horizontal Line',
|
|
||||||
result: function result() {
|
|
||||||
return exec('insertHorizontalRule');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
link: {
|
|
||||||
icon: '🔗',
|
|
||||||
title: 'Link',
|
|
||||||
result: function result() {
|
|
||||||
var url = window.prompt('Enter the link URL');
|
|
||||||
if (url) exec('createLink', url);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
image: {
|
|
||||||
icon: '📷',
|
|
||||||
title: 'Image',
|
|
||||||
result: function result() {
|
|
||||||
var url = window.prompt('Enter the image URL');
|
|
||||||
if (url) exec('insertImage', url);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var defaultClasses = {
|
|
||||||
actionbar: 'pell-actionbar',
|
|
||||||
button: 'pell-button',
|
|
||||||
content: 'pell-content',
|
|
||||||
selected: 'pell-button-selected'
|
|
||||||
};
|
|
||||||
|
|
||||||
var init = function init(settings) {
|
|
||||||
var actions = settings.actions ? settings.actions.map(function (action) {
|
|
||||||
if (typeof action === 'string') return defaultActions[action];else if (defaultActions[action.name]) return _extends({}, defaultActions[action.name], action);
|
|
||||||
return action;
|
|
||||||
}) : Object.keys(defaultActions).map(function (action) {
|
|
||||||
return defaultActions[action];
|
|
||||||
});
|
|
||||||
|
|
||||||
var classes = _extends({}, defaultClasses, settings.classes);
|
|
||||||
|
|
||||||
var defaultParagraphSeparator = settings[defaultParagraphSeparatorString] || 'div';
|
|
||||||
|
|
||||||
var actionbar = createElement('div');
|
|
||||||
actionbar.className = classes.actionbar;
|
|
||||||
appendChild(settings.element, actionbar);
|
|
||||||
|
|
||||||
var content = settings.element.content = createElement('div');
|
|
||||||
content.contentEditable = true;
|
|
||||||
content.className = classes.content;
|
|
||||||
content.oninput = function (_ref) {
|
|
||||||
var firstChild = _ref.target.firstChild;
|
|
||||||
|
|
||||||
if (firstChild && firstChild.nodeType === 3) exec(formatBlock, '<' + defaultParagraphSeparator + '>');else if (content.innerHTML === '<br>') content.innerHTML = '';
|
|
||||||
settings.onChange(content.innerHTML);
|
|
||||||
};
|
|
||||||
content.onkeydown = function (event) {
|
|
||||||
if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote') {
|
|
||||||
setTimeout(function () {
|
|
||||||
return exec(formatBlock, '<' + defaultParagraphSeparator + '>');
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
appendChild(settings.element, content);
|
|
||||||
|
|
||||||
actions.forEach(function (action) {
|
|
||||||
var button = createElement('button');
|
|
||||||
button.className = classes.button;
|
|
||||||
button.innerHTML = action.icon;
|
|
||||||
button.title = action.title;
|
|
||||||
button.setAttribute('type', 'button');
|
|
||||||
button.onclick = function () {
|
|
||||||
return action.result() && content.focus();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (action.state) {
|
var defaultParagraphSeparatorString = "defaultParagraphSeparator";
|
||||||
var handler = function handler() {
|
var formatBlock = "formatBlock";
|
||||||
return button.classList[action.state() ? 'add' : 'remove'](classes.selected);
|
var addEventListener = function addEventListener(parent, type, listener) {
|
||||||
|
return parent.addEventListener(type, listener);
|
||||||
|
};
|
||||||
|
var appendChild = function appendChild(parent, child) {
|
||||||
|
return parent.appendChild(child);
|
||||||
|
};
|
||||||
|
var createElement = function createElement(tag) {
|
||||||
|
return document.createElement(tag);
|
||||||
|
};
|
||||||
|
var queryCommandState = function queryCommandState(command) {
|
||||||
|
return document.queryCommandState(command);
|
||||||
|
};
|
||||||
|
var queryCommandValue = function queryCommandValue(command) {
|
||||||
|
return document.queryCommandValue(command);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
var exec = function exec(command) {
|
||||||
|
var value =
|
||||||
|
arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
||||||
|
return document.execCommand(command, false, value);
|
||||||
|
};
|
||||||
|
|
||||||
|
var defaultActions = {
|
||||||
|
bold: {
|
||||||
|
icon: "<b>B</b>",
|
||||||
|
title: "Bold",
|
||||||
|
state: function state() {
|
||||||
|
return queryCommandState("bold");
|
||||||
|
},
|
||||||
|
result: function result() {
|
||||||
|
return exec("bold");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
italic: {
|
||||||
|
icon: "<i>I</i>",
|
||||||
|
title: "Italic",
|
||||||
|
state: function state() {
|
||||||
|
return queryCommandState("italic");
|
||||||
|
},
|
||||||
|
result: function result() {
|
||||||
|
return exec("italic");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
underline: {
|
||||||
|
icon: "<u>U</u>",
|
||||||
|
title: "Underline",
|
||||||
|
state: function state() {
|
||||||
|
return queryCommandState("underline");
|
||||||
|
},
|
||||||
|
result: function result() {
|
||||||
|
return exec("underline");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
strikethrough: {
|
||||||
|
icon: "<strike>S</strike>",
|
||||||
|
title: "Strike-through",
|
||||||
|
state: function state() {
|
||||||
|
return queryCommandState("strikeThrough");
|
||||||
|
},
|
||||||
|
result: function result() {
|
||||||
|
return exec("strikeThrough");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
heading1: {
|
||||||
|
icon: "<b>H<sub>1</sub></b>",
|
||||||
|
title: "Heading 1",
|
||||||
|
result: function result() {
|
||||||
|
return exec(formatBlock, "<h1>");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
heading2: {
|
||||||
|
icon: "<b>H<sub>2</sub></b>",
|
||||||
|
title: "Heading 2",
|
||||||
|
result: function result() {
|
||||||
|
return exec(formatBlock, "<h2>");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
paragraph: {
|
||||||
|
icon: "¶",
|
||||||
|
title: "Paragraph",
|
||||||
|
result: function result() {
|
||||||
|
return exec(formatBlock, "<p>");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
quote: {
|
||||||
|
icon: "“ ”",
|
||||||
|
title: "Quote",
|
||||||
|
result: function result() {
|
||||||
|
return exec(formatBlock, "<blockquote>");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
olist: {
|
||||||
|
icon: "#",
|
||||||
|
title: "Ordered List",
|
||||||
|
result: function result() {
|
||||||
|
return exec("insertOrderedList");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
ulist: {
|
||||||
|
icon: "•",
|
||||||
|
title: "Unordered List",
|
||||||
|
result: function result() {
|
||||||
|
return exec("insertUnorderedList");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
code: {
|
||||||
|
icon: "</>",
|
||||||
|
title: "Code",
|
||||||
|
result: function result() {
|
||||||
|
return exec(formatBlock, "<pre>");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
line: {
|
||||||
|
icon: "―",
|
||||||
|
title: "Horizontal Line",
|
||||||
|
result: function result() {
|
||||||
|
return exec("insertHorizontalRule");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
link: {
|
||||||
|
icon: "🔗",
|
||||||
|
title: "Link",
|
||||||
|
result: function result() {
|
||||||
|
var url = window.prompt("Enter the link URL");
|
||||||
|
if (url) exec("createLink", url);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
icon: "📷",
|
||||||
|
title: "Image",
|
||||||
|
result: function result() {
|
||||||
|
var url = window.prompt("Enter the image URL");
|
||||||
|
if (url) exec("insertImage", url);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
var defaultClasses = {
|
||||||
|
actionbar: "pell-actionbar",
|
||||||
|
button: "pell-button",
|
||||||
|
content: "pell-content",
|
||||||
|
selected: "pell-button-selected",
|
||||||
|
};
|
||||||
|
|
||||||
|
var init = function init(settings) {
|
||||||
|
var actions = settings.actions
|
||||||
|
? settings.actions.map(function (action) {
|
||||||
|
if (typeof action === "string") return defaultActions[action];
|
||||||
|
else if (defaultActions[action.name])
|
||||||
|
return _extends({}, defaultActions[action.name], action);
|
||||||
|
return action;
|
||||||
|
})
|
||||||
|
: Object.keys(defaultActions).map(function (action) {
|
||||||
|
return defaultActions[action];
|
||||||
|
});
|
||||||
|
|
||||||
|
var classes = _extends({}, defaultClasses, settings.classes);
|
||||||
|
|
||||||
|
var defaultParagraphSeparator =
|
||||||
|
settings[defaultParagraphSeparatorString] || "div";
|
||||||
|
|
||||||
|
var actionbar = createElement("div");
|
||||||
|
actionbar.className = classes.actionbar;
|
||||||
|
appendChild(settings.element, actionbar);
|
||||||
|
|
||||||
|
var content = (settings.element.content = createElement("div"));
|
||||||
|
content.contentEditable = true;
|
||||||
|
content.className = classes.content;
|
||||||
|
content.oninput = function (_ref) {
|
||||||
|
var firstChild = _ref.target.firstChild;
|
||||||
|
|
||||||
|
if (firstChild && firstChild.nodeType === 3)
|
||||||
|
exec(formatBlock, "<" + defaultParagraphSeparator + ">");
|
||||||
|
else if (content.innerHTML === "<br>") content.innerHTML = "";
|
||||||
|
settings.onChange(content.innerHTML);
|
||||||
|
};
|
||||||
|
content.onkeydown = function (event) {
|
||||||
|
if (
|
||||||
|
event.key === "Enter" &&
|
||||||
|
queryCommandValue(formatBlock) === "blockquote"
|
||||||
|
) {
|
||||||
|
setTimeout(function () {
|
||||||
|
return exec(formatBlock, "<" + defaultParagraphSeparator + ">");
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
appendChild(settings.element, content);
|
||||||
|
|
||||||
|
actions.forEach(function (action) {
|
||||||
|
var button = createElement("button");
|
||||||
|
button.className = classes.button;
|
||||||
|
button.innerHTML = action.icon;
|
||||||
|
button.title = action.title;
|
||||||
|
button.setAttribute("type", "button");
|
||||||
|
button.onclick = function () {
|
||||||
|
return action.result() && content.focus();
|
||||||
};
|
};
|
||||||
addEventListener(content, 'keyup', handler);
|
|
||||||
addEventListener(content, 'mouseup', handler);
|
|
||||||
addEventListener(button, 'click', handler);
|
|
||||||
}
|
|
||||||
|
|
||||||
appendChild(actionbar, button);
|
if (action.state) {
|
||||||
});
|
var handler = function handler() {
|
||||||
|
return button.classList[action.state() ? "add" : "remove"](
|
||||||
|
classes.selected
|
||||||
|
);
|
||||||
|
};
|
||||||
|
addEventListener(content, "keyup", handler);
|
||||||
|
addEventListener(content, "mouseup", handler);
|
||||||
|
addEventListener(button, "click", handler);
|
||||||
|
}
|
||||||
|
|
||||||
if (settings.styleWithCSS) exec('styleWithCSS');
|
appendChild(actionbar, button);
|
||||||
exec(defaultParagraphSeparatorString, defaultParagraphSeparator);
|
});
|
||||||
|
|
||||||
return settings.element;
|
if (settings.styleWithCSS) exec("styleWithCSS");
|
||||||
};
|
exec(defaultParagraphSeparatorString, defaultParagraphSeparator);
|
||||||
|
|
||||||
var pell = { exec: exec, init: init };
|
return settings.element;
|
||||||
|
};
|
||||||
|
|
||||||
exports.exec = exec;
|
var pell = { exec: exec, init: init };
|
||||||
exports.init = init;
|
|
||||||
exports['default'] = pell;
|
|
||||||
|
|
||||||
Object.defineProperty(exports, '__esModule', { value: true });
|
exports.exec = exec;
|
||||||
|
exports.init = init;
|
||||||
|
exports["default"] = pell;
|
||||||
|
|
||||||
})));
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
});
|
||||||
|
|
||||||
export default pell;
|
export default pell;
|
||||||
Loading…
Reference in New Issue
Block a user