Fix buttons bug, when in buttons you set string it could throw error

xdan · Feb 9, 2018 · 878351a · 878351a
1 parent a1032fa
commit 878351a
Show file tree

Hide file tree

Showing 22 changed files with 251 additions and 50 deletions.
diff --git a/examples/app.js b/examples/app.js
@@ -3,6 +3,7 @@ var main_container = document.getElementById('main_container');
 var links = {
     'index.html': 'All options',
     'arabic.lang.html': 'Arabic Language',
+    'custom-toolbar.html': 'Custom toolbar',
 };
 
 if (examples) {

diff --git a/examples/arabic.lang.html b/examples/arabic.lang.html
@@ -16,6 +16,7 @@
     <nav>
         <ul class="container">
             <li><a href="https://xdsoft.net/jodit/">Jodit homepage</a></li>
+            <li><a href="https://xdsoft.net/jodit/play/">Playground</a></li>
             <li><a href="https://xdsoft.net/jodit/docs/">Documentation</a></li>
             <li><a href="https://github.com/xdan/jodit/">Github</a></li>
             <li><a href="https://github.com/xdan/jodit/releases">Changelog</a></li>
@@ -49,6 +50,7 @@ <h3>JavaScript</h3>
     <nav>
         <ul class="container">
             <li><a href="https://xdsoft.net/jodit/">Jodit homepage</a></li>
+            <li><a href="https://xdsoft.net/jodit/play/">Playground</a></li>
             <li><a href="https://xdsoft.net/jodit/docs/">Documentation</a></li>
             <li><a href="https://github.com/xdan/jodit/">Github</a></li>
             <li><a href="https://github.com/xdan/jodit/releases">Changelog</a></li>

diff --git a/examples/custom-toolbar.html b/examples/custom-toolbar.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<!--
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * License https://xdsoft.net/jodit/license.html
+ * Copyright 2013-2018 Valeriy Chupurnov https://xdsoft.net
+-->
+<html>
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Jodit Example</title>
+</head>
+<body>
+<header>
+    <nav>
+        <ul class="container">
+            <li><a href="https://xdsoft.net/jodit/">Jodit homepage</a></li>
+            <li><a href="https://xdsoft.net/jodit/play/">Playground</a></li>
+            <li><a href="https://xdsoft.net/jodit/docs/">Documentation</a></li>
+            <li><a href="https://github.com/xdan/jodit/">Github</a></li>
+            <li><a href="https://github.com/xdan/jodit/releases">Changelog</a></li>
+            <li>
+                <a href="javascript:void(0)">Examples</a>
+                <ul id="examples"><!-- see app.js--></ul>
+            </li>
+            <li style="float:right"><a href="https://github.com/xdan/jodit/releases/latest">Download</a></li>
+        </ul>
+    </nav>
+</header>
+<div id="main_container" class="container">
+    <div id="introduction">
+        <h3>HTML</h3>
+        <pre>
+            &lt;textarea id="editor">&lt;/textarea>
+        </pre>
+        <h3>JavaScript</h3>
+        <pre>
+           var editor = new Jodit('#editor', {
+                buttons: 'source,about,print,bold',
+                buttonsMD: 'source,about,print',
+                buttonsSM:  'source,about',
+                buttonsXS: 'source'
+            });
+        </pre>
+    </div>
+    <div class="result">
+        <textarea id="area_editor"></textarea>
+    </div>
+</div>
+<footer>
+    <nav>
+        <ul class="container">
+            <li><a href="https://xdsoft.net/jodit/">Jodit homepage</a></li>
+            <li><a href="https://xdsoft.net/jodit/play/">Playground</a></li>
+            <li><a href="https://xdsoft.net/jodit/docs/">Documentation</a></li>
+            <li><a href="https://github.com/xdan/jodit/">Github</a></li>
+            <li><a href="https://github.com/xdan/jodit/releases">Changelog</a></li>
+            <li style="float:right"><a href="https://github.com/xdan/jodit/releases/latest">Download</a></li>
+        </ul>
+    </nav>
+</footer>
+</body>
+<link rel="stylesheet" href="../build/jodit.min.css"/>
+<link rel="stylesheet" href="app.css"/>
+<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,700,700i" rel="stylesheet">
+
+<script src="../build/jodit.min.js"></script>
+<script src="app.js"></script>
+<script>
+    var editor = new Jodit('#area_editor', {
+        buttons: 'source,about,print,bold',
+        buttonsMD: 'source,about,print',
+        buttonsSM:  'source,about',
+        buttonsXS: 'source'
+    });
+</script>
+</html>
diff --git a/examples/example.default.html b/examples/example.default.html
@@ -16,6 +16,7 @@
     <nav>
         <ul class="container">
             <li><a href="https://xdsoft.net/jodit/">Jodit homepage</a></li>
+            <li><a href="https://xdsoft.net/jodit/play/">Playground</a></li>
             <li><a href="https://xdsoft.net/jodit/docs/">Documentation</a></li>
             <li><a href="https://github.com/xdan/jodit/">Github</a></li>
             <li><a href="https://github.com/xdan/jodit/releases">Changelog</a></li>
@@ -49,6 +50,7 @@ <h3>JavaScript</h3>
     <nav>
         <ul class="container">
             <li><a href="https://xdsoft.net/jodit/">Jodit homepage</a></li>
+            <li><a href="https://xdsoft.net/jodit/play/">Playground</a></li>
             <li><a href="https://xdsoft.net/jodit/docs/">Documentation</a></li>
             <li><a href="https://github.com/xdan/jodit/">Github</a></li>
             <li><a href="https://github.com/xdan/jodit/releases">Changelog</a></li>

diff --git a/examples/index.html b/examples/index.html
@@ -16,6 +16,7 @@
     <nav>
         <ul class="container">
             <li><a href="https://xdsoft.net/jodit/">Jodit homepage</a></li>
+            <li><a href="https://xdsoft.net/jodit/play/">Playground</a></li>
             <li><a href="https://xdsoft.net/jodit/docs/">Documentation</a></li>
             <li><a href="https://github.com/xdan/jodit/">Github</a></li>
             <li><a href="https://github.com/xdan/jodit/releases">Changelog</a></li>
@@ -128,6 +129,7 @@ <h3>JavaScript</h3>
     <nav>
         <ul class="container">
             <li><a href="https://xdsoft.net/jodit/">Jodit homepage</a></li>
+            <li><a href="https://xdsoft.net/jodit/play/">Playground</a></li>
             <li><a href="https://xdsoft.net/jodit/docs/">Documentation</a></li>
             <li><a href="https://github.com/xdan/jodit/">Github</a></li>
             <li><a href="https://github.com/xdan/jodit/releases">Changelog</a></li>

diff --git a/src/Config.ts b/src/Config.ts
@@ -426,7 +426,7 @@ export class Config {
      *  });
      *  ```
      */
-    buttons: Array<string|ControlType> = [
+    buttons: Array<string|ControlType> | string = [
         'source', '|',
         'bold',
         'strikethrough',
@@ -456,7 +456,7 @@ export class Config {
     /**
      * The list of buttons that appear in the editor's toolbar on medium places (≥ options.sizeMD).
      */
-    buttonsMD: Array<string|ControlType> = [
+    buttonsMD: Array<string|ControlType> | string = [
         'source', '|',
         'bold',
         'italic', '|',
@@ -481,7 +481,7 @@ export class Config {
     /**
      * The list of buttons that appear in the editor's toolbar on small places (≥ options.sizeSM).
      */
-    buttonsSM: Array<string|ControlType> = [
+    buttonsSM: Array<string|ControlType> | string = [
         'source', '|',
         'bold',
         'italic', '|',
@@ -504,7 +504,7 @@ export class Config {
     /**
      * The list of buttons that appear in the editor's toolbar on extra small places (< options.sizeSM).
      */
-    buttonsXS: Array<string|ControlType> = [
+    buttonsXS: Array<string|ControlType> | string = [
         'bold',
         'image', '|',
         'brush',
@@ -656,8 +656,13 @@ Config.prototype.controls = {
                     editor.selection.insertHTML(code);
                 };
 
-            tab[ToolbarIcon.getIcon('link') + '&nbsp;' + editor.i18n('Link')] = bylink;
-            tab[ToolbarIcon.getIcon('source') + '&nbsp;' + editor.i18n('Code')] = bycode;
+            if (editor.options.textIcons) {
+                tab[editor.i18n('Link')] = bylink;
+                tab[editor.i18n('Code')] = bycode;
+            } else {
+                tab[ToolbarIcon.getIcon('link') + '&nbsp;' + editor.i18n('Link')] = bylink;
+                tab[ToolbarIcon.getIcon('source') + '&nbsp;' + editor.i18n('Code')] = bycode;
+            }
 
             bycode.addEventListener('submit', (event) => {
                 event.preventDefault();

diff --git a/src/Jodit.ts b/src/Jodit.ts
@@ -12,7 +12,7 @@ import {Uploader} from './modules/Uploader';
 import {Dom} from './modules/Dom';
 import {EventsNative} from './modules/EventsNative';
 import * as consts from './constants';
-import {extend, inArray, dom, each, sprintf, defaultLanguage, debounce, asArray} from './modules/Helpers';
+import {extend, inArray, dom, each, sprintf, defaultLanguage, debounce, asArray, splitArray} from './modules/Helpers';
 import * as helper from './modules/Helpers';
 import {Config} from "./Config";
 import {ToolbarCollection} from "./modules/ToolbarCollection";
@@ -216,7 +216,7 @@ export class Jodit extends Component {
         this.toolbar = new ToolbarCollection(this);
 
         if (this.options.toolbar) {
-            this.toolbar.build(this.options.buttons.concat(this.options.extraButtons), this.container);
+            this.toolbar.build(splitArray(this.options.buttons).concat(this.options.extraButtons), this.container);
         }
 
         this.container.classList.add('jodit_toolbar_size-' + (['middle', 'large', 'small'].indexOf(this.options.toolbarButtonSize.toLowerCase()) !== -1 ? this.options.toolbarButtonSize.toLowerCase() : 'middle'));

diff --git a/src/modules/Helpers.ts b/src/modules/Helpers.ts
@@ -776,6 +776,10 @@ export const asArray = (a: any): Array<any> => (
     Array.isArray(a) ? a : [a]
 );
 
+export const splitArray = (a: Array<any> | string): Array<any> => (
+    Array.isArray(a) ? a : a.split(/[,\s]+/)
+);
+
 export const sprintf = (...args: Array<string|number>): string => {
     const regex: RegExp = /%%|%(\d+\$)?([-+#0 ]*)(\*\d+\$|\*|\d+)?(\.(\*\d+\$|\*|\d+))?([scboxXuidfegEG])/g;
     let a: Array<string|number> = args,

diff --git a/src/modules/ToolbarCollection.ts b/src/modules/ToolbarCollection.ts
@@ -474,7 +474,7 @@ export  class ToolbarButton extends ToolbarElement {
                 }
             }
         } else {
-            this.textBox.innerHTML = control.name;
+            this.textBox.innerHTML = `<span class="jodit_icon">${control.name}</span>`;
         }
     }
 

diff --git a/src/modules/Widget.ts b/src/modules/Widget.ts
@@ -33,6 +33,8 @@ export namespace Widget {
     export const ColorPickerWidget = (editor: Jodit, callback: (newColor: string) => void, coldColor: string): HTMLDivElement => {
         const valueHex = normalizeColor(coldColor),
             form: HTMLDivElement = <HTMLDivElement>dom('<div class="jodit_colorpicker"></div>', editor.ownerDocument),
+            iconEye: string = editor.options.textIcons ? '' : Jodit.modules.ToolbarIcon.getIcon('eye'),
+            iconEraser: string = editor.options.textIcons ? `<span>${editor.i18n('eraser')}</span>` : Jodit.modules.ToolbarIcon.getIcon('eraser'),
             eachColor = (colors: string[] | {[key: string]: string[]}) => {
                 const stack: string[] = [];
                 if (isPlainObject(colors)) {
@@ -44,7 +46,7 @@ export namespace Widget {
                 } else if (Array.isArray(colors)) {
                     colors.forEach((color) => {
                         stack.push('<a ' + (valueHex === color ? ' class="active" ' : '') + ' title="' + color + '" style="background-color:' + color + '" data-color="' + color + '" href="javascript:void(0)">' +
-                            (valueHex === color ? Jodit.modules.ToolbarIcon.getIcon('eye') : '') +
+                            (valueHex === color ? iconEye : '') +
                             '</a>');
                     })
                 }
@@ -55,7 +57,7 @@ export namespace Widget {
         form
             .appendChild(dom('<div>' + eachColor(editor.options.colors) + '</div>', editor.ownerDocument));
 
-        form.appendChild(dom('<a data-color="" href="javascript:void(0)">' + Jodit.modules.ToolbarIcon.getIcon('eraser') + '</a>', editor.ownerDocument));
+        form.appendChild(dom('<a ' + (editor.options.textIcons ? 'class="jodit_text_icon"' : '') + ' data-color="" href="javascript:void(0)">' + iconEraser + '</a>', editor.ownerDocument));
 
         editor.events
             .on(form, 'mousedown touchstart', (e: MouseEvent) => {
@@ -269,13 +271,14 @@ export namespace Widget {
             }, (error: Error) => {
                 editor.events.fire('errorMessage', error.message);
             });
-
-            tabs[Jodit.modules.ToolbarIcon.getIcon('upload') + editor.i18n('Upload')] = dragbox;
+            const icon = editor.options.textIcons ? '' : Jodit.modules.ToolbarIcon.getIcon('upload');
+            tabs[icon + editor.i18n('Upload')] = dragbox;
         }
 
         if (callbacks.filebrowser) {
             if (editor.options.filebrowser.ajax.url || editor.options.filebrowser.items.url) {
-                tabs[Jodit.modules.ToolbarIcon.getIcon('folder') + editor.i18n('Browse')] = function () {
+                const icon = editor.options.textIcons ? '' : Jodit.modules.ToolbarIcon.getIcon('folder');
+                tabs[icon + editor.i18n('Browse')] = function () {
                     close && close();
                     if (callbacks.filebrowser) {
                         (<FileBrowser>editor.getInstance('FileBrowser')).open(callbacks.filebrowser);
@@ -319,7 +322,8 @@ export namespace Widget {
                 return false;
             }, false);
 
-            tabs[Jodit.modules.ToolbarIcon.getIcon('link') + ' URL'] = form;
+            const icon = editor.options.textIcons ? '' : Jodit.modules.ToolbarIcon.getIcon('link');
+            tabs[icon + ' URL'] = form;
 
         }
 

diff --git a/src/plugins/mobile.ts b/src/plugins/mobile.ts
@@ -9,6 +9,7 @@ import {Config} from '../Config'
 import {ControlType} from "../modules/ToolbarCollection";
 import {ToolbarCollection} from "../modules/ToolbarCollection";
 import * as consts from "../constants";
+import {splitArray} from "../modules/Helpers";
 
 declare module "../Config" {
     interface Config {
@@ -40,7 +41,7 @@ Config.prototype.controls.dots = <ControlType> {
                     const buttons: Array<string|ControlType> | undefined = editor.events.fire('getDiffButtons.mobile');
 
                     if (buttons && store) {
-                        store.toolbar.build(buttons, store.container);
+                        store.toolbar.build(splitArray(buttons), store.container);
                     }
                 }
             };
@@ -62,7 +63,7 @@ Config.prototype.controls.dots = <ControlType> {
 export function mobile(editor: Jodit) {
     let timeout: number = 0,
         now: number,
-        store: Array<string|ControlType> = editor.options.buttons;
+        store: Array<string|ControlType> = splitArray(editor.options.buttons);
 
     editor.events
         .on('touchend', (e: TouchEvent) => {
@@ -75,7 +76,7 @@ export function mobile(editor: Jodit) {
             }
         })
         .on('getDiffButtons.mobile', () => {
-            return editor.options.buttons.filter((i: string|ControlType) => {
+            return splitArray(editor.options.buttons).filter((i: string|ControlType) => {
                 return store.indexOf(i) < 0;
             });
         })
@@ -87,13 +88,13 @@ export function mobile(editor: Jodit) {
             let width: number = editor.container.offsetWidth;
 
             if (width >= editor.options.sizeLG) {
-                store = editor.options.buttons;
+                store = splitArray(editor.options.buttons);
             } else if (width >= editor.options.sizeMD) {
-                store = editor.options.buttonsMD;
+                store = splitArray(editor.options.buttonsMD);
             } else if (width >= editor.options.sizeSM) {
-                store = editor.options.buttonsSM;
+                store = splitArray(editor.options.buttonsSM);
             } else {
-                store = editor.options.buttonsXS;
+                store = splitArray(editor.options.buttonsXS);
             }
 
             editor.toolbar.build(store.concat(editor.options.extraButtons), editor.container);

diff --git a/src/styles/jodit.less b/src/styles/jodit.less
@@ -5,16 +5,16 @@
  */
 
 .jodit_container {
-   background: #fff;
+   background: @color-background-default;
+   font-size: @font-size-default;
+   font-family: @font-default;
    &, * {
     box-sizing: border-box;
    }
   .jodit_workplace {
     border: 1px solid @color-border;
     position: relative;
     overflow: auto;
-    //width: 100%;
-    //display: table;
 
     .jodit_wysiwyg,
     .jodit_wysiwyg_iframe {

diff --git a/src/styles/modules/icon.less b/src/styles/modules/icon.less
@@ -33,6 +33,9 @@
     transform-origin: 0px 0px!important;
     overflow: visible;
 }
+.jodit_text_icon {
+    font-size:14px;
+}
 .jodit_toolbar_size{
     &-small .jodit_icon{
         .size(@icon_small_size);

diff --git a/src/styles/plugins/popupInline.less b/src/styles/plugins/popupInline.less
@@ -7,18 +7,18 @@
 .jodit_toolbar_popup-inline {
     position: absolute;
     display: none;
-    color: @color-background-default;
+    color: @color-background-gray;
     background: @popap-bg-color;
     box-shadow: none;
     background-clip: padding-box;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: @font-default;
     box-sizing: border-box;
     user-select: none;
     margin-top: 10px;
     z-index: @z-index-popap !important;
     text-align: left;
     border: 0px;
-    border: 1px solid @color-background-default;
+    border: 1px solid @color-background-gray;
     &.active {
         display:block;
     }
@@ -34,7 +34,7 @@
         display: inline-block;
         transform: rotate(45deg);
         background:  @popap-bg-color;
-        border: 1px solid @color-background-default;
+        border: 1px solid @color-background-gray;
         border-width: 1px 0 0 1px;
         z-index: 6;
     }