feat(tinymce): add line height (#58)

* feat：add lineheight

Co-authored-by: fengli <fengli@biaodianyun.com>

src/components/Tinymce/src/Editor.vue

@@ -23,6 +23,7 @@
   import { useScript } from '/@/hooks/web/useScript';
   import { snowUuid } from '/@/utils/uuid';
   import { bindHandlers } from './helper';
+  import LineHeight from './lineHeight';
 
   const CDN_URL = 'https://cdn.bootcdn.net/ajax/libs/tinymce/5.5.1';
 
@@ -69,6 +70,8 @@
           advlist_bullet_styles: 'square',
           advlist_number_styles: 'default',
           object_resizing: false,
+          fontsize_formats: '10px 11px 12px 14px 16px 18px 20px 24px 36px 48px',
+          lineheight_formats: "1 1.5 1.75 2.0 3.0 4.0 5.0",
           ...options,
           setup: (editor: any) => {
             editorRef.value = editor;
@@ -117,6 +120,7 @@
       }
 
       function initEditor() {
+        getTinymce().PluginManager.add('lineHeight', LineHeight(getTinymce()));
         getTinymce().init(unref(initOptions));
       }
 

src/components/Tinymce/src/lineHeight.js

@@ -0,0 +1,44 @@
+const LineHeight = function (e) {
+  e.PluginManager.add('lineheight', function (t, n, r) {
+    t.on('init', function () {
+      t.formatter.register({
+        lineheight: {
+          inline: 'span',
+          styles: {
+            'line-height': '%value',
+          },
+        },
+      });
+    });
+    t.ui.registry.addMenuButton('lineheight', {
+      icon: 'lineheight',
+      tooltip: '设置行高',
+      fetch: function (callback) {
+        var dom = t.dom;
+        var blocks = t.selection.getSelectedBlocks();
+        var lhv = 0;
+        global$1.each(blocks, function (block) {
+          if (lhv == 0) {
+            lhv = dom.getStyle(block, 'line-height') ? dom.getStyle(block, 'line-height') : 0;
+          }
+        });
+        var items = lineheight_val.split(' ').map(function (item) {
+          var text = item;
+          var value = item;
+          return {
+            type: 'togglemenuitem',
+            text: text,
+            active: lhv == value ? true : false,
+            onAction: function () {
+              doAct(value);
+            },
+          };
+        });
+        callback(items);
+      },
+    });
+  });
+  e.PluginManager.requireLangPack('lineheight', 'de');
+};
+
+export default LineHeight;

src/components/Tinymce/src/toolbar.ts

@@ -2,7 +2,7 @@
 // Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
 
 const toolbar = [
-  'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
+  'fontsizeselect lineheight searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
   'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen',
 ];