From ef211a76aede33136416d50b6c636de7bff3fbed Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sun, 6 Feb 2022 21:17:08 +0000 Subject: [PATCH] Made WYSIWYG editor translatable - Created new translation file for editor view. - Added simple logic to format for tinymce. - Aligned some of the custom labels we were using. --- resources/js/components/wysiwyg-editor.js | 4 +- resources/js/wysiwyg/config.js | 17 ++- resources/js/wysiwyg/plugin-codeeditor.js | 2 +- resources/js/wysiwyg/plugin-drawio.js | 4 +- resources/js/wysiwyg/plugins-customhr.js | 11 +- resources/js/wysiwyg/plugins-imagemanager.js | 4 +- resources/lang/en/editor.php | 133 ++++++++++++++++++ .../pages/parts/editor-translations.blade.php | 11 ++ .../pages/parts/wysiwyg-editor.blade.php | 5 +- 9 files changed, 169 insertions(+), 22 deletions(-) create mode 100644 resources/lang/en/editor.php create mode 100644 resources/views/pages/parts/editor-translations.blade.php diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js index f6ecb368a..446f2ca49 100644 --- a/resources/js/components/wysiwyg-editor.js +++ b/resources/js/components/wysiwyg-editor.js @@ -10,6 +10,7 @@ class WysiwygEditor { this.isDarkMode = document.documentElement.classList.contains('dark-mode'); this.tinyMceConfig = buildEditorConfig({ + language: this.$opts.language, containerElement: this.elem, darkMode: this.isDarkMode, textDirection: this.textDirection, @@ -18,7 +19,8 @@ class WysiwygEditor { translations: { imageUploadErrorText: this.$opts.imageUploadErrorText, serverUploadLimitText: this.$opts.serverUploadLimitText, - } + }, + translationMap: window.editor_translations, }); window.$events.emitPublic(this.elem, 'editor-tinymce::pre-init', {config: this.tinyMceConfig}); diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js index e1f2fb6e5..1594646d8 100644 --- a/resources/js/wysiwyg/config.js +++ b/resources/js/wysiwyg/config.js @@ -9,16 +9,16 @@ import {getPlugin as getCustomhrPlugin} from "./plugins-customhr"; import {getPlugin as getImagemanagerPlugin} from "./plugins-imagemanager"; const style_formats = [ - {title: "Header Large", format: "h2", preview: 'color: blue;'}, - {title: "Header Medium", format: "h3"}, - {title: "Header Small", format: "h4"}, - {title: "Header Tiny", format: "h5"}, + {title: "Large Header", format: "h2", preview: 'color: blue;'}, + {title: "Medium Header", format: "h3"}, + {title: "Small Header", format: "h4"}, + {title: "Tiny Header", format: "h5"}, {title: "Paragraph", format: "p", exact: true, classes: ''}, {title: "Blockquote", format: "blockquote"}, {title: "Inline Code", inline: "code"}, { title: "Callouts", items: [ - {title: "Info", format: 'calloutinfo'}, + {title: "Information", format: 'calloutinfo'}, {title: "Success", format: 'calloutsuccess'}, {title: "Warning", format: 'calloutwarning'}, {title: "Danger", format: 'calloutdanger'} @@ -174,6 +174,10 @@ function getSetupCallback(options) { */ export function build(options) { + // Set language + window.tinymce.addI18n(options.language, options.translationMap); + + // Return config object return { width: '100%', height: '100%', @@ -186,6 +190,7 @@ export function build(options) { body_class: 'page-content', browser_spellcheck: true, relative_urls: false, + language: options.language, directionality: options.textDirection, remove_script_host: false, document_base_url: window.baseUrl('/'), @@ -224,9 +229,11 @@ export function build(options) { /** * @typedef {Object} WysiwygConfigOptions * @property {Element} containerElement + * @property {string} language * @property {boolean} darkMode * @property {string} textDirection * @property {string} drawioUrl * @property {int} pageId * @property {Object} translations + * @property {Object} translationMap */ \ No newline at end of file diff --git a/resources/js/wysiwyg/plugin-codeeditor.js b/resources/js/wysiwyg/plugin-codeeditor.js index 97bfebf9a..92781f024 100644 --- a/resources/js/wysiwyg/plugin-codeeditor.js +++ b/resources/js/wysiwyg/plugin-codeeditor.js @@ -69,7 +69,7 @@ function register(editor, url) { editor.ui.registry.addIcon('codeblock', '') editor.ui.registry.addButton('codeeditor', { - title: 'Insert code block', + tooltip: 'Insert code block', icon: 'codeblock', onAction() { editor.execCommand('codeeditor'); diff --git a/resources/js/wysiwyg/plugin-drawio.js b/resources/js/wysiwyg/plugin-drawio.js index b6b768c0a..6b0167a70 100644 --- a/resources/js/wysiwyg/plugin-drawio.js +++ b/resources/js/wysiwyg/plugin-drawio.js @@ -102,7 +102,7 @@ export function getPlugin(providedOptions) { editor.ui.registry.addIcon('diagram', ``) editor.ui.registry.addSplitButton('drawio', { - tooltip: 'Drawing', + tooltip: 'Insert/edit drawing', icon: 'diagram', onAction() { editor.execCommand('drawio'); @@ -111,7 +111,7 @@ export function getPlugin(providedOptions) { callback([ { type: 'choiceitem', - text: 'Drawing Manager', + text: 'Drawing manager', value: 'drawing-manager', } ]); diff --git a/resources/js/wysiwyg/plugins-customhr.js b/resources/js/wysiwyg/plugins-customhr.js index 0744f113f..d484284ca 100644 --- a/resources/js/wysiwyg/plugins-customhr.js +++ b/resources/js/wysiwyg/plugins-customhr.js @@ -12,16 +12,7 @@ function register(editor, url) { editor.ui.registry.addButton('hr', { icon: 'horizontal-rule', - tooltip: 'Horizontal line', - onAction() { - editor.execCommand('InsertHorizontalRule'); - } - }); - - editor.ui.registry.addMenuItem('hr', { - icon: 'horizontal-rule', - text: 'Horizontal line', - context: 'insert', + tooltip: 'Insert horizontal line', onAction() { editor.execCommand('InsertHorizontalRule'); } diff --git a/resources/js/wysiwyg/plugins-imagemanager.js b/resources/js/wysiwyg/plugins-imagemanager.js index d3b03e38c..225f271fd 100644 --- a/resources/js/wysiwyg/plugins-imagemanager.js +++ b/resources/js/wysiwyg/plugins-imagemanager.js @@ -6,9 +6,9 @@ function register(editor, url) { // Custom Image picker button editor.ui.registry.addButton('imagemanager-insert', { - title: 'Insert an image', + title: 'Insert image', icon: 'image', - tooltip: 'Insert an image', + tooltip: 'Insert image', onAction() { window.ImageManager.show(function (image) { const imageUrl = image.thumbs.display || image.url; diff --git a/resources/lang/en/editor.php b/resources/lang/en/editor.php new file mode 100644 index 000000000..83e8f4313 --- /dev/null +++ b/resources/lang/en/editor.php @@ -0,0 +1,133 @@ + 'General', + 'advanced' => 'Advanced', + 'none' => 'None', + 'cancel' => 'Cancel', + 'save' => 'Save', + 'close' => 'Close', + 'undo' => 'Undo', + 'redo' => 'Redo', + 'left' => 'Left', + 'center' => 'Center', + 'right' => 'Right', + 'top' => 'Top', + 'middle' => 'Middle', + 'bottom' => 'Bottom', + 'width' => 'Width', + 'height' => 'Height', + + // Toolbar + 'formats' => 'Formats', + 'header_large' => 'Large Header', + 'header_medium' => 'Medium Header', + 'header_small' => 'Small Header', + 'header_tiny' => 'Tiny Header', + 'paragraph' => 'Paragraph', + 'blockquote' => 'Blockquote', + 'inline_code' => 'Inline Code', + 'callouts' => 'Callouts', + 'callout_information' => 'Information', + 'callout_success' => 'Success', + 'callout_warning' => 'Warning', + 'callout_danger' => 'Danger', + 'bold' => 'Bold', + 'italic' => 'Italic', + 'underline' => 'Underline', + 'strikethrough' => 'Strikethrough', + 'superscript' => 'Superscript', + 'subscript' => 'Subscript', + 'text_color' => 'Text color', + 'custom_color' => 'Custom color', + 'remove_color' => 'Remove color', + 'background_color' => 'Background color', + 'align_left' => 'Align left', + 'align_center' => 'Align center', + 'align_right' => 'Align right', + 'align_justify' => 'Align justify', + 'list_bullet' => 'Bullet list', + 'list_numbered' => 'Numbered list', + 'indent_increase' => 'Increase indent', + 'indent_decrease' => 'Decrease indent', + 'table' => 'Table', + 'insert_image' => 'Insert image', + 'insert_image_title' => 'Insert/Edit Image', + 'insert_link' => 'Insert/edit link', + 'insert_link_title' => 'Insert/Edit Link', + 'insert_horizontal_line' => 'Insert horizontal line', + 'insert_code_block' => 'Insert code block', + 'insert_drawing' => 'Insert/edit drawing', + 'drawing_manager' => 'Drawing manager', + 'insert_media' => 'Insert/edit media', + 'insert_media_title' => 'Insert/Edit Media', + 'clear_formatting' => 'Clear formatting', + 'source_code' => 'Source code', + 'source_code_title' => 'Source Code', + 'fullscreen' => 'Fullscreen', + 'image_options' => 'Image options', + + // Tables + 'table_properties' => 'Table properties', + 'table_properties_title' => 'Table Properties', + 'delete_table' => 'Delete table', + 'insert_row_before' => 'Insert row before', + 'insert_row_after' => 'Insert row after', + 'delete_row' => 'Delete row', + 'insert_column_before' => 'Insert column before', + 'insert_column_after' => 'Insert column after', + 'delete_column' => 'Delete column', + 'table_cell' => 'Cell', + 'table_row' => 'Row', + 'table_column' => 'Column', + 'cell_properties' => 'Cell properties', + 'cell_properties_title' => 'Cell Properties', + 'cell_type' => 'Cell type', + 'cell_type_cell' => 'Cell', + 'cell_type_header' => 'Header cell', + 'table_row_group' => 'Row Group', + 'table_column_group' => 'Column Group', + 'horizontal_align' => 'Horizontal align', + 'vertical_align' => 'Vertical align', + 'border_width' => 'Border width', + 'border_style' => 'Border style', + 'border_color' => 'Border color', + 'row_properties' => 'Row properties', + 'row_properties_title' => 'Row Properties', + 'cut_row' => 'Cut row', + 'copy_row' => 'Copy row', + 'paste_row_before' => 'Paste row before', + 'paste_row_after' => 'Paste row after', + 'row_type' => 'Row type', + 'row_type_header' => 'Header', + 'row_type_body' => 'Body', + 'row_type_footer' => 'Footer', + 'alignment' => 'Alignment', + 'cut_column' => 'Cut column', + 'copy_column' => 'Copy column', + 'paste_column_before' => 'Paste column before', + 'paste_column_after' => 'Paste column after', + 'cell_padding' => 'Cell padding', + 'cell_spacing' => 'Cell spacing', + 'caption' => 'Caption', + 'show_caption' => 'Show caption', + 'constrain' => 'Constrain proportions', + + // Images, links & embed + 'source' => 'Source', + 'alt_desc' => 'Alternative description', + 'embed' => 'Embed', + 'paste_embed' => 'Paste your embed code below:', + 'url' => 'URL', + 'text_to_display' => 'Text to display', + 'title' => 'Title', + 'open_link' => 'Open link in...', + 'open_link_current' => 'Current window', + 'open_link_new' => 'New window', +]; diff --git a/resources/views/pages/parts/editor-translations.blade.php b/resources/views/pages/parts/editor-translations.blade.php new file mode 100644 index 000000000..7b0ea7da7 --- /dev/null +++ b/resources/views/pages/parts/editor-translations.blade.php @@ -0,0 +1,11 @@ +@php + $en = trans('editor', [], 'en'); + $lang = trans('editor'); + $mergedText = []; + foreach ($en as $key => $value) { + $mergedText[$value] = $lang[$key] ?? $value; + } +@endphp + \ No newline at end of file diff --git a/resources/views/pages/parts/wysiwyg-editor.blade.php b/resources/views/pages/parts/wysiwyg-editor.blade.php index 02948fa2e..29a4b6532 100644 --- a/resources/views/pages/parts/wysiwyg-editor.blade.php +++ b/resources/views/pages/parts/wysiwyg-editor.blade.php @@ -1,4 +1,5 @@
has('html'))
{{ $errors->first('html') }}
-@endif \ No newline at end of file +@endif + +@include('pages.parts.editor-translations') \ No newline at end of file