OTRS API Reference JavaScript

Source: Core.UI.RichTextEditor.js

  1. // --
  2. // Copyright (C) 2001-2018 OTRS AG, https://otrs.com/
  3. // --
  4. // This software comes with ABSOLUTELY NO WARRANTY. For details, see
  5. // the enclosed file COPYING for license information (GPL). If you
  6. // did not receive this file, see https://www.gnu.org/licenses/gpl-3.0.txt.
  7. // --
  9. "use strict";
  11. var Core = Core || {};
  12. Core.UI = Core.UI || {};
  14. /**
  15.  * @namespace Core.UI.RichTextEditor
  16.  * @memberof Core.UI
  17.  * @author OTRS AG
  18.  * @description
  19.  *      Richtext Editor.
  20.  */
  21. Core.UI.RichTextEditor = (function (TargetNS) {
  22.     /**
  23.      * @private
  24.      * @name $FormID
  25.      * @memberof Core.UI.RichTextEditor
  26.      * @member {jQueryObject}
  27.      * @description
  28.      *      Hidden input field with name FormID.
  29.      */
  30.     var $FormID,
  32.     /**
  33.      * @private
  34.      * @name TimeOutRTEOnChange
  35.      * @memberof Core.UI.RichTextEditor
  36.      * @member {Object}
  37.      * @description
  38.      *      Object to handle timeout.
  39.      */
  40.         TimeOutRTEOnChange;
  42.     /**
  43.      * @private
  44.      * @name CheckFormID
  45.      * @memberof Core.UI.RichTextEditor
  46.      * @function
  47.      * @returns {jQueryObject} FormID element.
  48.      * @param {jQueryObject} $EditorArea - The jQuery object of the element that has become a rich text editor.
  49.      * @description
  50.      *      Check in the window which hidden element has a name same to 'FormID' and return it like a JQuery object.
  51.      */
  52.     function CheckFormID($EditorArea) {
  53.         if (typeof $FormID === 'undefined') {
  54.             $FormID = $EditorArea.closest('form').find('input:hidden[name=FormID]');
  55.         }
  56.         return $FormID;
  57.     }
  59.     /**
  60.      * @name InitEditor
  61.      * @memberof Core.UI.RichTextEditor
  62.      * @function
  63.      * @returns {Boolean} Returns false on error.
  64.      * @param {jQueryObject} $EditorArea - The jQuery object of the element that will be a rich text editor.
  65.      * @description
  66.      *      This function initializes the application and executes the needed functions.
  67.      */
  68.     TargetNS.InitEditor = function ($EditorArea) {
  69.         var EditorID = '',
  70.             Editor,
  71.             UserLanguage,
  72.             UploadURL = '',
  73.             EditorConfig;
  75.         if (typeof CKEDITOR === 'undefined') {
  76.             return false;
  77.         }
  79.         if (isJQueryObject($EditorArea) && $EditorArea.hasClass('HasCKEInstance')) {
  80.             return false;
  81.         }
  83.         if (isJQueryObject($EditorArea) && $EditorArea.length === 1) {
  84.             EditorID = $EditorArea.attr('id');
  85.         }
  87.         if (EditorID === '') {
  88.             Core.Exception.Throw('RichTextEditor: Need exactly one EditorArea!', 'TypeError');
  89.         }
  91.         // mark the editor textarea as linked with an RTE instance to avoid multiple instances
  92.         $EditorArea.addClass('HasCKEInstance');
  94.         CKEDITOR.on('instanceCreated', function (Editor) {
  95.             CKEDITOR.addCss(Core.Config.Get('RichText.EditingAreaCSS'));
  97.             // Remove the validation error tooltip if content is added to the editor
  98.             Editor.editor.on('change', function() {
  99.                 window.clearTimeout(TimeOutRTEOnChange);
  100.                 TimeOutRTEOnChange = window.setTimeout(function () {
  101.                     Core.Form.Validate.ValidateElement($(Editor.editor.element.$));
  102.                     Core.App.Publish('Event.UI.RichTextEditor.ChangeValidationComplete', [Editor]);
  103.                 }, 250);
  104.             });
  106.             Core.App.Publish('Event.UI.RichTextEditor.InstanceCreated', [Editor]);
  107.         });
  109.         CKEDITOR.on('instanceReady', function (Editor) {
  111.             // specific config for CodeMirror instances (e.g. XSLT editor)
  112.             if (Core.Config.Get('RichText.Type') == 'CodeMirror') {
  114.                 // The width of a tab character. Defaults to 4.
  115.                 window[ 'codemirror_' + Editor.editor.id ].setOption("tabSize", 4);
  117.                 // How many spaces a block (whatever that means in the edited language) should be indented. The default is 2.
  118.                 window[ 'codemirror_' + Editor.editor.id ].setOption("indentUnit", 4);
  120.                 // Whether to use the context-sensitive indentation that the mode provides (or just indent the same as the line before). Defaults to true.
  121.                 window[ 'codemirror_' + Editor.editor.id ].setOption("tabMode", 'spaces');
  122.                 window[ 'codemirror_' + Editor.editor.id ].setOption("smartIndent", true);
  124.                 // convert tabs to spaces
  125.                 window[ 'codemirror_' + Editor.editor.id ].setOption("extraKeys", {
  126.                     Tab: function(cm) {
  127.                         var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
  128.                         cm.replaceSelection(spaces);
  129.                     }
  130.                 });
  132.             }
  134.             Core.App.Publish('Event.UI.RichTextEditor.InstanceReady', [Editor]);
  135.         });
  137.         // The format for the language is different between OTRS and CKEditor (see bug#8024)
  138.         // To correct this, we replace "_" with "-" in the language (e.g. zh_CN becomes zh-cn)
  139.         UserLanguage = Core.Config.Get('UserLanguage').replace(/_/, "-");
  141.         // build URL for image upload
  142.         if (CheckFormID($EditorArea).length) {
  144.             UploadURL = Core.Config.Get('Baselink')
  145.                     + 'Action='
  146.                     + Core.Config.Get('RichText.PictureUploadAction', 'PictureUpload')
  147.                     + '&FormID='
  148.                     + CheckFormID($EditorArea).val()
  149.                     + '&' + Core.Config.Get('SessionName')
  150.                     + '=' + Core.Config.Get('SessionID');
  151.         }
  153.         // set default editor config, but allow custom config for other types for editors
  154.         /*eslint-disable camelcase */
  155.         EditorConfig = {
  156.             customConfig: '', // avoid loading external config files
  157.             disableNativeSpellChecker: false,
  158.             defaultLanguage: UserLanguage,
  159.             language: UserLanguage,
  160.             width: Core.Config.Get('RichText.Width', 620),
  161.             resize_minWidth: Core.Config.Get('RichText.Width', 620),
  162.             height: Core.Config.Get('RichText.Height', 320),
  163.             removePlugins: CheckFormID($EditorArea).length ? '' : 'image2,uploadimage',
  164.             forcePasteAsPlainText: false,
  165.             format_tags: 'p;h1;h2;h3;h4;h5;h6;pre',
  166.             fontSize_sizes: '8px;10px;12px;16px;18px;20px;22px;24px;26px;28px;30px;',
  167.             extraAllowedContent: 'div[type]{*}; img[*]; col[width]; style[*]{*}; *[id](*)',
  168.             enterMode: CKEDITOR.ENTER_BR,
  169.             shiftEnterMode: CKEDITOR.ENTER_BR,
  170.             contentsLangDirection: Core.Config.Get('RichText.TextDir', 'ltr'),
  171.             toolbar: CheckFormID($EditorArea).length ? Core.Config.Get('RichText.Toolbar') : Core.Config.Get('RichText.ToolbarWithoutImage'),
  172.             filebrowserBrowseUrl: '',
  173.             filebrowserUploadUrl: UploadURL,
  174.             extraPlugins: 'splitquote,preventimagepaste,contextmenu_linkopen',
  175.             entities: false,
  176.             skin: 'moono-lisa'
  177.         };
  178.         /*eslint-enable camelcase */
  180.         // specific config for CodeMirror instances (e.g. XSLT editor)
  181.         if (Core.Config.Get('RichText.Type') == 'CodeMirror') {
  182.             $.extend(EditorConfig, {
  184.                 /*eslint-disable camelcase */
  185.                 startupMode: 'source',
  186.                 allowedContent: true,
  187.                 extraPlugins: 'codemirror',
  188.                 codemirror: {
  189.                     theme: 'default',
  190.                     lineNumbers: true,
  191.                     lineWrapping: true,
  192.                     matchBrackets: true,
  193.                     autoCloseTags: true,
  194.                     autoCloseBrackets: true,
  195.                     enableSearchTools: true,
  196.                     enableCodeFolding: true,
  197.                     enableCodeFormatting: true,
  198.                     autoFormatOnStart: false,
  199.                     autoFormatOnModeChange: false,
  200.                     autoFormatOnUncomment: false,
  201.                     mode: 'htmlmixed',
  202.                     showTrailingSpace: true,
  203.                     highlightMatches: true,
  204.                     styleActiveLine: true
  205.                 }
  206.                 /*eslint-disable camelcase */
  208.             });
  209.         }
  211.         Editor = CKEDITOR.replace(EditorID, EditorConfig);
  213.         // check if creating CKEditor was successful
  214.         // might be a problem on mobile devices e.g.
  215.         if (typeof Editor !== 'undefined') {
  217.             // Hack for updating the textarea with the RTE content (bug#5857)
  218.             // Rename the original function to another name, than overwrite the original one
  219.             CKEDITOR.instances[EditorID].updateElementOriginal = CKEDITOR.instances[EditorID].updateElement;
  220.             CKEDITOR.instances[EditorID].updateElement = function() {
  221.                 var Data;
  223.                 // First call the original function
  224.                 CKEDITOR.instances[EditorID].updateElementOriginal();
  226.                 // Now check if there is actually any non-whitespace content in the
  227.                 //  textarea field. If not, set it to an empty value to make sure
  228.                 //  the server side validation works correctly and there is no trash
  229.                 //  like '<br/>' stored in the DB.
  230.                 Data = this.element.getValue(); // get textarea content
  232.                 // only if codemirror plugin is not used (for XSLT editor)
  233.                 // or
  234.                 // if data contains no image tag,
  235.                 // this is important for inline images, we don't want to remove them!
  236.                 if (typeof CKEDITOR.instances[EditorID].config.codemirror === 'undefined' && !Data.match(/<img/)) {
  238.                     // remove tags and whitespace for checking
  239.                     Data = Data.replace(/\s+|&nbsp;|<\/?\w+[^>]*\/?>/g, '');
  240.                     if (!Data.length) {
  241.                         this.element.setValue(''); // reset textarea
  242.                     }
  243.                 }
  244.             };
  246.             // Redefine 'writeCssText' function because of unnecessary sorting of CSS properties (bug#12848).
  247.             /* eslint-disable no-unused-vars */
  248.             CKEDITOR.tools.writeCssText = function (styles, sort) {
  249.                 var name,
  250.                 stylesArr = [];
  252.                 for (name in styles)
  253.                     stylesArr.push(name + ':' + styles[name]);
  255.                 // This block sorts CSS properties which can make a wrong CSS style sent to CKEditor.
  256.                 // if ( sort )
  257.                 //     stylesArr.sort();
  259.                 return stylesArr.join('; ');
  260.             };
  261.             /* eslint-enable no-unused-vars */
  263.             // Needed for clientside validation of RTE
  264.             CKEDITOR.instances[EditorID].on('blur', function () {
  265.                 CKEDITOR.instances[EditorID].updateElement();
  266.                 Core.Form.Validate.ValidateElement($EditorArea);
  267.             });
  269.             // needed for client-side validation
  270.             CKEDITOR.instances[EditorID].on('focus', function () {
  272.                 Core.App.Publish('Event.UI.RichTextEditor.Focus', [Editor]);
  274.                 if ($EditorArea.attr('class').match(/Error/)) {
  275.                     window.setTimeout(function () {
  276.                         CKEDITOR.instances[EditorID].updateElement();
  277.                         Core.Form.Validate.ValidateElement($EditorArea);
  278.                         Core.App.Publish('Event.UI.RichTextEditor.FocusValidationComplete', [Editor]);
  279.                     }, 0);
  280.                 }
  281.             });
  283.             // mainly needed for client-side validation
  284.             $EditorArea.focus(function () {
  285.                 TargetNS.Focus($EditorArea);
  286.                 Core.UI.ScrollTo($("label[for=" + $EditorArea.attr('id') + "]"));
  287.             });
  288.         }
  289.     };
  291.     /**
  292.      * @name InitAllEditors
  293.      * @memberof Core.UI.RichTextEditor
  294.      * @function
  295.      * @description
  296.      *      This function initializes as a rich text editor every textarea element that containing the RichText class.
  297.      */
  298.     TargetNS.InitAllEditors = function () {
  299.         if (typeof CKEDITOR === 'undefined') {
  300.             return;
  301.         }
  303.         $('textarea.RichText').each(function () {
  304.             TargetNS.InitEditor($(this));
  305.         });
  306.     };
  308.     /**
  309.      * @name Init
  310.      * @memberof Core.UI.RichTextEditor
  311.      * @function
  312.      * @description
  313.      *      This function initializes JS functionality.
  314.      */
  315.     TargetNS.Init = function () {
  316.         if (typeof CKEDITOR === 'undefined') {
  317.             return;
  318.         }
  320.         TargetNS.InitAllEditors();
  321.     };
  323.     /**
  324.      * @name GetRTE
  325.      * @memberof Core.UI.RichTextEditor
  326.      * @function
  327.      * @returns {jQueryObject} jQuery object of the corresponsing RTE element.
  328.      * @param {jQueryObject} $EditorArea - The jQuery object of the element that is a rich text editor.
  329.      * @description
  330.      *      Get RTE jQuery element.
  331.      */
  332.     TargetNS.GetRTE = function ($EditorArea) {
  333.         var $RTE;
  335.         if (isJQueryObject($EditorArea)) {
  336.             $RTE = $('#cke_' + $EditorArea.attr('id'));
  337.             return ($RTE.length ? $RTE : undefined);
  338.         }
  339.     };
  341.     /**
  342.      * @name UpdateLinkedField
  343.      * @memberof Core.UI.RichTextEditor
  344.      * @function
  345.      * @param {jQueryObject} $EditorArea - The jQuery object of the element that is a rich text editor.
  346.      * @description
  347.      *      This function updates the linked field for a rich text editor.
  348.      */
  349.     TargetNS.UpdateLinkedField = function ($EditorArea) {
  350.         var EditorID = '',
  351.             Data,
  352.             StrippedContent;
  354.         if (isJQueryObject($EditorArea) && $EditorArea.length === 1) {
  355.             EditorID = $EditorArea.attr('id');
  356.         }
  358.         if (EditorID === '') {
  359.             Core.Exception.Throw('RichTextEditor: Need exactly one EditorArea!', 'TypeError');
  360.         }
  362.         Data = CKEDITOR.instances[EditorID].getData();
  363.         StrippedContent = Data.replace(/\s+|&nbsp;|<\/?\w+[^>]*\/?>/g, '');
  365.         if (StrippedContent.length === 0 && !Data.match(/<img/)) {
  366.             $EditorArea.val('');
  367.         }
  368.         else {
  369.             $EditorArea.val(Data);
  370.         }
  371.     };
  373.     /**
  374.      * @name IsEnabled
  375.      * @memberof Core.UI.RichTextEditor
  376.      * @function
  377.      * @returns {Boolean} True if RTE is enabled, false otherwise
  378.      * @param {jQueryObject} $EditorArea - The jQuery object of the element that is a rich text editor.
  379.      * @description
  380.      *      This function check if a rich text editor is enable in this moment.
  381.      */
  382.     TargetNS.IsEnabled = function ($EditorArea) {
  383.         if (typeof CKEDITOR === 'undefined') {
  384.             return false;
  385.         }
  387.         if (isJQueryObject($EditorArea) && $EditorArea.length) {
  388.             return (CKEDITOR.instances[$EditorArea[0].id] ? true : false);
  389.         }
  390.         return false;
  391.     };
  393.     /**
  394.      * @name Focus
  395.      * @memberof Core.UI.RichTextEditor
  396.      * @function
  397.      * @param {jQueryObject} $EditorArea - The jQuery object of the element that is a rich text editor.
  398.      * @description
  399.      *      This function focusses the given RTE.
  400.      */
  401.     TargetNS.Focus = function ($EditorArea) {
  402.         var EditorID = '';
  404.         if (isJQueryObject($EditorArea) && $EditorArea.length === 1) {
  405.             EditorID = $EditorArea.attr('id');
  406.         }
  408.         if (EditorID === '') {
  409.             Core.Exception.Throw('RichTextEditor: Need exactly one EditorArea!', 'TypeError');
  410.         }
  412.         if (typeof CKEDITOR === 'object') {
  413.             CKEDITOR.instances[EditorID].focus();
  414.         }
  415.         else {
  416.             $EditorArea.focus();
  417.         }
  418.     };
  420.     Core.Init.RegisterNamespace(TargetNS, 'APP_MODULE');
  422.     return TargetNS;
  423. }(Core.UI.RichTextEditor || {}));

^ Use Elevator