Mercurial Hosting > sceditor
view src/sceditor.js @ 47:16b61f228546 default tip
minor
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Mon, 31 Oct 2022 10:41:24 -0600 |
parents | ab2dc8736d88 |
children |
line wrap: on
line source
(function () { 'use strict'; let baseUrl = document.currentScript.getAttribute('src').match(/.*\//)[0]; /** * Check if the passed argument is the * the passed type. * * @param {string} type * @param {*} arg * @returns {boolean} */ function isTypeof(type) { return function(arg) { return typeof arg === type; }; } /** * @type {function(*): boolean} */ var isString = isTypeof('string'); /** * @type {function(*): boolean} */ var isUndefined = isTypeof('undefined'); /** * @type {function(*): boolean} */ var isFunction = isTypeof('function'); /** * @type {function(*): boolean} */ var isNumber = isTypeof('number'); /** * Returns true if an object has no keys * * @param {!Object} obj * @returns {boolean} */ function isEmptyObject(obj) { return !Object.keys(obj).length; } /** * Extends the first object with any extra objects passed * * If the first argument is boolean and set to true * it will extend child arrays and objects recursively. * * @param {!Object|boolean} targetArg * @param {...Object} source * @return {Object} */ function doExtend(isDeep, args) { let target = args[0]; function isObject(value) { return value !== null && typeof value === 'object' && Object.getPrototypeOf(value) === Object.prototype; } for ( let i = 1; i < args.length; i++) { var source = args[i]; // Copy all properties for jQuery compatibility /* eslint guard-for-in: off */ for (var key in source) { var targetValue = target[key]; var value = source[key]; // Skip undefined values to match jQuery if (isUndefined(value)) { continue; } // Skip special keys to prevent prototype pollution if (key === '__proto__' || key === 'constructor') { continue; } var isValueObject = isObject(value); var isValueArray = Array.isArray(value); if (isDeep && (isValueObject || isValueArray)) { // Can only merge if target type matches otherwise create // new target to merge into var isSameType = isObject(targetValue) === isValueObject && Array.isArray(targetValue) === isValueArray; target[key] = extendDeep( isSameType ? targetValue : (isValueArray ? [] : {}), value ); } else { target[key] = value; } } } return target; } function extend(targetArg, sourceArgs) { return doExtend(false,arguments); } function extendDeep(targetArg, sourceArgs) { return doExtend(true,arguments); } /** * Removes an item from the passed array * * @param {!Array} arr * @param {*} item */ function arrayRemove(arr, item) { var i = arr.indexOf(item); if (i > -1) { arr.splice(i, 1); } } /** * Iterates over an array or object * * @param {!Object|Array} obj * @param {function(*, *)} fn */ function each(obj, fn) { if (Array.isArray(obj) || 'length' in obj && isNumber(obj.length)) { for (var i = 0; i < obj.length; i++) { fn(i, obj[i]); } } else { Object.keys(obj).forEach(function (key) { fn(key, obj[key]); }); } } /** * Cache of camelCase CSS property names * @type {Object<string, string>} */ var cssPropertyNameCache = {}; /** * Node type constant for element nodes * * @type {number} */ var ELEMENT_NODE = 1; /** * Node type constant for text nodes * * @type {number} */ var TEXT_NODE = 3; /** * Node type constant for comment nodes * * @type {number} */ var COMMENT_NODE = 8; function toFloat(value) { value = parseFloat(value); return isFinite(value) ? value : 0; } /** * Creates an element with the specified attributes * * Will create it in the current document unless context * is specified. * * @param {!string} tag * @param {!Object<string, string>} [attributes] * @param {!Document} [context] * @returns {!HTMLElement} */ function createElement(tag, attributes, context) { var node = (context || document).createElement(tag); each(attributes || {}, function (key, value) { if (key === 'style') { node.style.cssText = value; } else if (key in node) { node[key] = value; } else { node.setAttribute(key, value); } }); return node; } /** * Gets the first parent node that matches the selector * * @param {!HTMLElement} node * @param {!string} [selector] * @returns {HTMLElement|undefined} */ function parent(node, selector) { var parent = node || {}; while ((parent = parent.parentNode) && !/(9|11)/.test(parent.nodeType)) { if (!selector || is(parent, selector)) { return parent; } } } /** * Checks the passed node and all parents and * returns the first matching node if any. * * @param {!HTMLElement} node * @param {!string} selector * @returns {HTMLElement|undefined} */ function closest(node, selector) { return is(node, selector) ? node : parent(node, selector); } /** * Removes the node from the DOM * * @param {!HTMLElement} node */ function remove(node) { if (node.parentNode) { node.parentNode.removeChild(node); } } /** * Appends child to parent node * * @param {!HTMLElement} node * @param {!HTMLElement} child */ function appendChild(node, child) { node.appendChild(child); } /** * Finds any child nodes that match the selector * * @param {!HTMLElement} node * @param {!string} selector * @returns {NodeList} */ function find(node, selector) { return node.querySelectorAll(selector); } /** * For onEvent() and offEvent() if to add/remove the event * to the capture phase * * @type {boolean} */ var EVENT_CAPTURE = true; /** * Adds an event listener for the specified events. * * Events should be a space separated list of events. * * If selector is specified the handler will only be * called when the event target matches the selector. * * @param {!Node} node * @param {string} events * @param {string} [selector] * @param {function(Object)} fn * @param {boolean} [capture=false] * @see offEvent() */ // eslint-disable-next-line max-params function onEvent1(node, events, selector, fn, capture) { events.split(' ').forEach(function (event) { let handler = fn['_sce-event-' + event + selector] || function (e) { var target = e.target; while (target && target !== node) { if (is(target, selector)) { fn(target, e); return; } target = target.parentNode; } }; fn['_sce-event-' + event + selector] = handler; node.addEventListener(event, handler, capture || false); }); } function onEvent2(node, events, handler, capture) { events.split(' ').forEach(function (event) { node.addEventListener(event, handler, capture || false); }); } /** * Removes an event listener for the specified events. * * @param {!Node} node * @param {string} events * @param {string} [selector] * @param {function(Object)} fn * @param {boolean} [capture=false] * @see onEvent() */ // eslint-disable-next-line max-params function offEvent(node, events, selector, fn, capture) { events.split(' ').forEach(function (event) { var handler; if (isString(selector)) { handler = fn['_sce-event-' + event + selector]; } else { handler = selector; capture = fn; } node.removeEventListener(event, handler, capture || false); }); } /** * If only attr param is specified it will get * the value of the attr param. * * If value is specified but null the attribute * will be removed otherwise the attr value will * be set to the passed value. * * @param {!HTMLElement} node * @param {!string} attr * @param {?string} [value] */ function attr(node, attr, value) { if (arguments.length < 3) { return node.getAttribute(attr); } // eslint-disable-next-line eqeqeq, no-eq-null if (value == null) { removeAttr(node, attr); } else { node.setAttribute(attr, value); } } /** * Removes the specified attribute * * @param {!HTMLElement} node * @param {!string} attr */ function removeAttr(node, attr) { node.removeAttribute(attr); } /** * Sets the passed elements display to none * * @param {!HTMLElement} node */ function hide(node) { css(node, 'display', 'none'); } /** * Sets the passed elements display to default * * @param {!HTMLElement} node */ function show(node) { css(node, 'display', ''); } /** * Toggles an elements visibility * * @param {!HTMLElement} node */ function toggle(node) { if (isVisible(node)) { hide(node); } else { show(node); } } /** * Gets a computed CSS values or sets an inline CSS value * * Rules should be in camelCase format and not * hyphenated like CSS properties. * * @param {!HTMLElement} node * @param {!Object|string} rule * @param {string|number} [value] * @return {string|number|undefined} */ function css(node, rule, value) { if (arguments.length < 3) { if (isString(rule)) { return node.nodeType === 1 ? getComputedStyle(node)[rule] : null; } each(rule, function (key, value) { css(node, key, value); }); } else { // isNaN returns false for null, false and empty strings // so need to check it's truthy or 0 var isNumeric = (value || value === 0) && !isNaN(value); node.style[rule] = isNumeric ? value + 'px' : value; } } /** * Gets or sets the data attributes on a node * * Unlike the jQuery version this only stores data * in the DOM attributes which means only strings * can be stored. * * @param {Node} node * @param {string} [key] * @param {string} [value] * @return {Object|undefined} */ function data(node, key, value) { var argsLength = arguments.length; var data = {}; if (node.nodeType === ELEMENT_NODE) { if (argsLength === 1) { each(node.attributes, function (_, attr) { if (/^data\-/i.test(attr.name)) { data[attr.name.substr(5)] = attr.value; } }); return data; } if (argsLength === 2) { return attr(node, 'data-' + key); } attr(node, 'data-' + key, String(value)); } } /** * Checks if node matches the given selector. * * @param {?HTMLElement} node * @param {string} selector * @returns {boolean} */ function is(node, selector) { var result = false; if (node && node.nodeType === ELEMENT_NODE) { if(node.matches) { result = node.matches(selector); } else if(node.msMatchesSelector) { result = node.msMatchesSelector(selector); } else if(node.webkitMatchesSelector) { result = node.webkitMatchesSelector(selector); } } return result; } /** * Returns true if node contains child otherwise false. * * This differs from the DOM contains() method in that * if node and child are equal this will return false. * * @param {!Node} node * @param {HTMLElement} child * @returns {boolean} */ function contains(node, child) { return node !== child && node.contains && node.contains(child); } /** * @param {Node} node * @param {string} [selector] * @returns {?HTMLElement} */ function previousElementSibling(node, selector) { var prev = node.previousElementSibling; if (selector && prev) { return is(prev, selector) ? prev : null; } return prev; } /** * @param {!Node} node * @param {!Node} refNode * @returns {Node} */ function insertBefore(node, refNode) { return refNode.parentNode.insertBefore(node, refNode); } /** * @param {?HTMLElement} node * @returns {!Array.<string>} */ function classes(node) { return node.className.trim().split(/\s+/); } /** * @param {?HTMLElement} node * @param {string} className * @returns {boolean} */ function hasClass(node, className) { return is(node, '.' + className); } /** * @param {!HTMLElement} node * @param {string} className */ function addClass(node, className) { var classList = classes(node); if (classList.indexOf(className) < 0) { classList.push(className); } node.className = classList.join(' '); } /** * @param {!HTMLElement} node * @param {string} className */ function removeClass(node, className) { var classList = classes(node); arrayRemove(classList, className); node.className = classList.join(' '); } /** * Toggles a class on node. * * If state is specified and is truthy it will add * the class. * * If state is specified and is falsey it will remove * the class. * * @param {HTMLElement} node * @param {string} className * @param {boolean} [state] */ function toggleClass(node, className, state) { state = isUndefined(state) ? !hasClass(node, className) : state; if (state) { addClass(node, className); } else { removeClass(node, className); } } /** * Gets or sets the width of the passed node. * * @param {HTMLElement} node * @param {number|string} [value] * @returns {number|undefined} */ function width(node, value) { if (isUndefined(value)) { var cs = getComputedStyle(node); var padding = toFloat(cs.paddingLeft) + toFloat(cs.paddingRight); var border = toFloat(cs.borderLeftWidth) + toFloat(cs.borderRightWidth); return node.offsetWidth - padding - border; } css(node, 'width', value); } /** * Gets or sets the height of the passed node. * * @param {HTMLElement} node * @param {number|string} [value] * @returns {number|undefined} */ function height(node, value) { if (isUndefined(value)) { var cs = getComputedStyle(node); var padding = toFloat(cs.paddingTop) + toFloat(cs.paddingBottom); var border = toFloat(cs.borderTopWidth) + toFloat(cs.borderBottomWidth); return node.offsetHeight - padding - border; } css(node, 'height', value); } /** * Triggers a custom event with the specified name and * sets the detail property to the data object passed. * * @param {HTMLElement} node * @param {string} eventName * @param {Object} [data] */ function trigger(node, eventName, data) { var event; if (isFunction(window.CustomEvent)) { event = new CustomEvent(eventName, { bubbles: true, cancelable: true, detail: data }); } else { event = node.ownerDocument.createEvent('CustomEvent'); event.initCustomEvent(eventName, true, true, data); } node.dispatchEvent(event); } /** * Returns if a node is visible. * * @param {HTMLElement} * @returns {boolean} */ function isVisible(node) { return !!node.getClientRects().length; } /** * Convert CSS property names into camel case * * @param {string} string * @returns {string} */ function camelCase(string) { return string .replace(/^-ms-/, 'ms-') .replace(/-(\w)/g, function (match, char) { return char.toUpperCase(); }); } /** * Loop all child nodes of the passed node * * The function should accept 1 parameter being the node. * If the function returns false the loop will be exited. * * @param {HTMLElement} node * @param {function} func Callback which is called with every * child node as the first argument. * @param {boolean} innermostFirst If the innermost node should be passed * to the function before it's parents. * @param {boolean} siblingsOnly If to only traverse the nodes siblings * @param {boolean} [reverse=false] If to traverse the nodes in reverse */ // eslint-disable-next-line max-params function traverse(node, func, innermostFirst, siblingsOnly, reverse) { node = reverse ? node.lastChild : node.firstChild; while (node) { var next = reverse ? node.previousSibling : node.nextSibling; if ( (!innermostFirst && func(node) === false) || (!siblingsOnly && traverse( node, func, innermostFirst, siblingsOnly, reverse ) === false) || (innermostFirst && func(node) === false) ) { return false; } node = next; } } /** * Like traverse but loops in reverse * @see traverse */ function rTraverse(node, func, innermostFirst, siblingsOnly) { traverse(node, func, innermostFirst, siblingsOnly, true); } /** * Parses HTML into a document fragment * * @param {string} html * @param {Document} [context] * @since 1.4.4 * @return {DocumentFragment} */ function parseHTML(html, context) { context = context || document; var ret = context.createDocumentFragment(); var tmp = createElement('div', {}, context); tmp.innerHTML = html; while (tmp.firstChild) { appendChild(ret, tmp.firstChild); } return ret; } /** * Checks if an element has any styling. * * It has styling if it is not a plain <div> or <p> or * if it has a class, style attribute or data. * * @param {HTMLElement} elm * @return {boolean} * @since 1.4.4 */ function hasStyling(node) { return node && (!is(node, 'p,div') || node.className || attr(node, 'style') || !isEmptyObject(data(node))); } /** * Converts an element from one type to another. * * For example it can convert the element <b> to <strong> * * @param {HTMLElement} element * @param {string} toTagName * @return {HTMLElement} * @since 1.4.4 */ function convertElement(element, toTagName) { var newElement = createElement(toTagName, {}, element.ownerDocument); each(element.attributes, function (_, attribute) { // Some browsers parse invalid attributes names like // 'size"2' which throw an exception when set, just // ignore these. try { attr(newElement, attribute.name, attribute.value); } catch (ex) {} }); while (element.firstChild) { appendChild(newElement, element.firstChild); } element.parentNode.replaceChild(newElement, element); return newElement; } /** * List of block level elements separated by bars (|) * * @type {string} */ var blockLevelList = '|body|hr|p|div|h1|h2|h3|h4|h5|h6|address|pre|' + 'form|table|tbody|thead|tfoot|th|tr|td|li|ol|ul|blockquote|center|' + 'details|section|article|aside|nav|main|header|hgroup|footer|fieldset|' + 'dl|dt|dd|figure|figcaption|'; /** * List of elements that do not allow children separated by bars (|) * * @param {Node} node * @return {boolean} * @since 1.4.5 */ function canHaveChildren(node) { // 1 = Element // 9 = Document // 11 = Document Fragment if (!/11?|9/.test(node.nodeType)) { return false; } // List of empty HTML tags separated by bar (|) character. // Source: http://www.w3.org/TR/html4/index/elements.html // Source: http://www.w3.org/TR/html5/syntax.html#void-elements return ('|iframe|area|base|basefont|br|col|frame|hr|img|input|wbr' + '|isindex|link|meta|param|command|embed|keygen|source|track|' + 'object|').indexOf('|' + node.nodeName.toLowerCase() + '|') < 0; } /** * Checks if an element is inline * * @param {HTMLElement} elm * @param {boolean} [includeCodeAsBlock=false] * @return {boolean} */ function isInline(elm, includeCodeAsBlock) { var tagName, nodeType = (elm || {}).nodeType || TEXT_NODE; if (nodeType !== ELEMENT_NODE) { return nodeType === TEXT_NODE; } tagName = elm.tagName.toLowerCase(); if (tagName === 'code') { return !includeCodeAsBlock; } return blockLevelList.indexOf('|' + tagName + '|') < 0; } /** * Copy the CSS from 1 node to another. * * Only copies CSS defined on the element e.g. style attr. * * @param {HTMLElement} from * @param {HTMLElement} to * @deprecated since v3.1.0 */ function copyCSS(from, to) { if (to.style && from.style) { to.style.cssText = from.style.cssText + to.style.cssText; } } /** * Checks if a DOM node is empty * * @param {Node} node * @returns {boolean} */ function isEmpty(node) { if (node.lastChild && isEmpty(node.lastChild)) { remove(node.lastChild); } return node.nodeType === 3 ? !node.nodeValue : (canHaveChildren(node) && !node.childNodes.length); } /** * Fixes block level elements inside in inline elements. * * Also fixes invalid list nesting by placing nested lists * inside the previous li tag or wrapping them in an li tag. * * @param {HTMLElement} node */ function fixNesting(node) { traverse(node, function (node) { var list = 'ul,ol', isBlock = !isInline(node, true) && node.nodeType !== COMMENT_NODE, parent = node.parentNode; // Any blocklevel element inside an inline element needs fixing. // Also <p> tags that contain blocks should be fixed if (isBlock && (isInline(parent, true) || parent.tagName === 'P')) { // Find the last inline parent node var lastInlineParent = node; while (isInline(lastInlineParent.parentNode, true) || lastInlineParent.parentNode.tagName === 'P') { lastInlineParent = lastInlineParent.parentNode; } var before = extractContents(lastInlineParent, node); var middle = node; // Clone inline styling and apply it to the blocks children while (parent && isInline(parent, true)) { if (parent.nodeType === ELEMENT_NODE) { var clone = parent.cloneNode(); while (middle.firstChild) { appendChild(clone, middle.firstChild); } appendChild(middle, clone); } parent = parent.parentNode; } insertBefore(middle, lastInlineParent); if (!isEmpty(before)) { insertBefore(before, middle); } if (isEmpty(lastInlineParent)) { remove(lastInlineParent); } } // Fix invalid nested lists which should be wrapped in an li tag if (isBlock && is(node, list) && is(node.parentNode, list)) { var li = previousElementSibling(node, 'li'); if (!li) { li = createElement('li'); insertBefore(li, node); } appendChild(li, node); } }); } /** * Finds the common parent of two nodes * * @param {!HTMLElement} node1 * @param {!HTMLElement} node2 * @return {?HTMLElement} */ function findCommonAncestor(node1, node2) { while ((node1 = node1.parentNode)) { if (contains(node1, node2)) { return node1; } } } /** * @param {?Node} * @param {boolean} [previous=false] * @returns {?Node} */ function getSibling(node, previous) { if (!node) { return null; } return (previous ? node.previousSibling : node.nextSibling) || getSibling(node.parentNode, previous); } /** * Removes unused whitespace from the root and all it's children. * * @param {!HTMLElement} root * @since 1.4.3 */ function removeWhiteSpace(root) { var nodeValue, nodeType, next, previous, previousSibling, nextNode, trimStart, cssWhiteSpace = css(root, 'whiteSpace'), // Preserve newlines if is pre-line preserveNewLines = /line$/i.test(cssWhiteSpace), node = root.firstChild; // Skip pre & pre-wrap with any vendor prefix if (/pre(\-wrap)?$/i.test(cssWhiteSpace)) { return; } while (node) { nextNode = node.nextSibling; nodeValue = node.nodeValue; nodeType = node.nodeType; if (nodeType === ELEMENT_NODE && node.firstChild) { removeWhiteSpace(node); } if (nodeType === TEXT_NODE) { next = getSibling(node); previous = getSibling(node, true); trimStart = false; while (hasClass(previous, 'sceditor-ignore')) { previous = getSibling(previous, true); } // If previous sibling isn't inline or is a textnode that // ends in whitespace, time the start whitespace if (isInline(node) && previous) { previousSibling = previous; while (previousSibling.lastChild) { previousSibling = previousSibling.lastChild; // eslint-disable-next-line max-depth while (hasClass(previousSibling, 'sceditor-ignore')) { previousSibling = getSibling(previousSibling, true); } } trimStart = previousSibling.nodeType === TEXT_NODE ? /[\t\n\r ]$/.test(previousSibling.nodeValue) : !isInline(previousSibling); } // Clear zero width spaces nodeValue = nodeValue.replace(/\u200B/g, ''); // Strip leading whitespace if (!previous || !isInline(previous) || trimStart) { nodeValue = nodeValue.replace( preserveNewLines ? /^[\t ]+/ : /^[\t\n\r ]+/, '' ); } // Strip trailing whitespace if (!next || !isInline(next)) { nodeValue = nodeValue.replace( preserveNewLines ? /[\t ]+$/ : /[\t\n\r ]+$/, '' ); } // Remove empty text nodes if (!nodeValue.length) { remove(node); } else { node.nodeValue = nodeValue.replace( preserveNewLines ? /[\t ]+/g : /[\t\n\r ]+/g, ' ' ); } } node = nextNode; } } /** * Extracts all the nodes between the start and end nodes * * @param {HTMLElement} startNode The node to start extracting at * @param {HTMLElement} endNode The node to stop extracting at * @return {DocumentFragment} */ function extractContents(startNode, endNode) { var range = startNode.ownerDocument.createRange(); range.setStartBefore(startNode); range.setEndAfter(endNode); return range.extractContents(); } /** * Gets the offset position of an element * * @param {HTMLElement} node * @return {Object} An object with left and top properties */ function getOffset(node) { var left = 0, top = 0; while (node) { left += node.offsetLeft; top += node.offsetTop; node = node.offsetParent; } return { left: left, top: top }; } /** * Gets the value of a CSS property from the elements style attribute * * @param {HTMLElement} elm * @param {string} property * @return {string} */ function getStyle(elm, property) { var styleValue, elmStyle = elm.style; if (!cssPropertyNameCache[property]) { cssPropertyNameCache[property] = camelCase(property); } property = cssPropertyNameCache[property]; styleValue = elmStyle[property]; // Add an exception for text-align if ('textAlign' === property) { styleValue = styleValue || css(elm, property); if (css(elm.parentNode, property) === styleValue || css(elm, 'display') !== 'block' || is(elm, 'hr,th')) { return ''; } } return styleValue; } /** * Tests if an element has a style. * * If values are specified it will check that the styles value * matches one of the values * * @param {HTMLElement} elm * @param {string} property * @param {string|array} [values] * @return {boolean} */ function hasStyle(elm, property, values) { var styleValue = getStyle(elm, property); if (!styleValue) { return false; } return !values || styleValue === values || (Array.isArray(values) && values.indexOf(styleValue) > -1); } /** * Returns true if both nodes have the same number of inline styles and all the * inline styles have matching values * * @param {HTMLElement} nodeA * @param {HTMLElement} nodeB * @returns {boolean} */ function stylesMatch(nodeA, nodeB) { var i = nodeA.style.length; if (i !== nodeB.style.length) { return false; } while (i--) { var prop = nodeA.style[i]; if (nodeA.style[prop] !== nodeB.style[prop]) { return false; } } return true; } /** * Returns true if both nodes have the same number of attributes and all the * attribute values match * * @param {HTMLElement} nodeA * @param {HTMLElement} nodeB * @returns {boolean} */ function attributesMatch(nodeA, nodeB) { var i = nodeA.attributes.length; if (i !== nodeB.attributes.length) { return false; } while (i--) { var prop = nodeA.attributes[i]; var notMatches = prop.name === 'style' ? !stylesMatch(nodeA, nodeB) : prop.value !== attr(nodeB, prop.name); if (notMatches) { return false; } } return true; } /** * Removes an element placing its children in its place * * @param {HTMLElement} node */ function removeKeepChildren(node) { while (node.firstChild) { insertBefore(node.firstChild, node); } remove(node); } /** * Merges inline styles and tags with parents where possible * * @param {Node} node * @since 3.1.0 */ function merge(node) { if (node.nodeType !== ELEMENT_NODE) { return; } var parent = node.parentNode; var tagName = node.tagName; var mergeTags = /B|STRONG|EM|SPAN|FONT/; // Merge children (in reverse as children can be removed) var i = node.childNodes.length; while (i--) { merge(node.childNodes[i]); } // Should only merge inline tags if (!isInline(node)) { return; } // Remove any inline styles that match the parent style i = node.style.length; while (i--) { var prop = node.style[i]; if (css(parent, prop) === css(node, prop)) { node.style.removeProperty(prop); } } // Can only remove / merge tags if no inline styling left. // If there is any inline style left then it means it at least partially // doesn't match the parent style so must stay if (!node.style.length) { removeAttr(node, 'style'); // Remove font attributes if match parent if (tagName === 'FONT') { if (css(node, 'fontFamily').toLowerCase() === css(parent, 'fontFamily').toLowerCase()) { removeAttr(node, 'face'); } if (css(node, 'color') === css(parent, 'color')) { removeAttr(node, 'color'); } if (css(node, 'fontSize') === css(parent, 'fontSize')) { removeAttr(node, 'size'); } } // Spans and font tags with no attributes can be safely removed if (!node.attributes.length && /SPAN|FONT/.test(tagName)) { removeKeepChildren(node); } else if (mergeTags.test(tagName)) { var isBold = /B|STRONG/.test(tagName); var isItalic = tagName === 'EM'; while (parent && isInline(parent) && (!isBold || /bold|700/i.test(css(parent, 'fontWeight'))) && (!isItalic || css(parent, 'fontStyle') === 'italic')) { // Remove if parent match if ((parent.tagName === tagName || (isBold && /B|STRONG/.test(parent.tagName))) && attributesMatch(parent, node)) { removeKeepChildren(node); break; } parent = parent.parentNode; } } } // Merge siblings if attributes, including inline styles, match var next = node.nextSibling; if (next && next.tagName === tagName && attributesMatch(next, node)) { appendChild(node, next); removeKeepChildren(next); } } let emoticonsRoot = baseUrl + 'emoticons/'; /** * Default options for SCEditor * @type {Object} */ var defaultOptions = { /** @lends jQuery.sceditor.defaultOptions */ /** * Toolbar buttons order and groups. Should be comma separated and * have a bar | to separate groups * * @type {string} */ toolbar: 'bold,italic,underline,strike,subscript,superscript|' + 'left,center,right,justify|font,size,color,removeformat|' + 'cut,copy,pastetext|bulletlist,orderedlist,indent,outdent|' + 'table|code,quote|horizontalrule,image,email,link,unlink|' + 'emoticon,youtube,date,time|ltr,rtl|print,maximize,source', /** * Comma separated list of commands to excludes from the toolbar * * @type {string} */ toolbarExclude: null, /** * Stylesheet to include in the WYSIWYG editor. This is what will style * the WYSIWYG elements * * @type {string} */ style: baseUrl+'themes/content/default.css', /** * Comma separated list of fonts for the font selector * * @type {string} */ fonts: 'Arial,Arial Black,Comic Sans MS,Courier New,Georgia,Impact,' + 'Sans-serif,Serif,Times New Roman,Trebuchet MS,Verdana', /** * Colors should be comma separated and have a bar | to signal a new * column. * * If null the colors will be auto generated. * * @type {string} */ colors: '#000000,#44B8FF,#1E92F7,#0074D9,#005DC2,#00369B,#b3d5f4|' + '#444444,#C3FFFF,#9DF9FF,#7FDBFF,#68C4E8,#419DC1,#d9f4ff|' + '#666666,#72FF84,#4CEA5E,#2ECC40,#17B529,#008E02,#c0f0c6|' + '#888888,#FFFF44,#FFFA1E,#FFDC00,#E8C500,#C19E00,#fff5b3|' + '#aaaaaa,#FFC95F,#FFA339,#FF851B,#E86E04,#C14700,#ffdbbb|' + '#cccccc,#FF857A,#FF5F54,#FF4136,#E82A1F,#C10300,#ffc6c3|' + '#eeeeee,#FF56FF,#FF30DC,#F012BE,#D900A7,#B20080,#fbb8ec|' + '#ffffff,#F551FF,#CF2BE7,#B10DC9,#9A00B2,#9A00B2,#e8b6ef', /** * The locale to use. * @type {string} */ locale: attr(document.documentElement, 'lang') || 'en', /** * The Charset to use * @type {string} */ charset: 'utf-8', /** * Compatibility mode for emoticons. * * Helps if you have emoticons such as :/ which would put an emoticon * inside http:// * * This mode requires emoticons to be surrounded by whitespace or end of * line chars. This mode has limited As You Type emoticon conversion * support. It will not replace AYT for end of line chars, only * emoticons surrounded by whitespace. They will still be replaced * correctly when loaded just not AYT. * * @type {boolean} */ emoticonsCompat: false, /** * If to enable emoticons. Can be changes at runtime using the * emoticons() method. * * @type {boolean} * @since 1.4.2 */ emoticonsEnabled: true, /** * Emoticon root URL * * @type {string} */ emoticonsRoot: baseUrl, emoticons: { dropdown: { ':)': emoticonsRoot + 'smile.png', ':angel:': emoticonsRoot + 'angel.png', ':angry:': emoticonsRoot + 'angry.png', '8-)': emoticonsRoot + 'cool.png', ':\'(': emoticonsRoot + 'cwy.png', ':ermm:': emoticonsRoot + 'ermm.png', ':D': emoticonsRoot + 'grin.png', '<3': emoticonsRoot + 'heart.png', ':(': emoticonsRoot + 'sad.png', ':O': emoticonsRoot + 'shocked.png', ':P': emoticonsRoot + 'tongue.png', ';)': emoticonsRoot + 'wink.png' }, more: { ':alien:': emoticonsRoot + 'alien.png', ':blink:': emoticonsRoot + 'blink.png', ':blush:': emoticonsRoot + 'blush.png', ':cheerful:': emoticonsRoot + 'cheerful.png', ':devil:': emoticonsRoot + 'devil.png', ':dizzy:': emoticonsRoot + 'dizzy.png', ':getlost:': emoticonsRoot + 'getlost.png', ':happy:': emoticonsRoot + 'happy.png', ':kissing:': emoticonsRoot + 'kissing.png', ':ninja:': emoticonsRoot + 'ninja.png', ':pinch:': emoticonsRoot + 'pinch.png', ':pouty:': emoticonsRoot + 'pouty.png', ':sick:': emoticonsRoot + 'sick.png', ':sideways:': emoticonsRoot + 'sideways.png', ':silly:': emoticonsRoot + 'silly.png', ':sleeping:': emoticonsRoot + 'sleeping.png', ':unsure:': emoticonsRoot + 'unsure.png', ':woot:': emoticonsRoot + 'w00t.png', ':wassat:': emoticonsRoot + 'wassat.png' }, hidden: { ':whistling:': emoticonsRoot + 'whistling.png', ':love:': emoticonsRoot + 'wub.png' } }, /** * Width of the editor. Set to null for automatic with * * @type {?number} */ width: 600, /** * Height of the editor including toolbar. Set to null for automatic * height * * @type {?number} */ height: 300, /** * If to allow the editor to be resized * * @type {boolean} */ resizeEnabled: true, /** * Min resize to width, set to null for half textarea width or -1 for * unlimited * * @type {?number} */ resizeMinWidth: null, /** * Min resize to height, set to null for half textarea height or -1 for * unlimited * * @type {?number} */ resizeMinHeight: null, /** * Max resize to height, set to null for double textarea height or -1 * for unlimited * * @type {?number} */ resizeMaxHeight: null, /** * Max resize to width, set to null for double textarea width or -1 for * unlimited * * @type {?number} */ resizeMaxWidth: null, /** * If resizing by height is enabled * * @type {boolean} */ resizeHeight: true, /** * If resizing by width is enabled * * @type {boolean} */ resizeWidth: true, /** * Date format, will be overridden if locale specifies one. * * The words year, month and day will be replaced with the users current * year, month and day. * * @type {string} */ dateFormat: 'year-month-day', /** * Element to inset the toolbar into. * * @type {HTMLElement} */ toolbarContainer: null, /** * If to enable paste filtering. This is currently experimental, please * report any issues. * * @type {boolean} */ enablePasteFiltering: false, /** * If to completely disable pasting into the editor * * @type {boolean} */ disablePasting: false, /** * If the editor is read only. * * @type {boolean} */ readOnly: false, /** * If to set the editor to right-to-left mode. * * If set to null the direction will be automatically detected. * * @type {boolean} */ rtl: false, /** * If to auto focus the editor on page load * * @type {boolean} */ autofocus: false, /** * If to auto focus the editor to the end of the content * * @type {boolean} */ autofocusEnd: true, /** * If to auto expand the editor to fix the content * * @type {boolean} */ autoExpand: false, /** * If to auto update original textbox on blur * * @type {boolean} */ autoUpdate: false, /** * If to enable the browsers built in spell checker * * @type {boolean} */ spellcheck: true, /** * If to run the source editor when there is no WYSIWYG support. Only * really applies to mobile OS's. * * @type {boolean} */ runWithoutWysiwygSupport: false, /** * If to load the editor in source mode and still allow switching * between WYSIWYG and source mode * * @type {boolean} */ startInSourceMode: false, /** * Optional ID to give the editor. * * @type {string} */ id: null, /** * Comma separated list of plugins * * @type {string} */ plugins: '', /** * z-index to set the editor container to. Needed for jQuery UI dialog. * * @type {?number} */ zIndex: null, /** * If to trim the BBCode. Removes any spaces at the start and end of the * BBCode string. * * @type {boolean} */ bbcodeTrim: false, /** * If to disable removing block level elements by pressing backspace at * the start of them * * @type {boolean} */ disableBlockRemove: false, /** * Array of allowed URL (should be either strings or regex) for iframes. * * If it's a string then iframes where the start of the src matches the * specified string will be allowed. * * If it's a regex then iframes where the src matches the regex will be * allowed. * * @type {Array} */ allowedIframeUrls: [], /** * BBCode parser options, only applies if using the editor in BBCode * mode. * * See SCEditor.BBCodeParser.defaults for list of valid options * * @type {Object} */ parserOptions: { }, /** * CSS that will be added to the to dropdown menu (eg. z-index) * * @type {Object} */ dropDownCss: { }, //gripIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14.656 5.156l-10 10 .688.688 10-10-.688-.688zm0 3l-7 7 .688.688 7-7-.688-.688zm0 3l-4 4 .688.688 4-4-.688-.688z"></svg>', //gripIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22,22H20V20H22V22M22,18H20V16H22V18M18,22H16V20H18V22M18,18H16V16H18V18M14,22H12V20H14V22M22,14H20V12H22V14Z"></svg>', gripIcon: '<img src="' + baseUrl + 'icons/material/resize-bottom-right.png">', }; // Must start with a valid scheme // ^ // Schemes that are considered safe // (https?|s?ftp|mailto|spotify|skype|ssh|teamspeak|tel):| // Relative schemes (//:) are considered safe // (\\/\\/)| // Image data URI's are considered safe // data:image\\/(png|bmp|gif|p?jpe?g); var VALID_SCHEME_REGEX = /^(https?|s?ftp|mailto|spotify|skype|ssh|teamspeak|tel):|(\/\/)|data:image\/(png|bmp|gif|p?jpe?g);/i; /** * Escapes a string so it's safe to use in regex * * @param {string} str * @return {string} */ function regex(str) { return str.replace(/([\-.*+?^=!:${}()|\[\]\/\\])/g, '\\$1'); } /** * Escapes all HTML entities in a string * * If noQuotes is set to false, all single and double * quotes will also be escaped * * @param {string} str * @param {boolean} [noQuotes=true] * @return {string} * @since 1.4.1 */ function entities(str, noQuotes) { if (!str) { return str; } var replacements = { '&': '&', '<': '<', '>': '>', ' ': ' ', '\r\n': '<br />', '\r': '<br />', '\n': '<br />' }; if (noQuotes !== false) { replacements['"'] = '"'; replacements['\''] = '''; replacements['`'] = '`'; } str = str.replace(/ {2}|\r\n|[&<>\r\n'"`]/g, function (match) { return replacements[match] || match; }); return str; } /** * Escape URI scheme. * * Appends the current URL to a url if it has a scheme that is not: * * http * https * sftp * ftp * mailto * spotify * skype * ssh * teamspeak * tel * // * data:image/(png|jpeg|jpg|pjpeg|bmp|gif); * * **IMPORTANT**: This does not escape any HTML in a url, for * that use the escape.entities() method. * * @param {string} url * @return {string} * @since 1.4.5 */ function uriScheme(url) { var path, // If there is a : before a / then it has a scheme hasScheme = /^[^\/]*:/i, location = window.location; // Has no scheme or a valid scheme if ((!url || !hasScheme.test(url)) || VALID_SCHEME_REGEX.test(url)) { return url; } path = location.pathname.split('/'); path.pop(); return location.protocol + '//' + location.host + path.join('/') + '/' + url; } /** * HTML templates used by the editor and default commands * @type {Object} * @private */ var _templates = { html: '<!DOCTYPE html>' + '<html{attrs}>' + '<head>' + '<meta http-equiv="Content-Type" ' + 'content="text/html;charset={charset}" />' + '<link rel="stylesheet" type="text/css" href="{style}" />' + '</head>' + '<body contenteditable="true" {spellcheck}><p></p></body>' + '</html>', emoticon: '<img src="{url}" data-sceditor-emoticon="{key}" ' + 'alt="{key}" title="{tooltip}" />', fontOpt: '<a class="sceditor-font-option" href="#" ' + 'data-font="{font}"><font face="{font}">{font}</font></a>', sizeOpt: '<a class="sceditor-fontsize-option" data-size="{size}" ' + 'href="#"><font size="{size}">{size}</font></a>', pastetext: '<div><label for="txt">{label}</label> ' + '<textarea cols="20" rows="7" id="txt"></textarea></div>' + '<div><input type="button" class="button" value="{insert}" />' + '</div>', table: '<div><label for="rows">{rows}</label><input type="text" ' + 'id="rows" value="2" /></div>' + '<div><label for="cols">{cols}</label><input type="text" ' + 'id="cols" value="2" /></div>' + '<div><input type="button" class="button" value="{insert}"' + ' /></div>', image: '<div><label for="image">{url}</label> ' + '<input type="text" id="image" dir="ltr" placeholder="https://" /></div>' + '<div><label for="width">{width}</label> ' + '<input type="text" id="width" size="2" dir="ltr" /></div>' + '<div><label for="height">{height}</label> ' + '<input type="text" id="height" size="2" dir="ltr" /></div>' + '<div><input type="button" class="button" value="{insert}" />' + '</div>', email: '<div><label for="email">{label}</label> ' + '<input type="text" id="email" dir="ltr" /></div>' + '<div><label for="des">{desc}</label> ' + '<input type="text" id="des" /></div>' + '<div><input type="button" class="button" value="{insert}" />' + '</div>', link: '<div><label for="link">{url}</label> ' + '<input type="text" id="link" dir="ltr" placeholder="https://" /></div>' + '<div><label for="des">{desc}</label> ' + '<input type="text" id="des" /></div>' + '<div><input type="button" class="button" value="{ins}" /></div>', youtubeMenu: '<div><label for="link">{label}</label> ' + '<input type="text" id="link" dir="ltr" placeholder="https://" /></div>' + '<div><input type="button" class="button" value="{insert}" />' + '</div>', youtube: '<iframe width="560" height="315" frameborder="0" allowfullscreen ' + 'src="https://www.youtube-nocookie.com/embed/{id}?wmode=opaque&start={time}" ' + 'data-youtube-id="{id}"></iframe>' }; /** * Replaces any params in a template with the passed params. * * If createHtml is passed it will return a DocumentFragment * containing the parsed template. * * @param {string} name * @param {Object} [params] * @param {boolean} [createHtml] * @returns {string|DocumentFragment} * @private */ function _tmpl (name, params, createHtml) { var template = _templates[name]; Object.keys(params).forEach(function (name) { template = template.replace( new RegExp(regex('{' + name + '}'), 'g'), params[name] ); }); if (createHtml) { template = parseHTML(template); } return template; } /** * Fixes a bug in FF where it sometimes wraps * new lines in their own list item. * See issue #359 */ function fixFirefoxListBug(editor) { // Only apply to Firefox as will break other browsers. if ('mozHidden' in document) { var node = editor.getBody(); var next; while (node) { next = node; if (next.firstChild) { next = next.firstChild; } else { while (next && !next.nextSibling) { next = next.parentNode; } if (next) { next = next.nextSibling; } } if (node.nodeType === 3 && /[\n\r\t]+/.test(node.nodeValue)) { // Only remove if newlines are collapsed if (!/^pre/.test(css(node.parentNode, 'whiteSpace'))) { remove(node); } } node = next; } } } function material(png) { return '<img src="' + baseUrl + 'icons/material/' + png + '" width=18 height=18>'; } /** * Map of all the commands for SCEditor * @type {Object} * @name commands */ var defaultCmds = { // START_COMMAND: Bold bold: { exec: 'bold', tooltip: 'Bold', shortcut: 'Ctrl+B', icon: material('format-bold.png'), }, // END_COMMAND // START_COMMAND: Italic italic: { exec: 'italic', tooltip: 'Italic', shortcut: 'Ctrl+I', icon: material('format-italic.png'), }, // END_COMMAND // START_COMMAND: Underline underline: { exec: 'underline', tooltip: 'Underline', shortcut: 'Ctrl+U', icon: material('format-underline.png'), }, // END_COMMAND // START_COMMAND: Strikethrough strike: { exec: 'strikethrough', tooltip: 'Strikethrough', icon: material('format-strikethrough.png'), }, // END_COMMAND // START_COMMAND: Subscript subscript: { exec: 'subscript', tooltip: 'Subscript', icon: material('format-subscript.png'), }, // END_COMMAND // START_COMMAND: Superscript superscript: { exec: 'superscript', tooltip: 'Superscript', icon: material('format-superscript.png'), }, // END_COMMAND // START_COMMAND: Left left: { state: function (editor, node) { if (node && node.nodeType === 3) { node = node.parentNode; } if (node) { var isLtr = css(node, 'direction') === 'ltr'; var align = css(node, 'textAlign'); // Can be -moz-left return /left/.test(align) || align === (isLtr ? 'start' : 'end'); } }, exec: 'justifyleft', tooltip: 'Align left', icon: material('format-align-left.png'), }, // END_COMMAND // START_COMMAND: Centre center: { exec: 'justifycenter', tooltip: 'Center', icon: material('format-align-center.png'), }, // END_COMMAND // START_COMMAND: Right right: { state: function (editor, node) { if (node && node.nodeType === 3) { node = node.parentNode; } if (node) { var isLtr = css(node, 'direction') === 'ltr'; var align = css(node, 'textAlign'); // Can be -moz-right return /right/.test(align) || align === (isLtr ? 'end' : 'start'); } }, exec: 'justifyright', tooltip: 'Align right', icon: material('format-align-right.png'), }, // END_COMMAND // START_COMMAND: Justify justify: { exec: 'justifyfull', tooltip: 'Justify', icon: material('format-align-justify.png'), }, // END_COMMAND // START_COMMAND: Font font: { _dropDown: function (editor, caller, callback) { var content = createElement('div'); onEvent1(content, 'click', 'a', function (target, e) { callback(data(target, 'font')); editor.closeDropDown(true); e.preventDefault(); }); editor.opts.fonts.split(',').forEach(function (font) { appendChild(content, _tmpl('fontOpt', { font: font }, true)); }); editor.createDropDown(caller, 'font-picker', content); }, exec: function (editor, caller) { defaultCmds.font._dropDown(editor, caller, function (fontName) { editor.execCommand('fontname', fontName); }); }, tooltip: 'Font Name', icon: material('format-font.png'), }, // END_COMMAND // START_COMMAND: Size size: { _dropDown: function (editor, caller, callback) { var content = createElement('div'); onEvent1(content, 'click', 'a', function (target, e) { callback(data(target, 'size')); editor.closeDropDown(true); e.preventDefault(); }); for (var i = 1; i <= 7; i++) { appendChild(content, _tmpl('sizeOpt', { size: i }, true)); } editor.createDropDown(caller, 'fontsize-picker', content); }, exec: function (editor, caller) { defaultCmds.size._dropDown(editor, caller, function (fontSize) { editor.execCommand('fontsize', fontSize); }); }, tooltip: 'Font Size', icon: material('format-size.png'), }, // END_COMMAND // START_COMMAND: Colour color: { _dropDown: function (editor, caller, callback) { var content = createElement('div'), html = '', cmd = defaultCmds.color; if (!cmd._htmlCache) { editor.opts.colors.split('|').forEach(function (column) { html += '<div class="sceditor-color-column">'; column.split(',').forEach(function (color) { html += '<a href="#" class="sceditor-color-option"' + ' style="background-color: ' + color + '"' + ' data-color="' + color + '"></a>'; }); html += '</div>'; }); cmd._htmlCache = html; } appendChild(content, parseHTML(cmd._htmlCache)); onEvent1(content, 'click', 'a', function (target, e) { callback(data(target, 'color')); editor.closeDropDown(true); e.preventDefault(); }); editor.createDropDown(caller, 'color-picker', content); }, exec: function (editor, caller) { defaultCmds.color._dropDown(editor, caller, function (color) { editor.execCommand('forecolor', color); }); }, tooltip: 'Font Color', icon: material('palette.png'), }, // END_COMMAND // START_COMMAND: Remove Format removeformat: { exec: 'removeformat', tooltip: 'Remove Formatting', icon: material('format-clear.png'), }, // END_COMMAND // START_COMMAND: Cut cut: { exec: 'cut', tooltip: 'Cut', errorMessage: 'Your browser does not allow the cut command. ' + 'Please use the keyboard shortcut Ctrl/Cmd-X', icon: material('content-cut.png'), }, // END_COMMAND // START_COMMAND: Copy copy: { exec: 'copy', tooltip: 'Copy', errorMessage: 'Your browser does not allow the copy command. ' + 'Please use the keyboard shortcut Ctrl/Cmd-C', icon: material('content-copy.png'), }, // END_COMMAND // START_COMMAND: Paste paste: { exec: 'paste', tooltip: 'Paste', errorMessage: 'Your browser does not allow the paste command. ' + 'Please use the keyboard shortcut Ctrl/Cmd-V', icon: material('content-paste.png'), }, // END_COMMAND // START_COMMAND: Paste Text pastetext: { exec: function (editor, caller) { var val, content = createElement('div'); appendChild(content, _tmpl('pastetext', { label: editor._( 'Paste your text inside the following box:' ), insert: editor._('Insert') }, true)); onEvent1(content, 'click', '.button', function (target, e) { val = find(content, '#txt')[0].value; if (val) { editor.wysiwygEditorInsertText(val); } editor.closeDropDown(true); e.preventDefault(); }); editor.createDropDown(caller, 'pastetext', content); }, tooltip: 'Paste Text', icon: material('content-paste.png'), }, // END_COMMAND // START_COMMAND: Bullet List bulletlist: { exec: function (editor) { fixFirefoxListBug(editor); editor.execCommand('insertunorderedlist'); }, tooltip: 'Bullet list', icon: material('format-list-bulleted.png'), }, // END_COMMAND // START_COMMAND: Ordered List orderedlist: { exec: function (editor) { fixFirefoxListBug(editor); editor.execCommand('insertorderedlist'); }, tooltip: 'Numbered list', icon: material('format-list-numbered.png'), }, // END_COMMAND // START_COMMAND: Indent indent: { state: function (editor, parent, firstBlock) { // Only works with lists, for now var range, startParent, endParent; if (is(firstBlock, 'li')) { return 0; } if (is(firstBlock, 'ul,ol,menu')) { // if the whole list is selected, then this must be // invalidated because the browser will place a // <blockquote> there range = this.getRangeHelper().selectedRange(); startParent = range.startContainer.parentNode; endParent = range.endContainer.parentNode; // TODO: could use nodeType for this? // Maybe just check the firstBlock contains both the start //and end containers // Select the tag, not the textNode // (that's why the parentNode) if (startParent !== startParent.parentNode.firstElementChild || // work around a bug in FF (is(endParent, 'li') && endParent !== endParent.parentNode.lastElementChild)) { return 0; } } return -1; }, exec: function (editor) { var block = editor.getRangeHelper().getFirstBlockParent(); editor.focus(); // An indent system is quite complicated as there are loads // of complications and issues around how to indent text // As default, let's just stay with indenting the lists, // at least, for now. if (closest(block, 'ul,ol,menu')) { editor.execCommand('indent'); } }, tooltip: 'Add indent', icon: material('format-indent-increase.png'), }, // END_COMMAND // START_COMMAND: Outdent outdent: { state: function (editor, parents, firstBlock) { return closest(firstBlock, 'ul,ol,menu') ? 0 : -1; }, exec: function (editor) { var block = editor.getRangeHelper().getFirstBlockParent(); if (closest(block, 'ul,ol,menu')) { editor.execCommand('outdent'); } }, tooltip: 'Remove one indent', icon: material('format-indent-decrease.png'), }, // END_COMMAND // START_COMMAND: Table table: { exec: function (editor, caller) { var content = createElement('div'); appendChild(content, _tmpl('table', { rows: editor._('Rows:'), cols: editor._('Cols:'), insert: editor._('Insert') }, true)); onEvent1(content, 'click', '.button', function (target, e) { var rows = Number(find(content, '#rows')[0].value), cols = Number(find(content, '#cols')[0].value), html = '<table>'; if (rows > 0 && cols > 0) { html += Array(rows + 1).join( '<tr>' + Array(cols + 1).join( '<td><br /></td>' ) + '</tr>' ); html += '</table>'; editor.wysiwygEditorInsertHtml(html); editor.closeDropDown(true); e.preventDefault(); } }); editor.createDropDown(caller, 'inserttable', content); }, tooltip: 'Insert a table', icon: material('table.png'), }, // END_COMMAND // START_COMMAND: Horizontal Rule horizontalrule: { exec: 'inserthorizontalrule', tooltip: 'Insert a horizontal rule', icon: material('minus.png'), }, // END_COMMAND // START_COMMAND: Code code: { exec: function (editor) { editor.wysiwygEditorInsertHtml( '<code>', '<br /></code>' ); }, tooltip: 'Code', icon: material('code-braces.png'), }, // END_COMMAND // START_COMMAND: Image image: { _dropDown: function (editor, caller, selected, cb) { var content = createElement('div'); appendChild(content, _tmpl('image', { url: editor._('URL:'), width: editor._('Width (optional):'), height: editor._('Height (optional):'), insert: editor._('Insert') }, true)); var urlInput = find(content, '#image')[0]; urlInput.value = selected; onEvent1(content, 'click', '.button', function (target, e) { if (urlInput.value) { cb( urlInput.value, find(content, '#width')[0].value, find(content, '#height')[0].value ); } editor.closeDropDown(true); e.preventDefault(); }); editor.createDropDown(caller, 'insertimage', content); }, exec: function (editor, caller) { defaultCmds.image._dropDown( editor, caller, '', function (url, width, height) { var attrs = ''; if (width) { attrs += ' width="' + parseInt(width, 10) + '"'; } if (height) { attrs += ' height="' + parseInt(height, 10) + '"'; } attrs += ' src="' + entities(url) + '"'; editor.wysiwygEditorInsertHtml( '<img' + attrs + ' />' ); } ); }, tooltip: 'Insert an image', icon: material('image.png'), }, // END_COMMAND // START_COMMAND: E-mail email: { _dropDown: function (editor, caller, cb) { var content = createElement('div'); appendChild(content, _tmpl('email', { label: editor._('E-mail:'), desc: editor._('Description (optional):'), insert: editor._('Insert') }, true)); onEvent1(content, 'click', '.button', function (target, e) { var email = find(content, '#email')[0].value; if (email) { cb(email, find(content, '#des')[0].value); } editor.closeDropDown(true); e.preventDefault(); }); editor.createDropDown(caller, 'insertemail', content); }, exec: function (editor, caller) { defaultCmds.email._dropDown( editor, caller, function (email, text) { if (!editor.getRangeHelper().selectedHtml() || text) { editor.wysiwygEditorInsertHtml( '<a href="' + 'mailto:' + entities(email) + '">' + entities((text || email)) + '</a>' ); } else { editor.execCommand('createlink', 'mailto:' + email); } } ); }, tooltip: 'Insert an email', icon: material('email.png'), }, // END_COMMAND // START_COMMAND: Link link: { _dropDown: function (editor, caller, cb) { var content = createElement('div'); appendChild(content, _tmpl('link', { url: editor._('URL:'), desc: editor._('Description (optional):'), ins: editor._('Insert') }, true)); var linkInput = find(content, '#link')[0]; function insertUrl(target,e) { if (linkInput.value) { cb(linkInput.value, find(content, '#des')[0].value); } editor.closeDropDown(true); e.preventDefault(); } onEvent1(content, 'click', '.button', insertUrl); onEvent2(content, 'keypress', function (e) { // 13 = enter key if (e.which === 13 && linkInput.value) { insertUrl(e); } }, EVENT_CAPTURE); editor.createDropDown(caller, 'insertlink', content); }, exec: function (editor, caller) { defaultCmds.link._dropDown(editor, caller, function (url, text) { if (text || !editor.getRangeHelper().selectedHtml()) { editor.wysiwygEditorInsertHtml( '<a href="' + entities(url) + '">' + entities(text || url) + '</a>' ); } else { editor.execCommand('createlink', url); } }); }, tooltip: 'Insert a link', icon: material('link.png'), }, // END_COMMAND // START_COMMAND: Unlink unlink: { state: function (editor) { return closest(editor.currentNode(), 'a') ? 0 : -1; }, exec: function (editor) { var anchor = closest(editor.currentNode(), 'a'); if (anchor) { while (anchor.firstChild) { insertBefore(anchor.firstChild, anchor); } remove(anchor); } }, tooltip: 'Unlink', icon: material('link-off.png'), }, // END_COMMAND // START_COMMAND: Quote quote: { exec: function (editor, caller, html, author) { var before = '<blockquote>', end = '</blockquote>'; // if there is HTML passed set end to null so any selected // text is replaced if (html) { author = (author ? '<cite>' + entities(author) + '</cite>' : ''); before = before + author + html + end; end = null; // if not add a newline to the end of the inserted quote } else if (editor.getRangeHelper().selectedHtml() === '') { end = '<br />' + end; } editor.wysiwygEditorInsertHtml(before, end); }, tooltip: 'Insert a Quote', icon: material('format-quote-close.png'), }, // END_COMMAND // START_COMMAND: Emoticons emoticon: { base: function (editor, caller, targetToHtml) { var createContent = function (includeMore) { var moreLink, opts = editor.opts, emoticonsCompat = opts.emoticonsCompat, content = createElement('div'), line = createElement('div'), perLine = 0, emoticons = extend( {}, opts.emoticons.dropdown, includeMore ? opts.emoticons.more : {} ); appendChild(content, line); perLine = Math.sqrt(Object.keys(emoticons).length); onEvent1(content, 'click', 'img', function (target, e) { editor.insert(targetToHtml(target)); editor.closeDropDown(true); e.preventDefault(); }); each(emoticons, function (code, emoticon) { appendChild(line, createElement('img', { src: emoticon, 'data-sceditor-emoticon': code, alt: code, title: code })); if (line.children.length >= perLine) { line = createElement('div'); appendChild(content, line); } }); if (!includeMore && opts.emoticons.more) { moreLink = createElement('a', { className: 'sceditor-more' }); appendChild(moreLink, document.createTextNode(editor._('More'))); onEvent2(moreLink, 'click', function (e) { editor.createDropDown( caller, 'more-emoticons', createContent(true) ); e.preventDefault(); }); appendChild(content, moreLink); } return content; }; editor.createDropDown(caller, 'emoticons', createContent(false)); }, exec: function (editor, caller) { editor.commands.emoticon.base(editor, caller , function(target) { return target.outerHTML; } ); }, txtExec: function (editor, caller) { editor.commands.emoticon.exec(editor, caller); }, tooltip: 'Insert an emoticon', icon: material('emoticon-outline.png'), }, // END_COMMAND // START_COMMAND: YouTube youtube: { _dropDown: function (editor, caller, callback) { var content = createElement('div'); appendChild(content, _tmpl('youtubeMenu', { label: editor._('Video URL:'), insert: editor._('Insert') }, true)); onEvent1(content, 'click', '.button', function (target, e) { var val = find(content, '#link')[0].value; var idMatch = val.match(/(?:v=|v\/|embed\/|youtu.be\/)?([a-zA-Z0-9_-]{11})/); var timeMatch = val.match(/[&|?](?:star)?t=((\d+[hms]?){1,3})/); var time = 0; if (timeMatch) { each(timeMatch[1].split(/[hms]/), function (i, val) { if (val !== '') { time = (time * 60) + Number(val); } }); } if (idMatch && /^[a-zA-Z0-9_\-]{11}$/.test(idMatch[1])) { callback(idMatch[1], time); } editor.closeDropDown(true); e.preventDefault(); }); editor.createDropDown(caller, 'insertlink', content); }, exec: function (editor, btn) { defaultCmds.youtube._dropDown(editor, btn, function (id, time) { editor.wysiwygEditorInsertHtml(_tmpl('youtube', { id: id, time: time })); }); }, tooltip: 'Insert a YouTube video', icon: material('youtube.png'), }, // END_COMMAND // START_COMMAND: Date date: { _date: function (editor) { var now = new Date(), year = now.getYear(), month = now.getMonth() + 1, day = now.getDate(); if (year < 2000) { year = 1900 + year; } if (month < 10) { month = '0' + month; } if (day < 10) { day = '0' + day; } return editor.opts.dateFormat .replace(/year/i, year) .replace(/month/i, month) .replace(/day/i, day); }, exec: function (editor) { editor.insertText(defaultCmds.date._date(editor)); }, txtExec: function (editor) { defaultCmds.date.exec(editor); }, tooltip: 'Insert current date', icon: material('calendar-today.png'), }, // END_COMMAND // START_COMMAND: Time time: { _time: function () { var now = new Date(), hours = now.getHours(), mins = now.getMinutes(), secs = now.getSeconds(); if (hours < 10) { hours = '0' + hours; } if (mins < 10) { mins = '0' + mins; } if (secs < 10) { secs = '0' + secs; } return hours + ':' + mins + ':' + secs; }, exec: function (editor) { editor.insertText(defaultCmds.time._time()); }, txtExec: function (editor) { defaultCmds.time.exec(editor); }, tooltip: 'Insert current time', icon: material('clock-outline.png'), }, // END_COMMAND // START_COMMAND: Ltr ltr: { state: function (editor, parents, firstBlock) { //return firstBlock && firstBlock.style.direction === 'ltr'; return firstBlock && firstBlock.style && firstBlock.style.direction === 'ltr'; }, exec: function (editor) { var rangeHelper = editor.getRangeHelper(), node = rangeHelper.getFirstBlockParent(); editor.focus(); if (!node || is(node, 'body')) { editor.execCommand('formatBlock', 'p'); node = rangeHelper.getFirstBlockParent(); if (!node || is(node, 'body')) { return; } } var toggleValue = css(node, 'direction') === 'ltr' ? '' : 'ltr'; css(node, 'direction', toggleValue); }, tooltip: 'Left-to-Right', icon: material('format-pilcrow-arrow-right.png'), }, // END_COMMAND // START_COMMAND: Rtl rtl: { state: function (editor, parents, firstBlock) { //return firstBlock && firstBlock.style.direction === 'rtl'; return firstBlock && firstBlock.style && firstBlock.style.direction === 'rtl'; }, exec: function (editor) { var rangeHelper = editor.getRangeHelper(), node = rangeHelper.getFirstBlockParent(); editor.focus(); if (!node || is(node, 'body')) { editor.execCommand('formatBlock', 'p'); node = rangeHelper.getFirstBlockParent(); if (!node || is(node, 'body')) { return; } } var toggleValue = css(node, 'direction') === 'rtl' ? '' : 'rtl'; css(node, 'direction', toggleValue); }, tooltip: 'Right-to-Left', icon: material('format-pilcrow-arrow-left.png'), }, // END_COMMAND // START_COMMAND: Print print: { exec: 'print', tooltip: 'Print', icon: material('printer.png'), }, // END_COMMAND // START_COMMAND: Maximize maximize: { state: function (editor) { return editor.maximize(); }, exec: function (editor) { editor.maximize(!editor.maximize()); editor.focus(); }, txtExec: function () { defaultCmds.maximize.exec(editor); }, tooltip: 'Maximize', shortcut: 'Ctrl+Shift+M', icon: material('arrow-expand-all.png'), }, // END_COMMAND // START_COMMAND: Source source: { state: function (editor) { return editor.sourceMode(); }, exec: function (editor) { editor.toggleSourceMode(); editor.focus(); }, txtExec: function (editor) { defaultCmds.source.exec(editor); }, tooltip: 'View source', shortcut: 'Ctrl+Shift+S', icon: material('code-tags.png'), }, // END_COMMAND }; var plugins = {}; /** * Plugin Manager class * @class PluginManager * @name PluginManager */ function newPluginManager(thisObj) { /** * Alias of this * * @private * @type {Object} */ var base = {}; /** * Array of all currently registered plugins * * @type {Array} * @private */ var registeredPlugins = []; /** * Changes a signals name from "name" into "signalName". * * @param {string} signal * @return {string} * @private */ var formatSignalName = function (signal) { return 'signal' + signal.charAt(0).toUpperCase() + signal.slice(1); }; /** * Calls handlers for a signal * * @see call() * @see callOnlyFirst() * @param {Array} args * @param {boolean} returnAtFirst * @return {*} * @private */ var callHandlers = function (args, returnAtFirst) { if( args.length > 3 ) throw 'too many args'; var idx, ret, signal = formatSignalName(args[0]); for (idx = 0; idx < registeredPlugins.length; idx++) { if (signal in registeredPlugins[idx]) { ret = registeredPlugins[idx][signal](thisObj, args[1], args[2]); if (returnAtFirst) { return ret; } } } }; /** * Calls all handlers for the passed signal * * @param {string} signal * @param {...string} args * @function * @name call */ base.call = function () { callHandlers(arguments, false); }; /** * Calls the first handler for a signal, and returns the * * @param {string} signal * @param {...string} args * @return {*} The result of calling the handler * @function * @name callOnlyFirst */ base.callOnlyFirst = function () { return callHandlers(arguments, true); }; /** * Checks if a signal has a handler * * @param {string} signal * @return {boolean} * @function * @name hasHandler */ base.hasHandler = function (signal) { var i = registeredPlugins.length; signal = formatSignalName(signal); while (i--) { if (signal in registeredPlugins[i]) { return true; } } return false; }; /** * Checks if the plugin exists in plugins * * @param {string} plugin * @return {boolean} * @function * @name exists */ base.exists = function (plugin) { if (plugin in plugins) { plugin = plugins[plugin]; return typeof plugin === 'function' && typeof plugin.prototype === 'object'; } return false; }; /** * Checks if the passed plugin is currently registered. * * @param {string} plugin * @return {boolean} * @function * @name isRegistered */ base.isRegistered = function (plugin) { if (base.exists(plugin)) { var idx = registeredPlugins.length; while (idx--) { if (registeredPlugins[idx] instanceof plugins[plugin]) { return true; } } } return false; }; /** * Registers a plugin to receive signals * * @param {string} plugin * @return {boolean} * @function * @name register */ base.register = function (pluginName) { if (!base.exists(pluginName) || base.isRegistered(pluginName)) { return false; } let plugin = plugins[pluginName](); if(!plugin) throw pluginName; registeredPlugins.push(plugin); if ('init' in plugin) { plugin.init(thisObj); } return true; }; /** * Deregisters a plugin. * * @param {string} plugin * @return {boolean} * @function * @name deregister */ base.deregister = function (plugin) { var removedPlugin, pluginIdx = registeredPlugins.length, removed = false; if (!base.isRegistered(plugin)) { return removed; } while (pluginIdx--) { if (registeredPlugins[pluginIdx] instanceof plugins[plugin]) { removedPlugin = registeredPlugins.splice(pluginIdx, 1)[0]; removed = true; if ('destroy' in removedPlugin) { removedPlugin.destroy(thisObj); } } } return removed; }; /** * Clears all plugins and removes the owner reference. * * Calling any functions on this object after calling * destroy will cause a JS error. * * @name destroy */ base.destroy = function () { var i = registeredPlugins.length; while (i--) { if ('destroy' in registeredPlugins[i]) { registeredPlugins[i].destroy(thisObj); } } registeredPlugins = []; thisObj = null; }; return base; } //PluginManager.plugins = plugins; /** * Gets the text, start/end node and offset for * length chars left or right of the passed node * at the specified offset. * * @param {Node} node * @param {number} offset * @param {boolean} isLeft * @param {number} length * @return {Object} * @private */ var outerText = function (range, isLeft, length) { var nodeValue, remaining, start, end, node, text = '', next = range.startContainer, offset = range.startOffset; // Handle cases where node is a paragraph and offset // refers to the index of a text node. // 3 = text node if (next && next.nodeType !== 3) { next = next.childNodes[offset]; offset = 0; } start = end = offset; while (length > text.length && next && next.nodeType === 3) { nodeValue = next.nodeValue; remaining = length - text.length; // If not the first node, start and end should be at their // max values as will be updated when getting the text if (node) { end = nodeValue.length; start = 0; } node = next; if (isLeft) { start = Math.max(end - remaining, 0); offset = start; text = nodeValue.substr(start, end - start) + text; next = node.previousSibling; } else { end = Math.min(remaining, nodeValue.length); offset = start + end; text += nodeValue.substr(start, end); next = node.nextSibling; } } return { node: node || next, offset: offset, text: text }; }; /** * Range helper * * @class RangeHelper * @name RangeHelper */ function newRangeHelper(win, d) { var _createMarker, _prepareInput, doc = d || win.contentDocument || win.document, startMarker = 'sceditor-start-marker', endMarker = 'sceditor-end-marker', base = {}; /** * Inserts HTML into the current range replacing any selected * text. * * If endHTML is specified the selected contents will be put between * html and endHTML. If there is nothing selected html and endHTML are * just concatenate together. * * @param {string} html * @param {string} [endHTML] * @return False on fail * @function * @name insertHTML */ base.insertHTML = function (html, endHTML) { var node, div, range = base.selectedRange(); if (!range) { return false; } if (endHTML) { html += base.selectedHtml() + endHTML; } div = createElement('p', {}, doc); node = doc.createDocumentFragment(); div.innerHTML = html; while (div.firstChild) { appendChild(node, div.firstChild); } base.insertNode(node); }; /** * Prepares HTML to be inserted by adding a zero width space * if the last child is empty and adding the range start/end * markers to the last child. * * @param {Node|string} node * @param {Node|string} [endNode] * @param {boolean} [returnHtml] * @return {Node|string} * @private */ _prepareInput = function (node, endNode, returnHtml) { var lastChild, frag = doc.createDocumentFragment(); if (typeof node === 'string') { if (endNode) { node += base.selectedHtml() + endNode; } frag = parseHTML(node); } else { appendChild(frag, node); if (endNode) { appendChild(frag, base.selectedRange().extractContents()); appendChild(frag, endNode); } } if (!(lastChild = frag.lastChild)) { return; } while (!isInline(lastChild.lastChild, true)) { lastChild = lastChild.lastChild; } if (canHaveChildren(lastChild)) { // Webkit won't allow the cursor to be placed inside an // empty tag, so add a zero width space to it. if (!lastChild.lastChild) { appendChild(lastChild, document.createTextNode('\u200B')); } } else { lastChild = frag; } base.removeMarkers(); // Append marks to last child so when restored cursor will be in // the right place appendChild(lastChild, _createMarker(startMarker)); appendChild(lastChild, _createMarker(endMarker)); if (returnHtml) { var div = createElement('div'); appendChild(div, frag); return div.innerHTML; } return frag; }; /** * The same as insertHTML except with DOM nodes instead * * <strong>Warning:</strong> the nodes must belong to the * document they are being inserted into. Some browsers * will throw exceptions if they don't. * * Returns boolean false on fail * * @param {Node} node * @param {Node} endNode * @return {false|undefined} * @function * @name insertNode */ base.insertNode = function (node, endNode) { var first, last, input = _prepareInput(node, endNode), range = base.selectedRange(), parent = range.commonAncestorContainer, emptyNodes = []; if (!input) { return false; } function removeIfEmpty(node) { // Only remove empty node if it wasn't already empty if (node && isEmpty(node) && emptyNodes.indexOf(node) < 0) { remove(node); } } if (range.startContainer !== range.endContainer) { each(parent.childNodes, function (_, node) { if (isEmpty(node)) { emptyNodes.push(node); } }); first = input.firstChild; last = input.lastChild; } range.deleteContents(); // FF allows <br /> to be selected but inserting a node // into <br /> will cause it not to be displayed so must // insert before the <br /> in FF. // 3 = TextNode if (parent && parent.nodeType !== 3 && !canHaveChildren(parent)) { insertBefore(input, parent); } else { range.insertNode(input); // If a node was split or its contents deleted, remove any resulting // empty tags. For example: // <p>|test</p><div>test|</div> // When deleteContents could become: // <p></p>|<div></div> // So remove the empty ones removeIfEmpty(first && first.previousSibling); removeIfEmpty(last && last.nextSibling); } base.restoreRange(); }; /** * Clones the selected Range * * @return {Range} * @function * @name cloneSelected */ base.cloneSelected = function () { var range = base.selectedRange(); if (range) { return range.cloneRange(); } }; /** * Gets the selected Range * * @return {Range} * @function * @name selectedRange */ base.selectedRange = function () { var range, firstChild, sel = win.getSelection(); if (!sel) { return; } // When creating a new range, set the start to the first child // element of the body element to avoid errors in FF. if (sel.rangeCount <= 0) { firstChild = doc.body; while (firstChild.firstChild) { firstChild = firstChild.firstChild; } range = doc.createRange(); // Must be setStartBefore otherwise it can cause infinite // loops with lists in WebKit. See issue 442 range.setStartBefore(firstChild); sel.addRange(range); } if (sel.rangeCount > 0) { range = sel.getRangeAt(0); } return range; }; /** * Gets if there is currently a selection * * @return {boolean} * @function * @name hasSelection * @since 1.4.4 */ base.hasSelection = function () { var sel = win.getSelection(); return sel && sel.rangeCount > 0; }; /** * Gets the currently selected HTML * * @return {string} * @function * @name selectedHtml */ base.selectedHtml = function () { var div, range = base.selectedRange(); if (range) { div = createElement('p', {}, doc); appendChild(div, range.cloneContents()); return div.innerHTML; } return ''; }; /** * Gets the parent node of the selected contents in the range * * @return {HTMLElement} * @function * @name parentNode */ base.parentNode = function () { var range = base.selectedRange(); if (range) { return range.commonAncestorContainer; } }; /** * Gets the first block level parent of the selected * contents of the range. * * @return {HTMLElement} * @function * @name getFirstBlockParent */ /** * Gets the first block level parent of the selected * contents of the range. * * @param {Node} [n] The element to get the first block level parent from * @return {HTMLElement} * @function * @name getFirstBlockParent^2 * @since 1.4.1 */ base.getFirstBlockParent = function (node) { var func = function (elm) { if (!isInline(elm, true)) { return elm; } elm = elm ? elm.parentNode : null; return elm ? func(elm) : elm; }; return func(node || base.parentNode()); }; /** * Inserts a node at either the start or end of the current selection * * @param {Bool} start * @param {Node} node * @function * @name insertNodeAt */ base.insertNodeAt = function (start, node) { var currentRange = base.selectedRange(), range = base.cloneSelected(); if (!range) { return false; } range.collapse(start); range.insertNode(node); // Reselect the current range. // Fixes issue with Chrome losing the selection. Issue#82 base.selectRange(currentRange); }; /** * Creates a marker node * * @param {string} id * @return {HTMLSpanElement} * @private */ _createMarker = function (id) { base.removeMarker(id); var marker = createElement('span', { id: id, className: 'sceditor-selection sceditor-ignore', style: 'display:none;line-height:0' }, doc); marker.innerHTML = ' '; return marker; }; /** * Inserts start/end markers for the current selection * which can be used by restoreRange to re-select the * range. * * @function * @name insertMarkers */ base.insertMarkers = function () { var currentRange = base.selectedRange(); var startNode = _createMarker(startMarker); base.removeMarkers(); base.insertNodeAt(true, startNode); // Fixes issue with end marker sometimes being placed before // the start marker when the range is collapsed. if (currentRange && currentRange.collapsed) { startNode.parentNode.insertBefore( _createMarker(endMarker), startNode.nextSibling); } else { base.insertNodeAt(false, _createMarker(endMarker)); } }; /** * Gets the marker with the specified ID * * @param {string} id * @return {Node} * @function * @name getMarker */ base.getMarker = function (id) { return doc.getElementById(id); }; /** * Removes the marker with the specified ID * * @param {string} id * @function * @name removeMarker */ base.removeMarker = function (id) { var marker = base.getMarker(id); if (marker) { remove(marker); } }; /** * Removes the start/end markers * * @function * @name removeMarkers */ base.removeMarkers = function () { base.removeMarker(startMarker); base.removeMarker(endMarker); }; /** * Saves the current range location. Alias of insertMarkers() * * @function * @name saveRage */ base.saveRange = function () { base.insertMarkers(); }; /** * Select the specified range * * @param {Range} range * @function * @name selectRange */ base.selectRange = function (range) { var lastChild; var sel = win.getSelection(); var container = range.endContainer; // Check if cursor is set after a BR when the BR is the only // child of the parent. In Firefox this causes a line break // to occur when something is typed. See issue #321 if (range.collapsed && container && !isInline(container, true)) { lastChild = container.lastChild; while (lastChild && is(lastChild, '.sceditor-ignore')) { lastChild = lastChild.previousSibling; } if (is(lastChild, 'br')) { var rng = doc.createRange(); rng.setEndAfter(lastChild); rng.collapse(false); if (base.compare(range, rng)) { range.setStartBefore(lastChild); range.collapse(true); } } } if (sel) { base.clear(); sel.addRange(range); } }; /** * Restores the last range saved by saveRange() or insertMarkers() * * @function * @name restoreRange */ base.restoreRange = function () { var isCollapsed, range = base.selectedRange(), start = base.getMarker(startMarker), end = base.getMarker(endMarker); if (!start || !end || !range) { return false; } isCollapsed = start.nextSibling === end; range = doc.createRange(); range.setStartBefore(start); range.setEndAfter(end); if (isCollapsed) { range.collapse(true); } base.selectRange(range); base.removeMarkers(); }; /** * Selects the text left and right of the current selection * * @param {number} left * @param {number} right * @since 1.4.3 * @function * @name selectOuterText */ base.selectOuterText = function (left, right) { var start, end, range = base.cloneSelected(); if (!range) { return false; } range.collapse(false); start = outerText(range, true, left); end = outerText(range, false, right); range.setStart(start.node, start.offset); range.setEnd(end.node, end.offset); base.selectRange(range); }; /** * Gets the text left or right of the current selection * * @param {boolean} before * @param {number} length * @return {string} * @since 1.4.3 * @function * @name selectOuterText */ base.getOuterText = function (before, length) { var range = base.cloneSelected(); if (!range) { return ''; } range.collapse(!before); return outerText(range, before, length).text; }; /** * Replaces keywords with values based on the current caret position * * @param {Array} keywords * @param {boolean} includeAfter If to include the text after the * current caret position or just * text before * @param {boolean} keywordsSorted If the keywords array is pre * sorted shortest to longest * @param {number} longestKeyword Length of the longest keyword * @param {boolean} requireWhitespace If the key must be surrounded * by whitespace * @param {string} keypressChar If this is being called from * a keypress event, this should be * set to the pressed character * @return {boolean} * @function * @name replaceKeyword */ // eslint-disable-next-line max-params base.replaceKeyword = function ( keywords, includeAfter, keywordsSorted, longestKeyword, requireWhitespace, keypressChar ) { if (!keywordsSorted) { keywords.sort(function (a, b) { return a[0].length - b[0].length; }); } var outerText, match, matchPos, startIndex, leftLen, charsLeft, keyword, keywordLen, whitespaceRegex = '(^|[\\s\xA0\u2002\u2003\u2009])', keywordIdx = keywords.length, whitespaceLen = requireWhitespace ? 1 : 0, maxKeyLen = longestKeyword || keywords[keywordIdx - 1][0].length; if (requireWhitespace) { maxKeyLen++; } keypressChar = keypressChar || ''; outerText = base.getOuterText(true, maxKeyLen); leftLen = outerText.length; outerText += keypressChar; if (includeAfter) { outerText += base.getOuterText(false, maxKeyLen); } while (keywordIdx--) { keyword = keywords[keywordIdx][0]; keywordLen = keyword.length; startIndex = Math.max(0, leftLen - keywordLen - whitespaceLen); matchPos = -1; if (requireWhitespace) { match = outerText .substr(startIndex) .match(new RegExp(whitespaceRegex + regex(keyword) + whitespaceRegex)); if (match) { // Add the length of the text that was removed by // substr() and also add 1 for the whitespace matchPos = match.index + startIndex + match[1].length; } } else { matchPos = outerText.indexOf(keyword, startIndex); } if (matchPos > -1) { // Make sure the match is between before and // after, not just entirely in one side or the other if (matchPos <= leftLen && matchPos + keywordLen + whitespaceLen >= leftLen) { charsLeft = leftLen - matchPos; // If the keypress char is white space then it should // not be replaced, only chars that are part of the // key should be replaced. base.selectOuterText( charsLeft, keywordLen - charsLeft - (/^\S/.test(keypressChar) ? 1 : 0) ); base.insertHTML(keywords[keywordIdx][1]); return true; } } } return false; }; /** * Compares two ranges. * * If rangeB is undefined it will be set to * the current selected range * * @param {Range} rngA * @param {Range} [rngB] * @return {boolean} * @function * @name compare */ base.compare = function (rngA, rngB) { if (!rngB) { rngB = base.selectedRange(); } if (!rngA || !rngB) { return !rngA && !rngB; } return rngA.compareBoundaryPoints(Range.END_TO_END, rngB) === 0 && rngA.compareBoundaryPoints(Range.START_TO_START, rngB) === 0; }; /** * Removes any current selection * * @since 1.4.6 * @function * @name clear */ base.clear = function () { var sel = win.getSelection(); if (sel) { if (sel.removeAllRanges) { sel.removeAllRanges(); } else if (sel.empty) { sel.empty(); } } }; return base; } var USER_AGENT = navigator.userAgent; /** * Detects if the browser is iOS * * Needed to fix iOS specific bugs * * @function * @name ios * @memberOf jQuery.sceditor * @type {boolean} */ var ios = /iPhone|iPod|iPad| wosbrowser\//i.test(USER_AGENT); /** * If the browser supports WYSIWYG editing (e.g. older mobile browsers). * * @function * @name isWysiwygSupported * @return {boolean} */ var isWysiwygSupported = (function () { var match, isUnsupported; // IE is the only browser to support documentMode var ie = !!window.document.documentMode; var legacyEdge = '-ms-ime-align' in document.documentElement.style; var div = document.createElement('div'); div.contentEditable = true; // Check if the contentEditable attribute is supported if (!('contentEditable' in document.documentElement) || div.contentEditable !== 'true') { return false; } // I think blackberry supports contentEditable or will at least // give a valid value for the contentEditable detection above // so it isn't included in the below tests. // I hate having to do UA sniffing but some mobile browsers say they // support contentediable when it isn't usable, i.e. you can't enter // text. // This is the only way I can think of to detect them which is also how // every other editor I've seen deals with this issue. // Exclude Opera mobile and mini isUnsupported = /Opera Mobi|Opera Mini/i.test(USER_AGENT); if (/Android/i.test(USER_AGENT)) { isUnsupported = true; if (/Safari/.test(USER_AGENT)) { // Android browser 534+ supports content editable // This also matches Chrome which supports content editable too match = /Safari\/(\d+)/.exec(USER_AGENT); isUnsupported = (!match || !match[1] ? true : match[1] < 534); } } // The current version of Amazon Silk supports it, older versions didn't // As it uses webkit like Android, assume it's the same and started // working at versions >= 534 if (/ Silk\//i.test(USER_AGENT)) { match = /AppleWebKit\/(\d+)/.exec(USER_AGENT); isUnsupported = (!match || !match[1] ? true : match[1] < 534); } // iOS 5+ supports content editable if (ios) { // Block any version <= 4_x(_x) isUnsupported = /OS [0-4](_\d)+ like Mac/i.test(USER_AGENT); } // Firefox does support WYSIWYG on mobiles so override // any previous value if using FF if (/Firefox/i.test(USER_AGENT)) { isUnsupported = false; } if (/OneBrowser/i.test(USER_AGENT)) { isUnsupported = false; } // UCBrowser works but doesn't give a unique user agent if (navigator.vendor === 'UCWEB') { isUnsupported = false; } // IE and legacy edge are not supported any more if (ie || legacyEdge) { isUnsupported = true; } return !isUnsupported; }()); /** * Checks all emoticons are surrounded by whitespace and * replaces any that aren't with with their emoticon code. * * @param {HTMLElement} node * @param {rangeHelper} rangeHelper * @return {void} */ function checkWhitespace(node, rangeHelper) { var noneWsRegex = /[^\s\xA0\u2002\u2003\u2009]+/; var emoticons = node && find(node, 'img[data-sceditor-emoticon]'); if (!node || !emoticons.length) { return; } for (var i = 0; i < emoticons.length; i++) { var emoticon = emoticons[i]; var parent = emoticon.parentNode; var prev = emoticon.previousSibling; var next = emoticon.nextSibling; if ((!prev || !noneWsRegex.test(prev.nodeValue.slice(-1))) && (!next || !noneWsRegex.test((next.nodeValue || '')[0]))) { continue; } var range = rangeHelper.cloneSelected(); var rangeStart = -1; var rangeStartContainer = range.startContainer; var previousText = prev.nodeValue || ''; previousText += data(emoticon, 'sceditor-emoticon'); // If the cursor is after the removed emoticon, add // the length of the newly added text to it if (rangeStartContainer === next) { rangeStart = previousText.length + range.startOffset; } // If the cursor is set before the next node, set it to // the end of the new text node if (rangeStartContainer === node && node.childNodes[range.startOffset] === next) { rangeStart = previousText.length; } // If the cursor is set before the removed emoticon, // just keep it at that position if (rangeStartContainer === prev) { rangeStart = range.startOffset; } if (!next || next.nodeType !== TEXT_NODE) { next = parent.insertBefore( parent.ownerDocument.createTextNode(''), next ); } next.insertData(0, previousText); remove(prev); remove(emoticon); // Need to update the range starting position if it's been modified if (rangeStart > -1) { range.setStart(next, rangeStart); range.collapse(true); rangeHelper.selectRange(range); } } } /** * Replaces any emoticons inside the root node with images. * * emoticons should be an object where the key is the emoticon * code and the value is the HTML to replace it with. * * @param {HTMLElement} root * @param {Object<string, string>} emoticons * @param {boolean} emoticonsCompat * @return {void} */ function doReplaceEmoticons(root, emoticons, emoticonsCompat) { var doc = root.ownerDocument; var space = '(^|\\s|\xA0|\u2002|\u2003|\u2009|$)'; var emoticonCodes = []; var emoticonRegex = {}; // TODO: Make this tag configurable. if (parent(root, 'code')) { return; } each(emoticons, function (key) { emoticonRegex[key] = new RegExp(space + regex(key) + space); emoticonCodes.push(key); }); // Sort keys longest to shortest so that longer keys // take precedence (avoids bugs with shorter keys partially // matching longer ones) emoticonCodes.sort(function (a, b) { return b.length - a.length; }); (function convert(node) { node = node.firstChild; while (node) { // TODO: Make this tag configurable. if (node.nodeType === ELEMENT_NODE && !is(node, 'code')) { convert(node); } if (node.nodeType === TEXT_NODE) { for (var i = 0; i < emoticonCodes.length; i++) { var text = node.nodeValue; var key = emoticonCodes[i]; var index = emoticonsCompat ? text.search(emoticonRegex[key]) : text.indexOf(key); if (index > -1) { // When emoticonsCompat is enabled this will be the // position after any white space var startIndex = text.indexOf(key, index); var fragment = parseHTML(emoticons[key], doc); var after = text.substr(startIndex + key.length); fragment.appendChild(doc.createTextNode(after)); node.nodeValue = text.substr(0, startIndex); node.parentNode .insertBefore(fragment, node.nextSibling); } } } node = node.nextSibling; } }(root)); } var globalWin = window; var globalDoc = document; var IMAGE_MIME_REGEX = /^image\/(p?jpe?g|gif|png|bmp)$/i; /** * Wrap inlines that are in the root in paragraphs. * * @param {HTMLBodyElement} body * @param {Document} doc * @private */ function wrapInlines(body, doc) { var wrapper; traverse(body, function (node) { if (isInline(node, true)) { // Ignore text nodes unless they contain non-whitespace chars as // whitespace will be collapsed. // Ignore sceditor-ignore elements unless wrapping siblings // Should still wrap both if wrapping siblings. if (wrapper || node.nodeType === TEXT_NODE ? /\S/.test(node.nodeValue) : !is(node, '.sceditor-ignore')) { if (!wrapper) { wrapper = createElement('p', {}, doc); insertBefore(wrapper, node); } appendChild(wrapper, node); } } else { wrapper = null; } }, false, true); } /** * SCEditor - A lightweight WYSIWYG editor * * @param {HTMLTextAreaElement} original The textarea to be converted * @param {Object} userOptions * @class SCEditor * @name SCEditor */ function newSCEditor(original, userOptions) { /** * Alias of this * * @private */ var base = {}; /** * Editor format like BBCode or HTML */ var format; /** * The div which contains the editor and toolbar * * @type {HTMLDivElement} * @private */ var editorContainer; /** * Map of events handlers bound to this instance. * * @type {Object} * @private */ var eventHandlers = {}; /** * The editors toolbar * * @type {HTMLDivElement} * @private */ var toolbar; /** * The editors iframe which should be in design mode * * @type {HTMLIFrameElement} * @private */ var wysiwygEditor; /** * The editors window * * @type {Window} * @private */ var wysiwygWindow; /** * The WYSIWYG editors body element * * @type {HTMLBodyElement} * @private */ var wysiwygBody; /** * The WYSIWYG editors document * * @type {Document} * @private */ var wysiwygDocument; /** * The editors textarea for viewing source * * @type {HTMLTextAreaElement} * @private */ var sourceEditor; /** * The current dropdown * * @type {HTMLDivElement} * @private */ var dropdown; /** * If the user is currently composing text via IME * @type {boolean} */ var isComposing; /** * Timer for valueChanged key handler * @type {number} */ var valueChangedKeyUpTimer; /** * The editors locale * * @private */ var locale; /** * The editors rangeHelper instance * * @type {RangeHelper} * @private */ var rangeHelper; /** * An array of button state handlers * * @type {Array.<Object>} * @private */ var btnStateHandlers = []; /** * Plugin manager instance * * @type {PluginManager} * @private */ var pluginManager; /** * The current node containing the selection/caret * * @type {Node} * @private */ var currentNode; /** * The first block level parent of the current node * * @type {node} * @private */ var currentBlockNode; /** * The current node selection/caret * * @type {Object} * @private */ var currentSelection; /** * Used to make sure only 1 selection changed * check is called every 100ms. * * Helps improve performance as it is checked a lot. * * @type {boolean} * @private */ var isSelectionCheckPending; /** * If content is required (equivalent to the HTML5 required attribute) * * @type {boolean} * @private */ var isRequired; /** * The inline CSS style element. Will be undefined * until css() is called for the first time. * * @type {HTMLStyleElement} * @private */ var inlineCss; /** * Object containing a list of shortcut handlers * * @type {Object} * @private */ var shortcutHandlers = {}; /** * The min and max heights that autoExpand should stay within * * @type {Object} * @private */ var autoExpandBounds; /** * Cache of the current toolbar buttons * * @type {Object} * @private */ var toolbarButtons = {}; /** * Last scroll position before maximizing so * it can be restored when finished. * * @type {number} * @private */ var maximizeScrollPosition; /** * Stores the contents while a paste is taking place. * * Needed to support browsers that lack clipboard API support. * * @type {?DocumentFragment} * @private */ var pasteContentFragment; /** * All the emoticons from dropdown, more and hidden combined * and with the emoticons root set * * @type {!Object<string, string>} * @private */ var allEmoticons = {}; /** * Private functions * @private */ var init, replaceEmoticons, handleCommand, initEditor, initLocale, initToolBar, initOptions, initEvents, initResize, initEmoticons, handlePasteEvt, handleCutCopyEvt, handlePasteData, handleKeyDown, handleBackSpace, handleKeyPress, handleFormReset, handleMouseDown, handleComposition, handleEvent, handleDocumentClick, updateToolBar, updateActiveButtons, sourceEditorSelectedText, appendNewLine, checkSelectionChanged, checkNodeChanged, autofocus, emoticonsKeyPress, emoticonsCheckWhitespace, currentStyledBlockNode, triggerValueChanged, valueChangedBlur, valueChangedKeyUp, autoUpdate, autoExpand; /** * All the commands supported by the editor * @name commands */ base.commands = extendDeep({}, (userOptions.commands || defaultCmds)); /** * Options for this editor instance * @name opts */ var options = base.opts = extendDeep( {}, defaultOptions, userOptions ); // Don't deep extend emoticons (fixes #565) base.opts.emoticons = userOptions.emoticons || defaultOptions.emoticons; if (!Array.isArray(options.allowedIframeUrls)) { options.allowedIframeUrls = []; } options.allowedIframeUrls.push('https://www.youtube-nocookie.com/embed/'); /** * Creates the editor iframe and textarea * @private */ init = function () { original._sceditor = base; // Load locale if (options.locale && options.locale !== 'en') { initLocale(); } editorContainer = createElement('div', { className: 'sceditor-container' }); insertBefore(editorContainer, original); css(editorContainer, 'z-index', options.zIndex); isRequired = original.required; original.required = false; var FormatCtor = _formats[options.format]; format = FormatCtor ? FormatCtor() : {}; /* * Plugins should be initialized before the formatters since * they may wish to add or change formatting handlers and * since the bbcode format caches its handlers, * such changes must be done first. */ pluginManager = newPluginManager(base); (options.plugins || '').split(',').forEach(function (plugin) { pluginManager.register(plugin.trim()); }); if ('init' in format) { format.init(base); } if ('onCreate' in options) { options.onCreate(base); } // create the editor initEmoticons(); initToolBar(); initEditor(); initOptions(); initEvents(); // force into source mode if is a browser that can't handle // full editing if (!isWysiwygSupported) { base.toggleSourceMode(); } updateActiveButtons(); var loaded = function () { offEvent(globalWin, 'load', loaded); if (options.autofocus) { autofocus(!!options.autofocusEnd); } autoExpand(); appendNewLine(); // TODO: use editor doc and window? pluginManager.call('ready'); if ('onReady' in format) { format.onReady(base); } }; onEvent2(globalWin, 'load', loaded); if (globalDoc.readyState === 'complete') { loaded(); } }; /** * Init the locale variable with the specified locale if possible * @private * @return void */ initLocale = function () { var lang; locale = _locale[options.locale]; if (!locale) { lang = options.locale.split('-'); locale = _locale[lang[0]]; } // Locale DateTime format overrides any specified in the options if (locale && locale.dateFormat) { options.dateFormat = locale.dateFormat; } }; /** * Creates the editor iframe and textarea * @private */ initEditor = function () { sourceEditor = createElement('textarea'); wysiwygEditor = createElement('iframe', { frameborder: 0, allowfullscreen: true }); /* * This needs to be done right after they are created because, * for any reason, the user may not want the value to be tinkered * by any filters. */ if (options.startInSourceMode) { addClass(editorContainer, 'sourceMode'); hide(wysiwygEditor); } else { addClass(editorContainer, 'wysiwygMode'); hide(sourceEditor); } if (!options.spellcheck) { attr(editorContainer, 'spellcheck', 'false'); } if (globalWin.location.protocol === 'https:') { attr(wysiwygEditor, 'src', 'about:blank'); } // Add the editor to the container appendChild(editorContainer, wysiwygEditor); appendChild(editorContainer, sourceEditor); base.dimensions( options.width, options.height ); // Add ios to HTML so can apply CSS fix to only it var className = ios ? ' ios' : ''; wysiwygDocument = wysiwygEditor.contentDocument; wysiwygDocument.open(); wysiwygDocument.write(_tmpl('html', { attrs: ' class="' + className + '"', spellcheck: options.spellcheck ? '' : 'spellcheck="false"', charset: options.charset, style: options.style })); wysiwygDocument.close(); wysiwygBody = wysiwygDocument.body; wysiwygWindow = wysiwygEditor.contentWindow; base.readOnly(!!options.readOnly); // iframe overflow fix for iOS if (ios) { height(wysiwygBody, '100%'); onEvent2(wysiwygBody, 'touchend', base.focus); } var tabIndex = attr(original, 'tabindex'); attr(sourceEditor, 'tabindex', tabIndex); attr(wysiwygEditor, 'tabindex', tabIndex); rangeHelper = newRangeHelper(wysiwygWindow, null); // load any textarea value into the editor hide(original); base.val(original.value); var placeholder = options.placeholder || attr(original, 'placeholder'); if (placeholder) { sourceEditor.placeholder = placeholder; attr(wysiwygBody, 'placeholder', placeholder); } }; /** * Initialises options * @private */ initOptions = function () { // auto-update original textbox on blur if option set to true if (options.autoUpdate) { onEvent2(wysiwygBody, 'blur', autoUpdate); onEvent2(sourceEditor, 'blur', autoUpdate); } if (options.rtl === null) { options.rtl = css(sourceEditor, 'direction') === 'rtl'; } base.rtl(!!options.rtl); if (options.autoExpand) { // Need to update when images (or anything else) loads onEvent2(wysiwygBody, 'load', autoExpand, EVENT_CAPTURE); onEvent2(wysiwygBody, 'input keyup', autoExpand); } if (options.resizeEnabled) { initResize(); } attr(editorContainer, 'id', options.id); base.emoticons(options.emoticonsEnabled); }; /** * Initialises events * @private */ initEvents = function () { var form = original.form; var compositionEvents = 'compositionstart compositionend'; var eventsToForward = 'keydown keyup keypress focus blur contextmenu input'; var checkSelectionEvents = 'onselectionchange' in wysiwygDocument ? 'selectionchange' : 'keyup focus blur contextmenu mouseup touchend click'; onEvent2(globalDoc, 'click', handleDocumentClick); if (form) { onEvent2(form, 'reset', handleFormReset); onEvent2(form, 'submit', base.updateOriginal, EVENT_CAPTURE); } onEvent2(window, 'pagehide', base.updateOriginal); onEvent2(window, 'pageshow', handleFormReset); onEvent2(wysiwygBody, 'keypress', handleKeyPress); onEvent2(wysiwygBody, 'keydown', handleKeyDown); onEvent2(wysiwygBody, 'keydown', handleBackSpace); onEvent2(wysiwygBody, 'keyup', appendNewLine); onEvent2(wysiwygBody, 'blur', valueChangedBlur); onEvent2(wysiwygBody, 'keyup', valueChangedKeyUp); onEvent2(wysiwygBody, 'paste', handlePasteEvt); onEvent2(wysiwygBody, 'cut copy', handleCutCopyEvt); onEvent2(wysiwygBody, compositionEvents, handleComposition); onEvent2(wysiwygBody, checkSelectionEvents, checkSelectionChanged); onEvent2(wysiwygBody, eventsToForward, handleEvent); if (options.emoticonsCompat && globalWin.getSelection) { onEvent2(wysiwygBody, 'keyup', emoticonsCheckWhitespace); } onEvent2(wysiwygBody, 'blur', function () { if (!base.val()) { addClass(wysiwygBody, 'placeholder'); } }); onEvent2(wysiwygBody, 'focus', function () { removeClass(wysiwygBody, 'placeholder'); }); onEvent2(sourceEditor, 'blur', valueChangedBlur); onEvent2(sourceEditor, 'keyup', valueChangedKeyUp); onEvent2(sourceEditor, 'keydown', handleKeyDown); onEvent2(sourceEditor, compositionEvents, handleComposition); onEvent2(sourceEditor, eventsToForward, handleEvent); onEvent2(wysiwygDocument, 'mousedown', handleMouseDown); onEvent2(wysiwygDocument, checkSelectionEvents, checkSelectionChanged); onEvent2(wysiwygDocument, 'keyup', appendNewLine); onEvent2(editorContainer, 'selectionchanged', checkNodeChanged); onEvent2(editorContainer, 'selectionchanged', updateActiveButtons); // Custom events to forward onEvent2( editorContainer, 'selectionchanged valuechanged nodechanged pasteraw paste', handleEvent ); }; /** * Creates the toolbar and appends it to the container * @private */ initToolBar = function () { var group, commands = base.commands, exclude = (options.toolbarExclude || '').split(','), groups = options.toolbar.split('|'); toolbar = createElement('div', { className: 'sceditor-toolbar' }); each(groups, function (_, menuItems) { group = createElement('div', { className: 'sceditor-group' }); each(menuItems.split(','), function (_, commandName) { let command = commands[commandName]; // The commandName must be a valid command and not excluded if (!command || exclude.indexOf(commandName) > -1) { return; } let shortcut = command.shortcut; let icon = command.icon || ' '+commandName+' '; let button = '<button>' + icon + '</button>'; button = parseHTML(button).firstChild; button._sceTxtMode = !!command.txtExec; button._sceWysiwygMode = !!command.exec; toggleClass(button, 'disabled', !command.exec); onEvent2(button, 'click', function (e) { if (!hasClass(button, 'disabled')) { handleCommand(button, command); } updateActiveButtons(); e.preventDefault(); }); // Prevent editor losing focus when button clicked onEvent2(button, 'mousedown', function (e) { base.closeDropDown(); e.preventDefault(); }); if (command.tooltip) { attr(button, 'title', base._(command.tooltip) + (shortcut ? ' (' + shortcut + ')' : '') ); } if (shortcut) { base.addShortcut(shortcut, commandName); } if (command.state) { btnStateHandlers.push({ name: commandName, state: command.state }); // exec string commands can be passed to queryCommandState } else if (isString(command.exec)) { btnStateHandlers.push({ name: commandName, state: command.exec }); } appendChild(group, button); toolbarButtons[commandName] = button; }); // Exclude empty groups if (group.firstChild) { appendChild(toolbar, group); } }); // Append the toolbar to the toolbarContainer option if given appendChild(options.toolbarContainer || editorContainer, toolbar); }; /** * Creates the resizer. * @private */ initResize = function () { var minHeight, maxHeight, minWidth, maxWidth, mouseMoveFunc, mouseUpFunc, // Cover is used to cover the editor iframe so document // still gets mouse move events cover = createElement('div', { className: 'sceditor-resize-cover' }), moveEvents = 'touchmove mousemove', endEvents = 'touchcancel touchend mouseup', startX = 0, startY = 0, newX = 0, newY = 0, startWidth = 0, startHeight = 0, origWidth = width(editorContainer), origHeight = height(editorContainer), isDragging = false, rtl = base.rtl(); minHeight = options.resizeMinHeight || origHeight / 1.5; maxHeight = options.resizeMaxHeight || origHeight * 2.5; minWidth = options.resizeMinWidth || origWidth / 1.25; maxWidth = options.resizeMaxWidth || origWidth * 1.25; mouseMoveFunc = function (e) { // iOS uses window.event if (e.type === 'touchmove') { e = globalWin.event; newX = e.changedTouches[0].pageX; newY = e.changedTouches[0].pageY; } else { newX = e.pageX; newY = e.pageY; } var newHeight = startHeight + (newY - startY), newWidth = rtl ? startWidth - (newX - startX) : startWidth + (newX - startX); if (maxWidth > 0 && newWidth > maxWidth) { newWidth = maxWidth; } if (minWidth > 0 && newWidth < minWidth) { newWidth = minWidth; } if (!options.resizeWidth) { newWidth = false; } if (maxHeight > 0 && newHeight > maxHeight) { newHeight = maxHeight; } if (minHeight > 0 && newHeight < minHeight) { newHeight = minHeight; } if (!options.resizeHeight) { newHeight = false; } if (newWidth || newHeight) { base.dimensions(newWidth, newHeight); } e.preventDefault(); }; mouseUpFunc = function (e) { if (!isDragging) { return; } isDragging = false; hide(cover); removeClass(editorContainer, 'resizing'); offEvent(globalDoc, moveEvents, mouseMoveFunc); offEvent(globalDoc, endEvents, mouseUpFunc); e.preventDefault(); }; let grip = '<div class="sceditor-grip">' + options.gripIcon + '</div>'; grip = parseHTML(grip).firstChild; appendChild(editorContainer, grip); appendChild(editorContainer, cover); hide(cover); onEvent2(grip, 'touchstart mousedown', function (e) { // iOS uses window.event if (e.type === 'touchstart') { e = globalWin.event; startX = e.touches[0].pageX; startY = e.touches[0].pageY; } else { startX = e.pageX; startY = e.pageY; } startWidth = width(editorContainer); startHeight = height(editorContainer); isDragging = true; addClass(editorContainer, 'resizing'); show(cover); onEvent2(globalDoc, moveEvents, mouseMoveFunc); onEvent2(globalDoc, endEvents, mouseUpFunc); e.preventDefault(); }); }; /** * Prefixes and preloads the emoticon images * @private */ initEmoticons = function () { var emoticons = options.emoticons; if (emoticons) { allEmoticons = extend( {}, emoticons.more, emoticons.dropdown, emoticons.hidden ); } each(allEmoticons, function (key, url) { allEmoticons[key] = _tmpl('emoticon', { key: key, // Prefix emoticon root to emoticon urls url: url, tooltip: key }); }); }; /** * Autofocus the editor * @private */ autofocus = function (focusEnd) { var range, txtPos, node = wysiwygBody.firstChild; // Can't focus invisible elements if (!isVisible(editorContainer)) { return; } if (base.sourceMode()) { txtPos = focusEnd ? sourceEditor.value.length : 0; sourceEditor.setSelectionRange(txtPos, txtPos); return; } removeWhiteSpace(wysiwygBody); if (focusEnd) { if (!(node = wysiwygBody.lastChild)) { node = createElement('p', {}, wysiwygDocument); appendChild(wysiwygBody, node); } while (node.lastChild) { node = node.lastChild; // Should place the cursor before the last <br> if (is(node, 'br') && node.previousSibling) { node = node.previousSibling; } } } range = wysiwygDocument.createRange(); if (!canHaveChildren(node)) { range.setStartBefore(node); if (focusEnd) { range.setStartAfter(node); } } else { range.selectNodeContents(node); } range.collapse(!focusEnd); rangeHelper.selectRange(range); currentSelection = range; if (focusEnd) { wysiwygBody.scrollTop = wysiwygBody.scrollHeight; } base.focus(); }; /** * Gets if the editor is read only * * @since 1.3.5 * @function * @name readOnly * @return {boolean} */ /** * Sets if the editor is read only * * @param {boolean} readOnly * @since 1.3.5 * @function * @name readOnly^2 * @return {this} */ base.readOnly = function (readOnly) { if (typeof readOnly !== 'boolean') { return !sourceEditor.readonly; } wysiwygBody.contentEditable = !readOnly; sourceEditor.readonly = !readOnly; updateToolBar(readOnly); }; /** * Gets if the editor is in RTL mode * * @since 1.4.1 * @function * @name rtl * @return {boolean} */ /** * Sets if the editor is in RTL mode * * @param {boolean} rtl * @since 1.4.1 * @function * @name rtl^2 * @return {this} */ base.rtl = function (rtl) { if (typeof rtl !== 'boolean') { return attr(sourceEditor, 'dir') === 'rtl'; } let dir = rtl ? 'rtl' : 'ltr'; attr(wysiwygBody, 'dir', dir); attr(sourceEditor, 'dir', dir); attr(editorContainer, 'dir', dir); }; /** * Updates the toolbar to disable/enable the appropriate buttons * @private */ updateToolBar = function (disable) { var mode = base.inSourceMode() ? '_sceTxtMode' : '_sceWysiwygMode'; each(toolbarButtons, function (_, button) { toggleClass(button, 'disabled', disable || !button[mode]); }); }; /** * Gets the width of the editor in pixels * * @since 1.3.5 * @function * @name width * @return {number} */ /** * Sets the width of the editor * * @param {number} width Width in pixels * @since 1.3.5 * @function * @name width^2 * @return {this} */ /** * Sets the width of the editor * * The saveWidth specifies if to save the width. The stored width can be * used for things like restoring from maximized state. * * @param {number} width Width in pixels * @param {boolean} [saveWidth=true] If to store the width * @since 1.4.1 * @function * @name width^3 * @return {this} */ base.width = function (width$1, saveWidth) { if (!width$1 && width$1 !== 0) { return width(editorContainer); } base.dimensions(width$1, null, saveWidth); }; /** * Returns an object with the properties width and height * which are the width and height of the editor in px. * * @since 1.4.1 * @function * @name dimensions * @return {object} */ /** * <p>Sets the width and/or height of the editor.</p> * * <p>If width or height is not numeric it is ignored.</p> * * @param {number} width Width in px * @param {number} height Height in px * @since 1.4.1 * @function * @name dimensions^2 * @return {this} */ /** * <p>Sets the width and/or height of the editor.</p> * * <p>If width or height is not numeric it is ignored.</p> * * <p>The save argument specifies if to save the new sizes. * The saved sizes can be used for things like restoring from * maximized state. This should normally be left as true.</p> * * @param {number} width Width in px * @param {number} height Height in px * @param {boolean} [save=true] If to store the new sizes * @since 1.4.1 * @function * @name dimensions^3 * @return {this} */ base.dimensions = function (width$1, height$1, save) { // set undefined width/height to boolean false width$1 = (!width$1 && width$1 !== 0) ? false : width$1; height$1 = (!height$1 && height$1 !== 0) ? false : height$1; if (width$1 === false && height$1 === false) { return { width: base.width(), height: base.height() }; } if (width$1 !== false) { if (save !== false) { options.width = width$1; } width(editorContainer, width$1); } if (height$1 !== false) { if (save !== false) { options.height = height$1; } height(editorContainer, height$1); } }; /** * Gets the height of the editor in px * * @since 1.3.5 * @function * @name height * @return {number} */ /** * Sets the height of the editor * * @param {number} height Height in px * @since 1.3.5 * @function * @name height^2 * @return {this} */ /** * Sets the height of the editor * * The saveHeight specifies if to save the height. * * The stored height can be used for things like * restoring from maximized state. * * @param {number} height Height in px * @param {boolean} [saveHeight=true] If to store the height * @since 1.4.1 * @function * @name height^3 * @return {this} */ base.height = function (height$1, saveHeight) { if (!height$1 && height$1 !== 0) { return height(editorContainer); } base.dimensions(null, height$1, saveHeight); }; /** * Gets if the editor is maximised or not * * @since 1.4.1 * @function * @name maximize * @return {boolean} */ /** * Sets if the editor is maximised or not * * @param {boolean} maximize If to maximise the editor * @since 1.4.1 * @function * @name maximize^2 * @return {this} */ base.maximize = function (maximize) { var maximizeSize = 'sceditor-maximize'; if (isUndefined(maximize)) { return hasClass(editorContainer, maximizeSize); } maximize = !!maximize; if (maximize) { maximizeScrollPosition = globalWin.pageYOffset; } toggleClass(globalDoc.documentElement, maximizeSize, maximize); toggleClass(globalDoc.body, maximizeSize, maximize); toggleClass(editorContainer, maximizeSize, maximize); base.width(maximize ? '100%' : options.width, false); base.height(maximize ? '100%' : options.height, false); if (!maximize) { globalWin.scrollTo(0, maximizeScrollPosition); } autoExpand(); }; autoExpand = function () { if (options.autoExpand) { base.expandToContent(); } }; /** * Expands or shrinks the editors height to the height of it's content * * Unless ignoreMaxHeight is set to true it will not expand * higher than the maxHeight option. * * @since 1.3.5 * @param {boolean} [ignoreMaxHeight=false] * @function * @name expandToContent * @see #resizeToContent */ base.expandToContent = function (ignoreMaxHeight) { if (base.maximize()) { return; } if (!autoExpandBounds) { var height$1 = options.resizeMinHeight || options.height || height(original); autoExpandBounds = { min: height$1, max: options.resizeMaxHeight || (height$1 * 2) }; } var range = globalDoc.createRange(); range.selectNodeContents(wysiwygBody); var rect = range.getBoundingClientRect(); var current = wysiwygDocument.documentElement.clientHeight - 1; var spaceNeeded = rect.bottom - rect.top; var newHeight = base.height() + 1 + (spaceNeeded - current); if (!ignoreMaxHeight && autoExpandBounds.max !== -1) { newHeight = Math.min(newHeight, autoExpandBounds.max); } base.height(Math.ceil(Math.max(newHeight, autoExpandBounds.min))); }; /** * Destroys the editor, removing all elements and * event handlers. * * Leaves only the original textarea. * * @function * @name destroy */ base.destroy = function () { // Don't destroy if the editor has already been destroyed if (!pluginManager) { return; } pluginManager.destroy(); rangeHelper = null; pluginManager = null; if (dropdown) { remove(dropdown); } offEvent(globalDoc, 'click', handleDocumentClick); var form = original.form; if (form) { offEvent(form, 'reset', handleFormReset); offEvent(form, 'submit', base.updateOriginal, EVENT_CAPTURE); } offEvent(window, 'pagehide', base.updateOriginal); offEvent(window, 'pageshow', handleFormReset); remove(sourceEditor); remove(toolbar); remove(editorContainer); delete original._sceditor; show(original); original.required = isRequired; }; /** * Creates a menu item drop down * * @param {HTMLElement} menuItem The button to align the dropdown with * @param {string} name Used for styling the dropdown, will be * a class sceditor-name * @param {HTMLElement} content The HTML content of the dropdown * @function * @name createDropDown */ base.createDropDown = function (menuItem, name, content) { // first click for create second click for close var dropDownCss, dropDownClass = 'sceditor-' + name; base.closeDropDown(); // Only close the dropdown if it was already open if (dropdown && hasClass(dropdown, dropDownClass)) { return; } dropDownCss = extend({ top: menuItem.offsetTop, left: menuItem.offsetLeft, marginTop: menuItem.clientHeight }, options.dropDownCss); dropdown = createElement('div', { className: 'sceditor-dropdown ' + dropDownClass }); css(dropdown, dropDownCss); appendChild(dropdown, content); appendChild(editorContainer, dropdown); onEvent2(dropdown, 'click focusin', function (e) { // stop clicks within the dropdown from being handled e.stopPropagation(); }); if (dropdown) { var first = find(dropdown, 'input,textarea')[0]; if (first) { first.focus(); } } }; /** * Handles any document click and closes the dropdown if open * @private */ handleDocumentClick = function (e) { // ignore right clicks if (e.which !== 3 && dropdown && !e.defaultPrevented) { autoUpdate(); base.closeDropDown(); } }; /** * Handles the WYSIWYG editors cut & copy events * * By default browsers also copy inherited styling from the stylesheet and * browser default styling which is unnecessary. * * This will ignore inherited styles and only copy inline styling. * @private */ handleCutCopyEvt = function (e) { var range = rangeHelper.selectedRange(); if (range) { var container = createElement('div', {}, wysiwygDocument); var firstParent; // Copy all inline parent nodes up to the first block parent so can // copy inline styles var parent = range.commonAncestorContainer; while (parent && isInline(parent, true)) { if (parent.nodeType === ELEMENT_NODE) { var clone = parent.cloneNode(); if (container.firstChild) { appendChild(clone, container.firstChild); } appendChild(container, clone); firstParent = firstParent || clone; } parent = parent.parentNode; } appendChild(firstParent || container, range.cloneContents()); removeWhiteSpace(container); e.clipboardData.setData('text/html', container.innerHTML); // TODO: Refactor into private shared module with plaintext plugin // innerText adds two newlines after <p> tags so convert them to // <div> tags each(find(container, 'p'), function (_, elm) { convertElement(elm, 'div'); }); // Remove collapsed <br> tags as innerText converts them to newlines each(find(container, 'br'), function (_, elm) { if (!elm.nextSibling || !isInline(elm.nextSibling, true)) { remove(elm); } }); // range.toString() doesn't include newlines so can't use that. // selection.toString() seems to use the same method as innerText // but needs to be normalised first so using container.innerText appendChild(wysiwygBody, container); e.clipboardData.setData('text/plain', container.innerText); remove(container); if (e.type === 'cut') { range.deleteContents(); } e.preventDefault(); } }; /** * Handles the WYSIWYG editors paste event * @private */ handlePasteEvt = function (e) { var editable = wysiwygBody; var clipboard = e.clipboardData; var loadImage = function (file) { var reader = new FileReader(); reader.onload = function (e) { handlePasteData({ html: '<img src="' + e.target.result + '" />' }); }; reader.readAsDataURL(file); }; // Modern browsers with clipboard API - everything other than _very_ // old android web views and UC browser which doesn't support the // paste event at all. if (clipboard) { var data = {}; var types = clipboard.types; var items = clipboard.items; e.preventDefault(); for (var i = 0; i < types.length; i++) { // Word sometimes adds copied text as an image so if HTML // exists prefer that over images if (types.indexOf('text/html') < 0) { // Normalise image pasting to paste as a data-uri if (globalWin.FileReader && items && IMAGE_MIME_REGEX.test(items[i].type)) { return loadImage(clipboard.items[i].getAsFile()); } } data[types[i]] = clipboard.getData(types[i]); } // Call plugins here with file? data.text = data['text/plain']; data.html = data['text/html']; handlePasteData(data); // If contentsFragment exists then we are already waiting for a // previous paste so let the handler for that handle this one too } else if (!pasteContentFragment) { // Save the scroll position so can be restored // when contents is restored var scrollTop = editable.scrollTop; rangeHelper.saveRange(); pasteContentFragment = globalDoc.createDocumentFragment(); while (editable.firstChild) { appendChild(pasteContentFragment, editable.firstChild); } setTimeout(function () { var html = editable.innerHTML; editable.innerHTML = ''; appendChild(editable, pasteContentFragment); editable.scrollTop = scrollTop; pasteContentFragment = false; rangeHelper.restoreRange(); handlePasteData({ html: html }); }, 0); } }; /** * Gets the pasted data, filters it and then inserts it. * @param {Object} data * @private */ handlePasteData = function (data) { var pasteArea = createElement('div', {}, wysiwygDocument); pluginManager.call('pasteRaw', data); trigger(editorContainer, 'pasteraw', data); if (data.html) { // Sanitize again in case plugins modified the HTML pasteArea.innerHTML = data.html; // fix any invalid nesting fixNesting(pasteArea); } else { pasteArea.innerHTML = entities(data.text || ''); } let paste = { val: pasteArea.innerHTML }; if ('toSource' in format) { paste.val = format .toSource(paste.val, wysiwygDocument, currentNode, true); } pluginManager.call('paste', paste); trigger(editorContainer, 'paste', paste); if ('toHtml' in format) { paste.val = format .toHtml(paste.val, currentNode, true); } pluginManager.call('pasteHtml', paste); let parent = rangeHelper.getFirstBlockParent(); base.wysiwygEditorInsertHtml(paste.val, null, true); merge(parent); }; /** * Closes any currently open drop down * * @param {boolean} [focus=false] If to focus the editor * after closing the drop down * @function * @name closeDropDown */ base.closeDropDown = function (focus) { if (dropdown) { remove(dropdown); dropdown = null; } if (focus === true) { base.focus(); } }; /** * Inserts HTML into WYSIWYG editor. * * If endHtml is specified, any selected text will be placed * between html and endHtml. If there is no selected text html * and endHtml will just be concatenate together. * * @param {string} html * @param {string} [endHtml=null] * @param {boolean} [overrideCodeBlocking=false] If to insert the html * into code tags, by * default code tags only * support text. * @function * @name wysiwygEditorInsertHtml */ base.wysiwygEditorInsertHtml = function ( html, endHtml, overrideCodeBlocking ) { var marker, scrollTop, scrollTo, editorHeight = height(wysiwygEditor); base.focus(); // TODO: This code tag should be configurable and // should maybe convert the HTML into text instead // Don't apply to code elements if (!overrideCodeBlocking && closest(currentBlockNode, 'code')) { return; } // Insert the HTML and save the range so the editor can be scrolled // to the end of the selection. Also allows emoticons to be replaced // without affecting the cursor position rangeHelper.insertHTML(html, endHtml); rangeHelper.saveRange(); replaceEmoticons(); // Fix any invalid nesting, e.g. if a quote or other block is inserted // into a paragraph fixNesting(wysiwygBody); // Scroll the editor after the end of the selection marker = find(wysiwygBody, '#sceditor-end-marker')[0]; show(marker); scrollTop = wysiwygBody.scrollTop; scrollTo = (getOffset(marker).top + (marker.offsetHeight * 1.5)) - editorHeight; hide(marker); // Only scroll if marker isn't already visible if (scrollTo > scrollTop || scrollTo + editorHeight < scrollTop) { wysiwygBody.scrollTop = scrollTo; } triggerValueChanged(false); rangeHelper.restoreRange(); // Add a new line after the last block element // so can always add text after it appendNewLine(); }; /** * Like wysiwygEditorInsertHtml except it will convert any HTML * into text before inserting it. * * @param {string} text * @param {string} [endText=null] * @function * @name wysiwygEditorInsertText */ base.wysiwygEditorInsertText = function (text, endText) { base.wysiwygEditorInsertHtml( entities(text), entities(endText) ); }; /** * Inserts text into the WYSIWYG or source editor depending on which * mode the editor is in. * * If endText is specified any selected text will be placed between * text and endText. If no text is selected text and endText will * just be concatenate together. * * @param {string} text * @param {string} [endText=null] * @since 1.3.5 * @function * @name insertText */ base.insertText = function (text, endText) { if (base.inSourceMode()) { base.sourceEditorInsertText(text, endText); } else { base.wysiwygEditorInsertText(text, endText); } }; /** * Like wysiwygEditorInsertHtml but inserts text into the * source mode editor instead. * * If endText is specified any selected text will be placed between * text and endText. If no text is selected text and endText will * just be concatenate together. * * The cursor will be placed after the text param. If endText is * specified the cursor will be placed before endText, so passing:<br /> * * '[b]', '[/b]' * * Would cause the cursor to be placed:<br /> * * [b]Selected text|[/b] * * @param {string} text * @param {string} [endText=null] * @since 1.4.0 * @function * @name sourceEditorInsertText */ base.sourceEditorInsertText = function (text, endText) { var scrollTop, currentValue, startPos = sourceEditor.selectionStart, endPos = sourceEditor.selectionEnd; scrollTop = sourceEditor.scrollTop; sourceEditor.focus(); currentValue = sourceEditor.value; if (endText) { text += currentValue.substring(startPos, endPos) + endText; } sourceEditor.value = currentValue.substring(0, startPos) + text + currentValue.substring(endPos, currentValue.length); sourceEditor.selectionStart = (startPos + text.length) - (endText ? endText.length : 0); sourceEditor.selectionEnd = sourceEditor.selectionStart; sourceEditor.scrollTop = scrollTop; sourceEditor.focus(); triggerValueChanged(); }; /** * Gets the current instance of the rangeHelper class * for the editor. * * @return {RangeHelper} * @function * @name getRangeHelper */ base.getRangeHelper = function () { return rangeHelper; }; /** * Gets or sets the source editor caret position. * * @param {Object} [position] * @return {this} * @function * @since 1.4.5 * @name sourceEditorCaret */ base.sourceEditorCaret = function (position) { sourceEditor.focus(); if (position) { sourceEditor.selectionStart = position.start; sourceEditor.selectionEnd = position.end; return; } return { start: sourceEditor.selectionStart, end: sourceEditor.selectionEnd }; }; /** * Gets the value of the editor. * * If the editor is in WYSIWYG mode it will return the filtered * HTML from it (converted to BBCode if using the BBCode plugin). * It it's in Source Mode it will return the unfiltered contents * of the source editor (if using the BBCode plugin this will be * BBCode again). * * @since 1.3.5 * @return {string} * @function * @name val */ /** * Sets the value of the editor. * * If filter set true the val will be passed through the filter * function. If using the BBCode plugin it will pass the val to * the BBCode filter to convert any BBCode into HTML. * * @param {string} val * @param {boolean} [filter=true] * @return {this} * @since 1.3.5 * @function * @name val^2 */ base.val = function (val, filter) { if (!isString(val)) { return base.inSourceMode() ? base.getSourceEditorValue(false) : base.getWysiwygEditorValue(filter); } if (!base.inSourceMode()) { if (filter !== false && 'toHtml' in format) { val = format.toHtml(val); } base.setWysiwygEditorValue(val); } else { base.setSourceEditorValue(val); } }; /** * Inserts HTML/BBCode into the editor * * If end is supplied any selected text will be placed between * start and end. If there is no selected text start and end * will be concatenate together. * * If the filter param is set to true, the HTML/BBCode will be * passed through any plugin filters. If using the BBCode plugin * this will convert any BBCode into HTML. * * @param {string} start * @param {string} [end=null] * @param {boolean} [filter=true] * @param {boolean} [convertEmoticons=true] If to convert emoticons * @return {this} * @since 1.3.5 * @function * @name insert */ /** * Inserts HTML/BBCode into the editor * * If end is supplied any selected text will be placed between * start and end. If there is no selected text start and end * will be concatenate together. * * If the filter param is set to true, the HTML/BBCode will be * passed through any plugin filters. If using the BBCode plugin * this will convert any BBCode into HTML. * * If the allowMixed param is set to true, HTML any will not be * escaped * * @param {string} start * @param {string} [end=null] * @since 1.4.3 * @function * @name insert^2 */ // eslint-disable-next-line max-params base.insert = function ( start, end ) { if (base.inSourceMode()) { base.sourceEditorInsertText(start, end); return; } // Add the selection between start and end if (end) { let html = rangeHelper.selectedHtml(); start += html + end; } base.wysiwygEditorInsertHtml(start); }; /** * Gets the WYSIWYG editors HTML value. * * If using a plugin that filters the Ht Ml like the BBCode plugin * it will return the result of the filtering (BBCode) unless the * filter param is set to false. * * @param {boolean} [filter=true] * @return {string} * @function * @name getWysiwygEditorValue */ base.getWysiwygEditorValue = function (filter) { var html; // Create a tmp node to store contents so it can be modified // without affecting anything else. var tmp = createElement('div', {}, wysiwygDocument); var childNodes = wysiwygBody.childNodes; for (var i = 0; i < childNodes.length; i++) { appendChild(tmp, childNodes[i].cloneNode(true)); } appendChild(wysiwygBody, tmp); fixNesting(tmp); remove(tmp); html = tmp.innerHTML; // filter the HTML and DOM through any plugins if (filter !== false && format.hasOwnProperty('toSource')) { html = format.toSource(html, wysiwygDocument); } return html; }; /** * Gets the WYSIWYG editor's iFrame Body. * * @return {HTMLElement} * @function * @since 1.4.3 * @name getBody */ base.getBody = function () { return wysiwygBody; }; /** * Gets the WYSIWYG editors container area (whole iFrame). * * @return {HTMLElement} * @function * @since 1.4.3 * @name getContentAreaContainer */ base.getContentAreaContainer = function () { return wysiwygEditor; }; /** * Gets the text editor value * * If using a plugin that filters the text like the BBCode plugin * it will return the result of the filtering which is BBCode to * HTML so it will return HTML. If filter is set to false it will * just return the contents of the source editor (BBCode). * * @param {boolean} [filter=true] * @return {string} * @function * @since 1.4.0 * @name getSourceEditorValue */ base.getSourceEditorValue = function (filter) { var val = sourceEditor.value; if (filter !== false && 'toHtml' in format) { val = format.toHtml(val); } return val; }; /** * Sets the WYSIWYG HTML editor value. Should only be the HTML * contained within the body tags * * @param {string} value * @function * @name setWysiwygEditorValue */ base.setWysiwygEditorValue = function (value) { if (!value) { value = '<p><br /></p>'; } wysiwygBody.innerHTML = value; //replaceEmoticons(); appendNewLine(); triggerValueChanged(); autoExpand(); }; /** * Sets the text editor value * * @param {string} value * @function * @name setSourceEditorValue */ base.setSourceEditorValue = function (value) { sourceEditor.value = value; triggerValueChanged(); }; /** * Updates the textarea that the editor is replacing * with the value currently inside the editor. * * @function * @name updateOriginal * @since 1.4.0 */ base.updateOriginal = function () { original.value = base.val(); }; /** * Replaces any emoticon codes in the passed HTML * with their emoticon images * @private */ replaceEmoticons = function () { if (options.emoticonsEnabled) { doReplaceEmoticons(wysiwygBody, allEmoticons, options.emoticonsCompat); } }; /** * If the editor is in source code mode * * @return {boolean} * @function * @name inSourceMode */ base.inSourceMode = function () { return hasClass(editorContainer, 'sourceMode'); }; /** * Gets if the editor is in sourceMode * * @return boolean * @function * @name sourceMode */ /** * Sets if the editor is in sourceMode * * @param {boolean} enable * @return {this} * @function * @name sourceMode^2 */ base.sourceMode = function (enable) { var inSourceMode = base.inSourceMode(); if (typeof enable !== 'boolean') { return inSourceMode; } if ((inSourceMode && !enable) || (!inSourceMode && enable)) { base.toggleSourceMode(); } }; /** * Switches between the WYSIWYG and source modes * * @function * @name toggleSourceMode * @since 1.4.0 */ base.toggleSourceMode = function () { var isInSourceMode = base.inSourceMode(); // don't allow switching to WYSIWYG if doesn't support it if (!isWysiwygSupported && isInSourceMode) { return; } if (!isInSourceMode) { rangeHelper.saveRange(); rangeHelper.clear(); } currentSelection = null; base.blur(); toggle(sourceEditor); toggle(wysiwygEditor); if (isInSourceMode) { base.setWysiwygEditorValue(base.getSourceEditorValue()); } else { base.setSourceEditorValue(base.getWysiwygEditorValue()); } toggleClass(editorContainer, 'wysiwygMode', isInSourceMode); toggleClass(editorContainer, 'sourceMode', !isInSourceMode); updateToolBar(); updateActiveButtons(); }; /** * Gets the selected text of the source editor * @return {string} * @private */ sourceEditorSelectedText = function () { sourceEditor.focus(); return sourceEditor.value.substring( sourceEditor.selectionStart, sourceEditor.selectionEnd ); }; /** * Handles the passed command * @private */ handleCommand = function (caller, cmd) { // check if in text mode and handle text commands if (base.inSourceMode()) { if (cmd.txtExec) { if (Array.isArray(cmd.txtExec)) { base.sourceEditorInsertText(cmd.txtExec[0],cmd.txtExec[1]); } else { cmd.txtExec(base, caller, sourceEditorSelectedText()); } } } else if (cmd.exec) { if (isFunction(cmd.exec)) { cmd.exec(base, caller); } else { base.execCommand( cmd.exec, cmd.hasOwnProperty('execParam') ? cmd.execParam : null ); } } }; /** * Executes a command on the WYSIWYG editor * * @param {string} command * @param {String|Boolean} [param] * @function * @name execCommand */ base.execCommand = function (command, param) { var executed = false, commandObj = base.commands[command]; base.focus(); // TODO: make configurable // don't apply any commands to code elements if (closest(rangeHelper.parentNode(), 'code')) { return; } try { executed = wysiwygDocument.execCommand(command, false, param); } catch (ex) { } // show error if execution failed and an error message exists if (!executed && commandObj && commandObj.errorMessage) { /*global alert:false*/ alert(base._(commandObj.errorMessage)); } updateActiveButtons(); }; /** * Checks if the current selection has changed and triggers * the selectionchanged event if it has. * * In browsers other that don't support selectionchange event it will check * at most once every 100ms. * @private */ checkSelectionChanged = function () { function check() { // Don't create new selection if there isn't one (like after // blur event in iOS) if (wysiwygWindow.getSelection() && wysiwygWindow.getSelection().rangeCount <= 0) { currentSelection = null; // rangeHelper could be null if editor was destroyed // before the timeout had finished } else if (rangeHelper && !rangeHelper.compare(currentSelection)) { currentSelection = rangeHelper.cloneSelected(); // If the selection is in an inline wrap it in a block. // Fixes #331 if (currentSelection && currentSelection.collapsed) { var parent = currentSelection.startContainer; var offset = currentSelection.startOffset; // Handle if selection is placed before/after an element if (offset && parent.nodeType !== TEXT_NODE) { parent = parent.childNodes[offset]; } while (parent && parent.parentNode !== wysiwygBody) { parent = parent.parentNode; } if (parent && isInline(parent, true)) { rangeHelper.saveRange(); wrapInlines(wysiwygBody, wysiwygDocument); rangeHelper.restoreRange(); } } trigger(editorContainer, 'selectionchanged'); } isSelectionCheckPending = false; } if (isSelectionCheckPending) { return; } isSelectionCheckPending = true; // Don't need to limit checking if browser supports the Selection API if ('onselectionchange' in wysiwygDocument) { check(); } else { setTimeout(check, 100); } }; /** * Checks if the current node has changed and triggers * the nodechanged event if it has * @private */ checkNodeChanged = function () { // check if node has changed var oldNode, node = rangeHelper.parentNode(); if (currentNode !== node) { oldNode = currentNode; currentNode = node; currentBlockNode = rangeHelper.getFirstBlockParent(node); trigger(editorContainer, 'nodechanged', { oldNode: oldNode, newNode: currentNode }); } }; /** * Gets the current node that contains the selection/caret in * WYSIWYG mode. * * Will be null in sourceMode or if there is no selection. * * @return {?Node} * @function * @name currentNode */ base.currentNode = function () { return currentNode; }; /** * Gets the first block level node that contains the * selection/caret in WYSIWYG mode. * * Will be null in sourceMode or if there is no selection. * * @return {?Node} * @function * @name currentBlockNode * @since 1.4.4 */ base.currentBlockNode = function () { return currentBlockNode; }; /** * Updates if buttons are active or not * @private */ updateActiveButtons = function () { var firstBlock, parent; var doc = wysiwygDocument; var isSource = base.sourceMode(); if (base.readOnly()) { each(find(toolbar, 'active'), function (_, menuItem) { removeClass(menuItem, 'active'); }); return; } if (!isSource) { parent = rangeHelper.parentNode(); firstBlock = rangeHelper.getFirstBlockParent(parent); } for (var j = 0; j < btnStateHandlers.length; j++) { var state = 0; var btn = toolbarButtons[btnStateHandlers[j].name]; var stateFn = btnStateHandlers[j].state; var isDisabled = (isSource && !btn._sceTxtMode) || (!isSource && !btn._sceWysiwygMode); if (isString(stateFn)) { if (!isSource) { try { state = doc.queryCommandEnabled(stateFn) ? 0 : -1; // eslint-disable-next-line max-depth if (state > -1) { state = doc.queryCommandState(stateFn) ? 1 : 0; } } catch (ex) {} } } else if (!isDisabled) { state = stateFn(base, parent, firstBlock); } toggleClass(btn, 'disabled', isDisabled || state < 0); toggleClass(btn, 'active', state > 0); } }; /** * Handles any key press in the WYSIWYG editor * * @private */ handleKeyPress = function (e) { // FF bug: https://bugzilla.mozilla.org/show_bug.cgi?id=501496 if (e.defaultPrevented) { return; } base.closeDropDown(); // 13 = enter key if (e.which === 13) { var LIST_TAGS = 'li,ul,ol'; // "Fix" (cludge) for blocklevel elements being duplicated in some // browsers when enter is pressed instead of inserting a newline if (!is(currentBlockNode, LIST_TAGS) && hasStyling(currentBlockNode)) { var br = createElement('br', {}, wysiwygDocument); rangeHelper.insertNode(br); // Last <br> of a block will be collapsed so need to make sure // the <br> that was inserted isn't the last node of a block. var parent = br.parentNode; var lastChild = parent.lastChild; // Sometimes an empty next node is created after the <br> if (lastChild && lastChild.nodeType === TEXT_NODE && lastChild.nodeValue === '') { remove(lastChild); lastChild = parent.lastChild; } // If this is the last BR of a block and the previous // sibling is inline then will need an extra BR. This // is needed because the last BR of a block will be // collapsed. Fixes issue #248 if (!isInline(parent, true) && lastChild === br && isInline(br.previousSibling)) { rangeHelper.insertHTML('<br>'); } e.preventDefault(); } } }; /** * Makes sure that if there is a code or quote tag at the * end of the editor, that there is a new line after it. * * If there wasn't a new line at the end you wouldn't be able * to enter any text after a code/quote tag * @return {void} * @private */ appendNewLine = function () { // Check all nodes in reverse until either add a new line // or reach a non-empty textnode or BR at which point can // stop checking. rTraverse(wysiwygBody, function (node) { // Last block, add new line after if has styling if (node.nodeType === ELEMENT_NODE && !/inline/.test(css(node, 'display'))) { // Add line break after if has styling if (!is(node, '.sceditor-nlf') && hasStyling(node)) { var paragraph = createElement('p', {}, wysiwygDocument); paragraph.className = 'sceditor-nlf'; paragraph.innerHTML = '<br />'; appendChild(wysiwygBody, paragraph); return false; } } // Last non-empty text node or line break. // No need to add line-break after them if ((node.nodeType === 3 && !/^\s*$/.test(node.nodeValue)) || is(node, 'br')) { return false; } }); }; /** * Handles form reset event * @private */ handleFormReset = function () { base.val(original.value); }; /** * Handles any mousedown press in the WYSIWYG editor * @private */ handleMouseDown = function () { base.closeDropDown(); }; /** * Translates the string into the locale language. * * Replaces any {0}, {1}, {2}, ect. with the params provided. * * @param {string} str * @param {...String} args * @return {string} * @function * @name _ */ base._ = function () { var undef, args = arguments; if (locale && locale[args[0]]) { args[0] = locale[args[0]]; } return args[0].replace(/\{(\d+)\}/g, function (str, p1) { return args[p1 - 0 + 1] !== undef ? args[p1 - 0 + 1] : '{' + p1 + '}'; }); }; /** * Passes events on to any handlers * @private * @return void */ handleEvent = function (e) { if (pluginManager) { // Send event to all plugins pluginManager.call(e.type + 'Event', e, base); } // convert the event into a custom event to send var name = (e.target === sourceEditor ? 'scesrc' : 'scewys') + e.type; if (eventHandlers[name]) { eventHandlers[name].forEach(function (fn) { fn(base, e); // removed call, untested }); } }; /** * Binds a handler to the specified events * * This function only binds to a limited list of * supported events. * * The supported events are: * * * keyup * * keydown * * Keypress * * blur * * focus * * input * * nodechanged - When the current node containing * the selection changes in WYSIWYG mode * * contextmenu * * selectionchanged * * valuechanged * * * The events param should be a string containing the event(s) * to bind this handler to. If multiple, they should be separated * by spaces. * * @param {string} events * @param {Function} handler * @param {boolean} excludeWysiwyg If to exclude adding this handler * to the WYSIWYG editor * @param {boolean} excludeSource if to exclude adding this handler * to the source editor * @return {this} * @function * @name bind * @since 1.4.1 */ base.bind = function (events, handler, excludeWysiwyg, excludeSource) { events = events.split(' '); var i = events.length; while (i--) { if (isFunction(handler)) { var wysEvent = 'scewys' + events[i]; var srcEvent = 'scesrc' + events[i]; // Use custom events to allow passing the instance as the // 2nd argument. // Also allows unbinding without unbinding the editors own // event handlers. if (!excludeWysiwyg) { eventHandlers[wysEvent] = eventHandlers[wysEvent] || []; eventHandlers[wysEvent].push(handler); } if (!excludeSource) { eventHandlers[srcEvent] = eventHandlers[srcEvent] || []; eventHandlers[srcEvent].push(handler); } // Start sending value changed events if (events[i] === 'valuechanged') { triggerValueChanged.hasHandler = true; } } } }; /** * Unbinds an event that was bound using bind(). * * @param {string} events * @param {Function} handler * @param {boolean} excludeWysiwyg If to exclude unbinding this * handler from the WYSIWYG editor * @param {boolean} excludeSource if to exclude unbinding this * handler from the source editor * @return {this} * @function * @name unbind * @since 1.4.1 * @see bind */ base.unbind = function (events, handler, excludeWysiwyg, excludeSource) { events = events.split(' '); var i = events.length; while (i--) { if (isFunction(handler)) { if (!excludeWysiwyg) { arrayRemove( eventHandlers['scewys' + events[i]] || [], handler); } if (!excludeSource) { arrayRemove( eventHandlers['scesrc' + events[i]] || [], handler); } } } }; /** * Blurs the editors input area * * @return {this} * @function * @name blur * @since 1.3.6 */ /** * Adds a handler to the editors blur event * * @param {Function} handler * @param {boolean} excludeWysiwyg If to exclude adding this handler * to the WYSIWYG editor * @param {boolean} excludeSource if to exclude adding this handler * to the source editor * @return {this} * @function * @name blur^2 * @since 1.4.1 */ base.blur = function (handler, excludeWysiwyg, excludeSource) { if (isFunction(handler)) { base.bind('blur', handler, excludeWysiwyg, excludeSource); } else if (!base.sourceMode()) { wysiwygBody.blur(); } else { sourceEditor.blur(); } }; /** * Focuses the editors input area * * @return {this} * @function * @name focus */ /** * Adds an event handler to the focus event * * @param {Function} handler * @param {boolean} excludeWysiwyg If to exclude adding this handler * to the WYSIWYG editor * @param {boolean} excludeSource if to exclude adding this handler * to the source editor * @return {this} * @function * @name focus^2 * @since 1.4.1 */ base.focus = function (handler, excludeWysiwyg, excludeSource) { if (isFunction(handler)) { base.bind('focus', handler, excludeWysiwyg, excludeSource); } else if (!base.inSourceMode()) { // Already has focus so do nothing if (find(wysiwygDocument, ':focus').length) { return; } var container; var rng = rangeHelper.selectedRange(); // Fix FF bug where it shows the cursor in the wrong place // if the editor hasn't had focus before. See issue #393 if (!currentSelection) { autofocus(true); } // Check if cursor is set after a BR when the BR is the only // child of the parent. In Firefox this causes a line break // to occur when something is typed. See issue #321 if (rng && rng.endOffset === 1 && rng.collapsed) { container = rng.endContainer; if (container && container.childNodes.length === 1 && is(container.firstChild, 'br')) { rng.setStartBefore(container.firstChild); rng.collapse(true); rangeHelper.selectRange(rng); } } wysiwygWindow.focus(); wysiwygBody.focus(); } else { sourceEditor.focus(); } updateActiveButtons(); }; /** * Adds a handler to the key down event * * @param {Function} handler * @param {boolean} excludeWysiwyg If to exclude adding this handler * to the WYSIWYG editor * @param {boolean} excludeSource If to exclude adding this handler * to the source editor * @return {this} * @function * @name keyDown * @since 1.4.1 */ base.keyDown = function (handler, excludeWysiwyg, excludeSource) { return base.bind('keydown', handler, excludeWysiwyg, excludeSource); }; /** * Adds a handler to the key press event * * @param {Function} handler * @param {boolean} excludeWysiwyg If to exclude adding this handler * to the WYSIWYG editor * @param {boolean} excludeSource If to exclude adding this handler * to the source editor * @return {this} * @function * @name keyPress * @since 1.4.1 */ base.keyPress = function (handler, excludeWysiwyg, excludeSource) { return base .bind('keypress', handler, excludeWysiwyg, excludeSource); }; /** * Adds a handler to the key up event * * @param {Function} handler * @param {boolean} excludeWysiwyg If to exclude adding this handler * to the WYSIWYG editor * @param {boolean} excludeSource If to exclude adding this handler * to the source editor * @return {this} * @function * @name keyUp * @since 1.4.1 */ base.keyUp = function (handler, excludeWysiwyg, excludeSource) { return base.bind('keyup', handler, excludeWysiwyg, excludeSource); }; /** * Adds a handler to the node changed event. * * Happens whenever the node containing the selection/caret * changes in WYSIWYG mode. * * @param {Function} handler * @return {this} * @function * @name nodeChanged * @since 1.4.1 */ base.nodeChanged = function (handler) { return base.bind('nodechanged', handler, false, true); }; /** * Adds a handler to the selection changed event * * Happens whenever the selection changes in WYSIWYG mode. * * @param {Function} handler * @return {this} * @function * @name selectionChanged * @since 1.4.1 */ base.selectionChanged = function (handler) { return base.bind('selectionchanged', handler, false, true); }; /** * Adds a handler to the value changed event * * Happens whenever the current editor value changes. * * Whenever anything is inserted, the value changed or * 1.5 secs after text is typed. If a space is typed it will * cause the event to be triggered immediately instead of * after 1.5 seconds * * @param {Function} handler * @param {boolean} excludeWysiwyg If to exclude adding this handler * to the WYSIWYG editor * @param {boolean} excludeSource If to exclude adding this handler * to the source editor * @return {this} * @function * @name valueChanged * @since 1.4.5 */ base.valueChanged = function (handler, excludeWysiwyg, excludeSource) { return base .bind('valuechanged', handler, excludeWysiwyg, excludeSource); }; /** * Emoticons keypress handler * @private */ emoticonsKeyPress = function (e) { var replacedEmoticon, cachePos = 0, emoticonsCache = base.emoticonsCache, curChar = String.fromCharCode(e.which); // TODO: Make configurable if (closest(currentBlockNode, 'code')) { return; } if (!emoticonsCache) { emoticonsCache = []; each(allEmoticons, function (key, html) { emoticonsCache[cachePos++] = [key, html]; }); emoticonsCache.sort(function (a, b) { return a[0].length - b[0].length; }); base.emoticonsCache = emoticonsCache; base.longestEmoticonCode = emoticonsCache[emoticonsCache.length - 1][0].length; } replacedEmoticon = rangeHelper.replaceKeyword( base.emoticonsCache, true, true, base.longestEmoticonCode, options.emoticonsCompat, curChar ); if (replacedEmoticon) { if (!options.emoticonsCompat || !/^\s$/.test(curChar)) { e.preventDefault(); } } }; /** * Makes sure emoticons are surrounded by whitespace * @private */ emoticonsCheckWhitespace = function () { checkWhitespace(currentBlockNode, rangeHelper); }; /** * Gets if emoticons are currently enabled * @return {boolean} * @function * @name emoticons * @since 1.4.2 */ /** * Enables/disables emoticons * * @param {boolean} enable * @return {this} * @function * @name emoticons^2 * @since 1.4.2 */ base.emoticons = function (enable) { if (!enable && enable !== false) { return options.emoticonsEnabled; } options.emoticonsEnabled = enable; if (enable) { onEvent2(wysiwygBody, 'keypress', emoticonsKeyPress); if (!base.sourceMode()) { rangeHelper.saveRange(); replaceEmoticons(); triggerValueChanged(false); rangeHelper.restoreRange(); } } else { var emoticons = find(wysiwygBody, 'img[data-sceditor-emoticon]'); each(emoticons, function (_, img) { var text = data(img, 'sceditor-emoticon'); var textNode = wysiwygDocument.createTextNode(text); img.parentNode.replaceChild(textNode, img); }); offEvent(wysiwygBody, 'keypress', emoticonsKeyPress); triggerValueChanged(); } }; /** * Gets the current WYSIWYG editors inline CSS * * @return {string} * @function * @name css * @since 1.4.3 */ /** * Sets inline CSS for the WYSIWYG editor * * @param {string} css * @return {this} * @function * @name css^2 * @since 1.4.3 */ base.css = function (css) { if (!inlineCss) { inlineCss = createElement('style', { id: 'inline' }, wysiwygDocument); appendChild(wysiwygDocument.head, inlineCss); } if (!isString(css)) { return inlineCss.styleSheet ? inlineCss.styleSheet.cssText : inlineCss.innerHTML; } if (inlineCss.styleSheet) { inlineCss.styleSheet.cssText = css; } else { inlineCss.innerHTML = css; } }; /** * Handles the keydown event, used for shortcuts * @private */ handleKeyDown = function (e) { var shortcut = [], SHIFT_KEYS = { '`': '~', '1': '!', '2': '@', '3': '#', '4': '$', '5': '%', '6': '^', '7': '&', '8': '*', '9': '(', '0': ')', '-': '_', '=': '+', ';': ': ', '\'': '"', ',': '<', '.': '>', '/': '?', '\\': '|', '[': '{', ']': '}' }, SPECIAL_KEYS = { 8: 'backspace', 9: 'tab', 13: 'enter', 19: 'pause', 20: 'capslock', 27: 'esc', 32: 'space', 33: 'pageup', 34: 'pagedown', 35: 'end', 36: 'home', 37: 'left', 38: 'up', 39: 'right', 40: 'down', 45: 'insert', 46: 'del', 91: 'win', 92: 'win', 93: 'select', 96: '0', 97: '1', 98: '2', 99: '3', 100: '4', 101: '5', 102: '6', 103: '7', 104: '8', 105: '9', 106: '*', 107: '+', 109: '-', 110: '.', 111: '/', 112: 'f1', 113: 'f2', 114: 'f3', 115: 'f4', 116: 'f5', 117: 'f6', 118: 'f7', 119: 'f8', 120: 'f9', 121: 'f10', 122: 'f11', 123: 'f12', 144: 'numlock', 145: 'scrolllock', 186: ';', 187: '=', 188: ',', 189: '-', 190: '.', 191: '/', 192: '`', 219: '[', 220: '\\', 221: ']', 222: '\'' }, NUMPAD_SHIFT_KEYS = { 109: '-', 110: 'del', 111: '/', 96: '0', 97: '1', 98: '2', 99: '3', 100: '4', 101: '5', 102: '6', 103: '7', 104: '8', 105: '9' }, which = e.which, character = SPECIAL_KEYS[which] || String.fromCharCode(which).toLowerCase(); if (e.ctrlKey || e.metaKey) { shortcut.push('ctrl'); } if (e.altKey) { shortcut.push('alt'); } if (e.shiftKey) { shortcut.push('shift'); if (NUMPAD_SHIFT_KEYS[which]) { character = NUMPAD_SHIFT_KEYS[which]; } else if (SHIFT_KEYS[character]) { character = SHIFT_KEYS[character]; } } // Shift is 16, ctrl is 17 and alt is 18 if (character && (which < 16 || which > 18)) { shortcut.push(character); } shortcut = shortcut.join('+'); if (shortcutHandlers[shortcut] && shortcutHandlers[shortcut](base) === false) { e.stopPropagation(); e.preventDefault(); } }; /** * Adds a shortcut handler to the editor * @param {string} shortcut * @param {String|Function} cmd * @return {sceditor} */ base.addShortcut = function (shortcut, cmd) { shortcut = shortcut.toLowerCase(); if (isString(cmd)) { shortcutHandlers[shortcut] = function () { handleCommand(toolbarButtons[cmd], base.commands[cmd]); return false; }; } else { shortcutHandlers[shortcut] = cmd; } return true; }; /** * Removes a shortcut handler * @param {string} shortcut * @return {sceditor} */ base.removeShortcut = function (shortcut) { delete shortcutHandlers[shortcut.toLowerCase()]; }; /** * Handles the backspace key press * * Will remove block styling like quotes/code ect if at the start. * @private */ handleBackSpace = function (e) { var node, offset, range, parent; // 8 is the backspace key if (options.disableBlockRemove || e.which !== 8 || !(range = rangeHelper.selectedRange())) { return; } node = range.startContainer; offset = range.startOffset; if (offset !== 0 || !(parent = currentStyledBlockNode()) || is(parent, 'body')) { return; } while (node !== parent) { while (node.previousSibling) { node = node.previousSibling; // Everything but empty text nodes before the cursor // should prevent the style from being removed if (node.nodeType !== TEXT_NODE || node.nodeValue) { return; } } if (!(node = node.parentNode)) { return; } } // The backspace was pressed at the start of // the container so clear the style base.clearBlockFormatting(parent); e.preventDefault(); }; /** * Gets the first styled block node that contains the cursor * @return {HTMLElement} */ currentStyledBlockNode = function () { var block = currentBlockNode; while (!hasStyling(block) || isInline(block, true)) { if (!(block = block.parentNode) || is(block, 'body')) { return; } } return block; }; /** * Clears the formatting of the passed block element. * * If block is false, if will clear the styling of the first * block level element that contains the cursor. * @param {HTMLElement} block * @since 1.4.4 */ base.clearBlockFormatting = function (block) { block = block || currentStyledBlockNode(); if (!block || is(block, 'body')) { return; } rangeHelper.saveRange(); block.className = ''; attr(block, 'style', ''); if (!is(block, 'p,div,td')) { convertElement(block, 'p'); } rangeHelper.restoreRange(); }; /** * Triggers the valueChanged signal if there is * a plugin that handles it. * * If rangeHelper.saveRange() has already been * called, then saveRange should be set to false * to prevent the range being saved twice. * * @since 1.4.5 * @param {boolean} saveRange If to call rangeHelper.saveRange(). * @private */ triggerValueChanged = function (saveRange) { if (!pluginManager || (!pluginManager.hasHandler('valuechangedEvent') && !triggerValueChanged.hasHandler)) { return; } var currentHtml, sourceMode = base.sourceMode(), hasSelection = !sourceMode && rangeHelper.hasSelection(); // Composition end isn't guaranteed to fire but must have // ended when triggerValueChanged() is called so reset it isComposing = false; // Don't need to save the range if sceditor-start-marker // is present as the range is already saved saveRange = saveRange !== false && !wysiwygDocument.getElementById('sceditor-start-marker'); // Clear any current timeout as it's now been triggered if (valueChangedKeyUpTimer) { clearTimeout(valueChangedKeyUpTimer); valueChangedKeyUpTimer = false; } if (hasSelection && saveRange) { rangeHelper.saveRange(); } currentHtml = sourceMode ? sourceEditor.value : wysiwygBody.innerHTML; // Only trigger if something has actually changed. if (currentHtml !== triggerValueChanged.lastVal) { triggerValueChanged.lastVal = currentHtml; trigger(editorContainer, 'valuechanged', { rawValue: sourceMode ? base.val() : currentHtml }); } if (hasSelection && saveRange) { rangeHelper.removeMarkers(); } }; /** * Should be called whenever there is a blur event * @private */ valueChangedBlur = function () { if (valueChangedKeyUpTimer) { triggerValueChanged(); } }; /** * Should be called whenever there is a keypress event * @param {Event} e The keypress event * @private */ valueChangedKeyUp = function (e) { var which = e.which, lastChar = valueChangedKeyUp.lastChar, lastWasSpace = (lastChar === 13 || lastChar === 32), lastWasDelete = (lastChar === 8 || lastChar === 46); valueChangedKeyUp.lastChar = which; if (isComposing) { return; } // 13 = return & 32 = space if (which === 13 || which === 32) { if (!lastWasSpace) { triggerValueChanged(); } else { valueChangedKeyUp.triggerNext = true; } // 8 = backspace & 46 = del } else if (which === 8 || which === 46) { if (!lastWasDelete) { triggerValueChanged(); } else { valueChangedKeyUp.triggerNext = true; } } else if (valueChangedKeyUp.triggerNext) { triggerValueChanged(); valueChangedKeyUp.triggerNext = false; } // Clear the previous timeout and set a new one. clearTimeout(valueChangedKeyUpTimer); // Trigger the event 1.5s after the last keypress if space // isn't pressed. This might need to be lowered, will need // to look into what the slowest average Chars Per Min is. valueChangedKeyUpTimer = setTimeout(function () { if (!isComposing) { triggerValueChanged(); } }, 1500); }; handleComposition = function (e) { isComposing = /start/i.test(e.type); if (!isComposing) { triggerValueChanged(); } }; autoUpdate = function () { base.updateOriginal(); }; // run the initializer init(); base.allEmoticons = allEmoticons; return base; } /** * Map containing the loaded SCEditor locales * @type {Object} * @name locale * @memberOf sceditor */ var _locale = {}; var _formats = {}; /** * SCEditor * http://www.sceditor.com/ * * Copyright (C) 2017, Sam Clarke (samclarke.com) * * SCEditor is licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * * @fileoverview SCEditor - A lightweight WYSIWYG BBCode and HTML editor * @author Sam Clarke */ function getTextarea(textarea) { if( typeof(textarea) === 'string' ) textarea = document.querySelector(textarea); return textarea; } window.sceditor = { commands: defaultCmds, defaultOptions: defaultOptions, ios: ios, isWysiwygSupported: isWysiwygSupported, regexEscape: regex, escapeEntities: entities, escapeUriScheme: uriScheme, dom: { css: css, attr: attr, removeAttr: removeAttr, is: is, closest: closest, width: width, height: height, traverse: traverse, rTraverse: rTraverse, parseHTML: parseHTML, hasStyling: hasStyling, convertElement: convertElement, blockLevelList: blockLevelList, canHaveChildren: canHaveChildren, isInline: isInline, copyCSS: copyCSS, fixNesting: fixNesting, findCommonAncestor: findCommonAncestor, getSibling: getSibling, removeWhiteSpace: removeWhiteSpace, extractContents: extractContents, getOffset: getOffset, getStyle: getStyle, hasStyle: hasStyle }, locale: _locale, utils: { each: each, isEmptyObject: isEmptyObject, extend: extend, extendDeep: extendDeep, }, //plugins: PluginManager.plugins, plugins: plugins, formats: _formats, create: function (textarea, options) { textarea = getTextarea(textarea); options = options || {}; // Don't allow the editor to be initialised // on it's own source editor if (parent(textarea, '.sceditor-container')) { return; } if (options.runWithoutWysiwygSupport || isWysiwygSupported) { /*eslint no-new: off*/ return newSCEditor(textarea, options); } }, instance: function(textarea) { textarea = getTextarea(textarea); return textarea._sceditor; } }; }());