?
+// var headers = info.selHeaders;
+// if (!table.$.tHead && ( headers == 'row' || headers == 'both' )) {
+// var thead = new CKEDITOR.dom.element(table.$.createTHead());
+// tbody = table.getElementsByTag('tbody').getItem(0);
+// var theRow = tbody.getElementsByTag('tr').getItem(0);
+
+// // Change TD to TH:
+// for (i = 0; i < theRow.getChildCount(); i++) {
+// var th = theRow.getChild(i);
+// // Skip bookmark nodes. (#6155)
+// if (th.type == CKEDITOR.NODE_ELEMENT && !th.data('cke-bookmark')) {
+// th.renameNode('th');
+// th.setAttribute('scope', 'col');
+// }
+// }
+// thead.append(theRow.remove());
+// }
+
+// if (table.$.tHead !== null && !( headers == 'row' || headers == 'both' )) {
+// // Move the row out of the THead and put it in the TBody:
+// thead = new CKEDITOR.dom.element(table.$.tHead);
+// tbody = table.getElementsByTag('tbody').getItem(0);
+
+// var previousFirstRow = tbody.getFirst();
+// while (thead.getChildCount() > 0) {
+// theRow = thead.getFirst();
+// for (i = 0; i < theRow.getChildCount(); i++) {
+// var newCell = theRow.getChild(i);
+// if (newCell.type == CKEDITOR.NODE_ELEMENT) {
+// newCell.renameNode('td');
+// newCell.removeAttribute('scope');
+// }
+// }
+// theRow.insertBefore(previousFirstRow);
+// }
+// thead.remove();
+// }
+
+// // Should we make all first cells in a row TH?
+// if (!this.hasColumnHeaders && ( headers == 'col' || headers == 'both' )) {
+// for (row = 0; row < table.$.rows.length; row++) {
+// newCell = new CKEDITOR.dom.element(table.$.rows[row].cells[0]);
+// newCell.renameNode('th');
+// newCell.setAttribute('scope', 'row');
+// }
+// }
+
+// // Should we make all first TH-cells in a row make TD? If 'yes' we do it the other way round :-)
+// if (( this.hasColumnHeaders ) && !( headers == 'col' || headers == 'both' )) {
+// for (i = 0; i < table.$.rows.length; i++) {
+// row = new CKEDITOR.dom.element(table.$.rows[i]);
+// if (row.getParent().getName() == 'tbody') {
+// newCell = new CKEDITOR.dom.element(row.$.cells[0]);
+// newCell.renameNode('td');
+// newCell.removeAttribute('scope');
+// }
+// }
+// }
+
+// // Set the width and height.
+// info.txtHeight ? table.setStyle('height', info.txtHeight) : table.removeStyle('height');
+// info.txtWidth ? table.setStyle('width', info.txtWidth) : table.removeStyle('width');
+
+// if (!table.getAttribute('style'))
+// table.removeAttribute('style');
+// }
+
+// // Insert the table element if we're creating one.
+// if (!this._.selectedElement) {
+// wrapper.append(table);
+// // Override the default cursor position after insertElement to place
+// // cursor inside the first cell (#7959), IE needs a while.
+// setTimeout(function () {
+// var firstCell = new CKEDITOR.dom.element(table.$.rows[0].cells[0]);
+// var range = editor.createRange();
+// range.moveToPosition(firstCell, CKEDITOR.POSITION_AFTER_START);
+// range.select();
+// }, 0);
+// }
+// // Properly restore the selection, (#4822) but don't break
+// // because of this, e.g. updated table caption.
+// else {
+// try {
+// selection.selectBookmarks(bms);
+// } catch (er) {
+// }
+// }
+// };
+
+// // PUBLIC
+// enableRichEditor = function ($el) {
+// var $body = $('body'),
+// elementId = $el.attr('id'),
+// editorConfig;
+
+// var dataAttrConfiguration = {
+// 'height': $el.attr('height') || 300,
+// 'filebrowserBrowseUrl': $body.data('file-browse-url'),
+// 'filebrowserImageBrowseUrl': $body.data('image-browse-url'),
+// 'filebrowserImageBrowseLinkUrl': $body.data('image-browse-url'),
+// 'enterMode': $el.attr('noparagraphs') ? CKEDITOR.ENTER_BR : CKEDITOR.ENTER_P,
+// 'shiftEnterMode': $el.attr('noparagraphs') ? CKEDITOR.ENTER_P : CKEDITOR.ENTER_BR,
+// }
+
+// editorConfig = (_ckEditorConfigs.hasOwnProperty($el.data('editor-mode'))) ? _ckEditorConfigs[$el.data('editor-mode')] : _ckEditorConfigs['kumaDefault'];
+
+// // Load the data from data attrs, but don't override the ones in the config if they're set.
+// for (key in dataAttrConfiguration) {
+// if (editorConfig[key] === undefined) {
+// editorConfig[key] = dataAttrConfiguration[key];
+// }
+// }
+
+// // Place CK
+// CKEDITOR.replace(elementId, editorConfig);
+// CKEDITOR.on('dialogDefinition', function (e) {
+// var dialogDefinition = e.data.definition;
+
+// if (e.data.name === 'table') {
+// editor = e.editor;
+// e.data.definition.onOk = _customOkFunctionForTables;
+// }
+// if (e.data.name === 'link') {
+// editor = e.editor;
+// var info = dialogDefinition.getContents('info');
+// var url = info.get('url');
+
+// url.onKeyUp = function () {
+// this.allowOnChange = !1;
+// var a = this.getDialog().getContentElement("info", "protocol"), b = this.getValue(), k = /^((javascript:)|[#\/\.\?])/i, c = /^(http|https|ftp|news):\/\/(?=.)/i.exec(b);
+// c ? (this.setValue(b.substr(c[0].length)), a.setValue(c[0].toLowerCase())) : k.test(b) && a.setValue("");
+
+// var nodeTranslationPtrn = new RegExp(/\[(([a-z_A-Z]+):)?NT([0-9]+)\]/g);
+// while (match = nodeTranslationPtrn.exec(b)) {
+// // Node translation found, so set protocol to other.
+// if (match[3]) {
+// a.setValue("");
+// }
+// }
+
+// var mediaPtrn = new RegExp(/\[(([a-z_A-Z]+):)?M([0-9]+)\]/g);
+// while (match = mediaPtrn.exec(b)) {
+// // Media found, so set protocol to other.
+// if (match[3]) {
+// a.setValue("");
+// }
+// }
+
+// this.allowOnChange = !0
+// };
+
+// }
+// });
+
+// CKEDITOR.on('instanceReady', function (e) {
+// var editor = e.editor;
+
+// if (editor.element.hasAttribute('maxlength') && !(editor.config).hasOwnProperty('wordcount')) {
+// var maxLength = editor.element.getAttribute('maxlength');
+// var newConfig = editor.config;
+
+// newConfig.extraPlugins = 'wordcount';
+// newConfig.wordcount = {
+// showParagraphs: false,
+// showWordCount: false,
+// showCharCount: true,
+// countSpacesAsChars: true,
+// countHTML: false,
+// maxCharCount: parseInt(maxLength, 10),
+// };
+
+// CKEDITOR.instances[editor.name].destroy();
+// CKEDITOR.replace(editor.name, newConfig);
+// }
+// });
+
+
+// $el.addClass('js-rich-editor--enabled');
+
+// // Behat tests
+// // Add id on iframe so that behat tests can interact
+// var checkExist = setInterval(function () {
+
+// if ($('#cke_' + elementId + ' iframe').length === 1) {
+// var parts = elementId.split("_"),
+// name = parts[parts.length - 1];
+
+// $('#cke_' + elementId + ' iframe').attr('id', 'cke_iframe_' + name);
+
+// clearInterval(checkExist);
+// }
+// }, 250);
+// };
+
+// // Destroy All
+// destroyAllRichEditors = function () {
+// for (instance in CKEDITOR.instances) {
+// var $el = $('#' + CKEDITOR.instances[instance].name);
+// var ckEditorInstance = CKEDITOR.instances[instance];
+
+// if (ckEditorInstance.instanceReady && $el.hasClass('js-rich-editor')) {
+// $el.removeClass('js-rich-editor--enabled');
+
+// ckEditorInstance.updateElement();
+// ckEditorInstance.destroy(true);
+// }
+// ;
+// }
+// };
+
+// // Destroy Specific
+// destroySpecificRichEditor = function ($el) {
+// var elementId = $el.attr('id'),
+// editor = CKEDITOR.instances[elementId];
+
+// if (editor) {
+// editor.updateElement();
+// editor.destroy(true);
+// }
+// };
+
+
+// // Returns
+// return {
+// init: init,
+// reInit: reInit,
+// enableRichEditor: enableRichEditor,
+// destroyAllRichEditors: destroyAllRichEditors,
+// destroySpecificRichEditor: destroySpecificRichEditor
+// };
+
+// })(window);
diff --git a/src/Kunstmaan/AdminBundle/Resources/ui/js/_url-chooser.js b/src/Kunstmaan/AdminBundle/Resources/ui/js/_url-chooser.js
index 4c7529265b..90a97ae729 100644
--- a/src/Kunstmaan/AdminBundle/Resources/ui/js/_url-chooser.js
+++ b/src/Kunstmaan/AdminBundle/Resources/ui/js/_url-chooser.js
@@ -128,13 +128,8 @@ kunstmaanbundles.urlChooser = (function (window, undefined) {
parent.$('#' + parentModalId).modal('hide');
} else {
- var funcNum = getUrlParam('CKEditorFuncNum');
-
- // Set val
- window.opener.CKEDITOR.tools.callFunction(funcNum, itemUrl);
-
- // Close window
- window.close();
+ // Send URL back to parent window
+ window.opener.postMessage({ itemUrl: itemUrl }, window.location.origin);
}
};
@@ -169,13 +164,8 @@ kunstmaanbundles.urlChooser = (function (window, undefined) {
parent.$('#' + parentModalId).modal('hide');
} else {
- var funcNum = getUrlParam('CKEditorFuncNum');
-
- // Set val
- window.opener.CKEDITOR.tools.callFunction(funcNum, itemUrl);
-
- // Close window
- window.close();
+ // Send URL back to parent window
+ window.opener.postMessage({ itemUrl: itemUrl }, window.location.origin);
}
};
diff --git a/src/Kunstmaan/AdminBundle/Resources/ui/js/app.js b/src/Kunstmaan/AdminBundle/Resources/ui/js/app.js
index 5a1ae2908e..45af29800e 100644
--- a/src/Kunstmaan/AdminBundle/Resources/ui/js/app.js
+++ b/src/Kunstmaan/AdminBundle/Resources/ui/js/app.js
@@ -47,7 +47,7 @@ kunstmaanbundles.app = (function($, window, undefined) {
initModules = function() {
// Init new rich editors
- kunstmaanbundles.richEditor.init();
+ // kunstmaanbundles.richEditor.init();
// Init new nested forms
kunstmaanbundles.nestedForm.init();
// Init new selects.
diff --git a/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/PagePartChooser/index.js b/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/PagePartChooser/index.js
index a33c2abe9e..de57cad56d 100644
--- a/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/PagePartChooser/index.js
+++ b/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/PagePartChooser/index.js
@@ -1,12 +1,10 @@
import { SELECTORS } from './config';
import { initSearch } from './pagepart-search/initSearch';
-export default class PagePartChooser {
- static init(container = window.document) {
- const pagePartChoosers = [...container.querySelectorAll(SELECTORS.PP_CHOOSER)];
+export const initPagePartChoosers = ({ container = window.document } = {}) => {
+ const pagePartChoosers = [...container.querySelectorAll(SELECTORS.PP_CHOOSER)];
- pagePartChoosers.forEach((pagePartChooser) => {
- initSearch(pagePartChooser);
- });
- }
-}
+ pagePartChoosers.forEach((pagePartChooser) => {
+ initSearch(pagePartChooser);
+ });
+};
diff --git a/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/WysiwygEditor/Plugins/Link.js b/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/WysiwygEditor/Plugins/Link.js
new file mode 100644
index 0000000000..03a5f01a36
--- /dev/null
+++ b/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/WysiwygEditor/Plugins/Link.js
@@ -0,0 +1,110 @@
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import LinkUI from '@ckeditor/ckeditor5-link/src/linkui';
+
+const POPUP_OPTIONS = `location=no,titlebar=no,menubar=no,toolbar=no,dependent=yes,
+ minimizable=no,modal=yes,alwaysRaised=yes,resizable=yes,scrollbars=yes`;
+
+export default class Link extends Plugin {
+ init() {
+ const { editor } = this;
+ const linkUI = editor.plugins.get(LinkUI);
+
+ this.fileBrowseUrl = document.body && document.body.getAttribute('data-file-browse-url');
+ this.linkFormView = linkUI.formView;
+ this.button = this.createButton();
+
+ if (this.fileBrowseUrl) {
+ this.linkFormView.once('render', () => {
+ // Render button's tamplate.
+ this.button.render();
+
+ // Register the button under the link form view, it will handle its destruction.
+ this.linkFormView.registerChild(this.button);
+
+ // Create wrapper div for styling purposes
+ const newDiv = document.createElement('div');
+ newDiv.classList.add('ck', 'ck-list');
+ newDiv.appendChild(this.button.element);
+ // Inject the element into DOM.
+ this.linkFormView.element.insertBefore(newDiv, this.linkFormView.saveButtonView.element);
+ });
+ }
+ }
+
+ createButton() {
+ const { editor } = this;
+ const button = new ButtonView(this.locale);
+ const linkCommand = editor.commands.get('link');
+ let popup = null;
+
+ button.set({
+ class: 'internal-link-btn',
+ label: 'Internal link',
+ withText: true,
+ tooltip: true,
+ });
+
+ // Probably this button should be also disabled when the link command is disabled.
+ button.bind('isEnabled').to(linkCommand);
+
+ button.on('execute', () => {
+ const { linkFormView } = this;
+
+ if (popup === null || popup.closed) {
+ popup = window.open(
+ `${this.fileBrowseUrl}?CKEditorFuncNum=1`,
+ null,
+ getPopupOptions(),
+ true,
+ );
+
+ window.addEventListener('message', onMessageEvent, false);
+ popup.onbeforeunload = () => {
+ // onbeforeunload also fires when change page, so we need to check the closed property
+ // on on each occurance before we remove the eventListener
+ setTimeout(() => {
+ if (popup.closed) {
+ console.log('remove event listener');
+ window.removeEventListener('message', onMessageEvent);
+ }
+ }, 500);
+ };
+ } else {
+ // the window reference must exist and the window is not closed;
+ // therefore, we can bring it back on top of any other window
+ // with the focus() method. There would be no need to re-create
+ // the window or to reload the referenced resource.
+ popup.focus();
+ }
+
+ function onMessageEvent(event) {
+ // Check event.origin to verify the targetOrigin matches this window's domain
+ if (event.origin !== window.location.origin) return;
+
+ if (event.data && event.data.itemUrl) {
+ linkFormView.urlInputView.fieldView.element.value = event.data.itemUrl;
+ linkFormView.fire('submit');
+ }
+
+ popup.close();
+ }
+ });
+
+ return button;
+ }
+}
+
+function getPopupOptions() {
+ let width = 970;
+ let height = parseInt((window.screen.height * parseInt('70%', 10)) / 100, 10);
+
+ if (width < 640) width = 640;
+
+ if (height < 420) height = 420;
+
+ const top = parseInt((window.screen.height - height) / 2, 10);
+ const left = parseInt((window.screen.width - width) / 2, 10);
+
+ return `${POPUP_OPTIONS},width=${width},height=${height},top=${top},left=${left}`;
+}
diff --git a/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/WysiwygEditor/config.js b/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/WysiwygEditor/config.js
new file mode 100644
index 0000000000..bfc46151a6
--- /dev/null
+++ b/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/WysiwygEditor/config.js
@@ -0,0 +1,47 @@
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
+import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
+import Link from '@ckeditor/ckeditor5-link/src/link';
+import List from '@ckeditor/ckeditor5-list/src/list';
+import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
+import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount';
+
+import BundlesLink from './Plugins/Link';
+
+export const defaultConfig = {
+ plugins: [
+ Essentials, Paragraph, Bold, Italic, Underline, Link, BundlesLink, List, BlockQuote, Alignment, WordCount,
+ ],
+ toolbar: ['bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote'],
+ link: {
+ decorators: {
+ qfefqopenInNewTab: {
+ mode: 'manual',
+ label: 'Open in a new tab',
+ defaultValue: false,
+ attributes: {
+ target: '_blank',
+ rel: 'noopener noreferrer',
+ },
+ },
+ },
+ },
+ language: {
+ // The UI will be English.
+ ui: 'nl',
+
+ // But the content will be edited in Arabic.
+ content: 'nl',
+ },
+};
+
+window.kunstmaanbundles = {
+ ...window.kunstmaanbundles,
+ CKEDITOR_CONFIGS: {
+ ...window.kunstmaanbundles.CKEDITOR_CONFIGS,
+ default: defaultConfig,
+ },
+};
diff --git a/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/WysiwygEditor/index.js b/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/WysiwygEditor/index.js
new file mode 100644
index 0000000000..5e0b29ba0a
--- /dev/null
+++ b/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/WysiwygEditor/index.js
@@ -0,0 +1,73 @@
+import '@ckeditor/ckeditor5-build-classic/build/translations/nl'; // ?
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import { defaultConfig } from './config';
+import { wordCountConfig } from './wordCount';
+
+const SELECTOR = '.js-wysiwyg-editor';
+const editors = new Map();
+
+export const initWysiwygEditors = ({ container = window.document } = {}) => {
+ if (container) {
+ const editorElements = [...container.querySelectorAll(SELECTOR)];
+
+ editorElements.forEach((editorElement) => {
+ const editor = editors.get(editorElement);
+ // Don't create if already created
+ if (!editor) {
+ const configName = editorElement.getAttribute('data-editor-mode');
+
+ const onWindowLoadedHandler = () => {
+ if (isConfigDefined(configName)) {
+ createEditor({
+ elementToReplace: editorElement,
+ config: window.kunstmaanbundles.CKEDITOR_CONFIGS[configName],
+ });
+ } else {
+ createEditor({ elementToReplace: editorElement });
+ console.warn(`No CKEditor config found with name "${configName}". The default config is used.`);
+ }
+ window.removeEventListener('load', onWindowLoadedHandler);
+ };
+
+ if (!configName) {
+ createEditor({ elementToReplace: editorElement });
+ } else if (isConfigDefined(configName)) {
+ createEditor({
+ elementToReplace: editorElement,
+ config: window.kunstmaanbundles.CKEDITOR_CONFIGS[configName],
+ });
+ } else {
+ // If the custom ckeditor config isn't find initially, wait for
+ // the window (all js resources) to be loaded and check again.
+ window.addEventListener('load', onWindowLoadedHandler);
+ }
+ }
+ });
+ }
+};
+
+function isConfigDefined(configName) {
+ return window.kunstmaanbundles.CKEDITOR_CONFIGS && window.kunstmaanbundles.CKEDITOR_CONFIGS[configName];
+}
+
+function createEditor({ elementToReplace, config = defaultConfig } = {}) {
+ const editorConfig = { ...config };
+ const maxLength = elementToReplace.getAttribute('maxlength')
+ && parseInt(elementToReplace.getAttribute('maxlength'), 10);
+
+ if (maxLength) {
+ editorConfig.wordCount = wordCountConfig({ elementId: elementToReplace.id, maxCharacters: maxLength });
+ }
+
+ ClassicEditor.create(elementToReplace, editorConfig).then((editor) => {
+ editors.set(elementToReplace, editor);
+ }).catch((error) => console.error(error.stack));
+}
+
+const reInit = initWysiwygEditors;
+
+// Make it available in the old js
+window.kunstmaanbundles = {
+ ...window.kunstmaanbundles,
+ wysiwygEditor: { reInit },
+};
diff --git a/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/WysiwygEditor/wordCount.js b/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/WysiwygEditor/wordCount.js
new file mode 100644
index 0000000000..53cd72156d
--- /dev/null
+++ b/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/WysiwygEditor/wordCount.js
@@ -0,0 +1,29 @@
+const CLASSES = {
+ closeToLimit: 'limit-close',
+ limitExceeded: 'limit-exceeded',
+};
+
+export function wordCountConfig({ elementId, maxCharacters }) {
+ return {
+ onUpdate: (stats) => {
+ const container = document.getElementById(`counter-for-${elementId}`);
+ const charactersLabel = container.getAttribute('data-characters-label') || 'Characters';
+ const isLimitExceeded = stats.characters > maxCharacters;
+ const isCloseToLimit = !isLimitExceeded && stats.characters > maxCharacters * 0.8;
+
+ // Display the number of characters. When the limit is exceeded,
+ // display how many characters should be removed.
+ if (isLimitExceeded) {
+ container.textContent = `${charactersLabel}: -${stats.characters - maxCharacters}/${maxCharacters}`;
+ } else {
+ container.textContent = `${charactersLabel}: ${stats.characters}/${maxCharacters}`;
+ }
+
+ // If the content length is close to the character limit, add a CSS class to warn the user.
+ container.classList.toggle(CLASSES.closeToLimit, isCloseToLimit);
+
+ // If the character limit is exceeded, add a CSS class that makes the content's color red.
+ container.classList.toggle(CLASSES.limitExceeded, isLimitExceeded);
+ },
+ };
+}
diff --git a/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/app.js b/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/app.js
index 53d00b74dd..4a75f08405 100644
--- a/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/app.js
+++ b/src/Kunstmaan/AdminBundle/Resources/ui/jsnext/app.js
@@ -1,8 +1,10 @@
import 'svgxuse/svgxuse';
-import PagePartChooser from './PagePartChooser';
+import { initPagePartChoosers } from './PagePartChooser';
+import { initWysiwygEditors } from './WysiwygEditor';
function init() {
- PagePartChooser.init();
+ initPagePartChoosers();
+ initWysiwygEditors();
}
// This script is loaded dynamically, so it could be that
diff --git a/src/Kunstmaan/AdminBundle/Resources/ui/scss/default-theme/components/_components.scss b/src/Kunstmaan/AdminBundle/Resources/ui/scss/default-theme/components/_components.scss
index 48f288fb73..c2b459591d 100644
--- a/src/Kunstmaan/AdminBundle/Resources/ui/scss/default-theme/components/_components.scss
+++ b/src/Kunstmaan/AdminBundle/Resources/ui/scss/default-theme/components/_components.scss
@@ -31,6 +31,7 @@
"forms/form-control",
"forms/label",
"forms/widget",
+ "forms/wysiwyg-editor",
"forms/date-time-group";
diff --git a/src/Kunstmaan/AdminBundle/Resources/ui/scss/default-theme/components/forms/_form-control.scss b/src/Kunstmaan/AdminBundle/Resources/ui/scss/default-theme/components/forms/_form-control.scss
index 7a0a0e6c6b..2ad9469a2b 100644
--- a/src/Kunstmaan/AdminBundle/Resources/ui/scss/default-theme/components/forms/_form-control.scss
+++ b/src/Kunstmaan/AdminBundle/Resources/ui/scss/default-theme/components/forms/_form-control.scss
@@ -79,20 +79,6 @@ input[type=file].form-control {
}
}
-.rich-editor + .form-control__character-counter {
- position: static;
-
- @media (min-width: $screen-sm) {
- position: static;
- left: 0;
- top: 0;
-
- padding: .5rem;
-
- transform: none;
- }
-}
-
/* Range slider
=========================================================================== */
@@ -179,5 +165,3 @@ input[type=range]:focus {
background-color: $accent-color;
}
-
-
diff --git a/src/Kunstmaan/AdminBundle/Resources/ui/scss/default-theme/components/forms/_wysiwyg-editor.scss b/src/Kunstmaan/AdminBundle/Resources/ui/scss/default-theme/components/forms/_wysiwyg-editor.scss
new file mode 100644
index 0000000000..492b409d02
--- /dev/null
+++ b/src/Kunstmaan/AdminBundle/Resources/ui/scss/default-theme/components/forms/_wysiwyg-editor.scss
@@ -0,0 +1,45 @@
+/* ==========================================================================
+ Rich eEdit
+ ========================================================================== */
+
+/* General
+ ========================================================================== */
+.wysiwyg-editor {
+}
+
+/* Character count
+ ========================================================================== */
+.wysiwyg-editor__character-counter {
+ padding: .5em 1em;
+
+ background: var(--ck-color-toolbar-background);
+
+ border: 1px solid var(--ck-color-toolbar-border);
+ border-top: 0;
+
+ color: $gray;
+ text-align: right;
+ font-size: 1.2rem;
+ font-weight: bold;
+
+ &.limit-exceeded {
+ color: $red;
+ }
+
+ &.limit-close {
+ color: $orangy;
+ }
+}
+
+
+/* Internal link button in linkUI
+ ========================================================================== */
+.internal-link-btn {
+ .ck.ck-link-form_layout-vertical &.ck-button {
+ width: 100%;
+
+ &:first-of-type {
+ border-right: 0;
+ }
+ }
+}
diff --git a/src/Kunstmaan/AdminBundle/Resources/views/Form/fields.html.twig b/src/Kunstmaan/AdminBundle/Resources/views/Form/fields.html.twig
index af70632e8d..c34f471a94 100644
--- a/src/Kunstmaan/AdminBundle/Resources/views/Form/fields.html.twig
+++ b/src/Kunstmaan/AdminBundle/Resources/views/Form/fields.html.twig
@@ -61,8 +61,8 @@
{% if attr['maxlength'] is defined %}
{% set reInitMethods = reInitMethods|merge(['"charactersLeft"']) %}
{% endif %}
- {% if 'js-rich-editor' in attr.class %}
- {% set reInitMethods = reInitMethods|merge(['"richEditor"']) %}
+ {% if 'js-wysiwyg-editor' in attr.class %}
+ {% set reInitMethods = reInitMethods|merge(['"wysiwygEditor"']) %}
{% endif %}
{% endapply %}
@@ -70,11 +70,11 @@
{% block wysiwyg_widget %}
{% apply spaceless %}
- {% set attr = attr|merge({ 'class': (attr.class|default('') ~ ' js-rich-editor rich-editor form-control')|trim }) %}
+ {% set attr = attr|merge({ 'class': (attr.class|default('') ~ ' js-wysiwyg-editor wysiwyg-editor form-control')|trim }) %}
{% if attr['maxlength'] is defined %}
{% set attr = attr|merge({ 'class': (attr.class|default('') ~ ' js-max-length-input')|trim }) %}
{% endif %}
-
+
{% endapply %}
{% endblock wysiwyg_widget %}
@@ -220,7 +220,15 @@
{% set widget %}
{% endset %}
{% endif %}
diff --git a/src/Kunstmaan/GeneratorBundle/Generator/PagePartGenerator.php b/src/Kunstmaan/GeneratorBundle/Generator/PagePartGenerator.php
index e07fff79f5..bade321a2f 100644
--- a/src/Kunstmaan/GeneratorBundle/Generator/PagePartGenerator.php
+++ b/src/Kunstmaan/GeneratorBundle/Generator/PagePartGenerator.php
@@ -385,7 +385,7 @@ private function generateBehatTest()
} elseif ($blocks[2] == 'textarea' && array_key_exists(
'class',
$attr
- ) && $attr['class'] == 'js-rich-editor rich-editor'
+ ) && $attr['class'] == 'js-wysiwyg-editor wysiwyg-editor'
) {
$pageFields[]['rich_text'] = array(
'label' => $this->labelCase($name),
diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/common/Form/EntityAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/common/Form/EntityAdminType.php
index f7fe05fe7f..e0219235e3 100644
--- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/common/Form/EntityAdminType.php
+++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/common/Form/EntityAdminType.php
@@ -41,7 +41,7 @@ public function buildForm(FormBuilderInterface $builder, array $options)
])],
{% endif %}
{% endif %}
-{% if key == 'rich_text' %} 'attr' => ['rows' => 10, 'cols' => 600, 'class' => 'js-rich-editor rich-editor', 'height' => 140],
+{% if key == 'rich_text' %} 'attr' => ['rows' => 10, 'cols' => 600, 'class' => 'js-wysiwyg-editor wysiwyg-editor', 'height' => 140],
{% endif %}
{% if key == 'multi_line' %} 'attr' => ['rows' => 10, 'cols' => 600],
{% endif %}
diff --git a/src/Kunstmaan/PagePartBundle/Resources/translations/messages.en.yml b/src/Kunstmaan/PagePartBundle/Resources/translations/messages.en.yml
index 43ef256879..50bfabd927 100644
--- a/src/Kunstmaan/PagePartBundle/Resources/translations/messages.en.yml
+++ b/src/Kunstmaan/PagePartBundle/Resources/translations/messages.en.yml
@@ -24,6 +24,9 @@ pagepart:
delete: Delete
resize: Minimize-Maximize
+ wysiwyg:
+ characters: Characters
+
region:
button:
min: Minimize
diff --git a/src/Kunstmaan/PagePartBundle/Resources/translations/messages.nl.yml b/src/Kunstmaan/PagePartBundle/Resources/translations/messages.nl.yml
index ee122d62b0..e7c1efc70e 100644
--- a/src/Kunstmaan/PagePartBundle/Resources/translations/messages.nl.yml
+++ b/src/Kunstmaan/PagePartBundle/Resources/translations/messages.nl.yml
@@ -20,6 +20,8 @@ pagepart:
edit: Bewerk
delete: Verwijder
resize: Minimaliseer / Maximaliseer
+ wysiwyg:
+ characters: Karakters
region:
button:
min: Minimaliseer