Switch edit function suggest

[kay54068]

hi @taqueci You are such a very powerful developer ! ! I have some suggest about this:

1. After updating the page, the default editing mode is Visual Editor.
2. Can add some icon to switch edit mode in toolbar , like this:

[taqueci]

Hi @kay54068

Thank you for your suggestion, but I can not accept it. I think toolbar should include only editing operations.

Please implement the buttons into your own fork.

You can add preview button by:

--- a/assets/javascripts/redmine_wysiwyg_editor.js
+++ b/assets/javascripts/redmine_wysiwyg_editor.js
@@ -263,13 +263,23 @@
         editor.execCommand('mceToggleFormat', false, 'code');
       }
     });
+
+    editor.addButton('preview', {
+      type: 'button',
+      icon: 'preview',
+      tooltip: 'Preview',
+      onclick: function() {
+        self._setTextContent();
+        self.changeMode('preview');
+      }
+    });
   };

   var toolbar = (self._format === 'textile') ?
-      'formatselect | bold italic underline strikethrough code forecolor removeformat | link image codesample attachment | bullist numlist blockquote | alignleft aligncenter alignright | indent outdent | hr | table | undo redo' :
+      'formatselect | bold italic underline strikethrough code forecolor removeformat | link image codesample attachment | bullist numlist blockquote | alignleft aligncenter alignright | indent outdent | hr | table | undo redo | preview' :
       self._htmlTagAllowed ?
-      'formatselect | bold italic strikethrough code removeformat | link image codesample attachment | bullist numlist blockquote | alignleft aligncenter alignright | hr | table | undo redo' :
-      'formatselect | bold italic strikethrough code removeformat | link image codesample attachment | bullist numlist blockquote | hr | table | undo redo';
+      'formatselect | bold italic strikethrough code removeformat | link image codesample attachment | bullist numlist blockquote | alignleft aligncenter alignright | hr | table | undo redo | preview' :
+      'formatselect | bold italic strikethrough code removeformat | link image codesample attachment | bullist numlist blockquote | hr | table | undo redo | preview';

   var autocompleteConfig = self._autocompleteIssuePath ? {
     delimiter: ['#', '@'],

For more detail, please see also: https://www.tiny.cloud/docs-4x/api/tinymce/tinymce.editor/#addbutton

[taqueci]

Hi @kay54068

I have improved method changeMode(). You can realize your switch buttons by:

--- a/assets/javascripts/redmine_wysiwyg_editor.js
+++ b/assets/javascripts/redmine_wysiwyg_editor.js
@@ -273,13 +273,31 @@ RedmineWysiwygEditor.prototype._initTinymce = function(setting) {
         editor.execCommand('mceToggleFormat', false, 'code');
       }
     });
+
+    editor.addButton('preview', {
+      type: 'button',
+      icon: 'preview',
+      tooltip: 'Preview',
+      onclick: function() {
+        self.changeMode('preview');
+      }
+    });
+
+    editor.addButton('text', {
+      type: 'button',
+      icon: 'code',
+      tooltip: 'Text',
+      onclick: function() {
+        self.changeMode('text');
+      }
+    });
   };

   var toolbar = (self._format === 'textile') ?
-      'formatselect | bold italic underline strikethrough code forecolor removeformat | link image codesample attachment | bullist numlist blockquote | alignleft aligncenter alignright | indent outdent | hr | table | undo redo' :
+      'formatselect | bold italic underline strikethrough code forecolor removeformat | link image codesample attachment | bullist numlist blockquote | alignleft aligncenter alignright | indent outdent | hr | table | undo redo | preview text' :
       self._htmlTagAllowed ?
-      'formatselect | bold italic strikethrough code removeformat | link image codesample attachment | bullist numlist blockquote | alignleft aligncenter alignright | hr | table | undo redo' :
-      'formatselect | bold italic strikethrough code removeformat | link image codesample attachment | bullist numlist blockquote | hr | table | undo redo';
+      'formatselect | bold italic strikethrough code removeformat | link image codesample attachment | bullist numlist blockquote | alignleft aligncenter alignright | hr | table | undo redo | preview text' :
+      'formatselect | bold italic strikethrough code removeformat | link image codesample attachment | bullist numlist blockquote | hr | table | undo redo | preview text';

   var autocompleteConfig = self._autocompleteIssuePath ? {
     delimiter: ['#', '@'],