diff --git a/src/components/Tinymce/src/Editor.vue b/src/components/Tinymce/src/Editor.vue index 375872e1c639e4b81c1a171d8c64660e0cb6a2b3..d2303e2d769faf66d0b139e83f97420bd7a52aec 100644 --- a/src/components/Tinymce/src/Editor.vue +++ b/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)); } diff --git a/src/components/Tinymce/src/lineHeight.js b/src/components/Tinymce/src/lineHeight.js new file mode 100644 index 0000000000000000000000000000000000000000..1d8104f7bdfca41536366749f4c407d776dbf33d --- /dev/null +++ b/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; diff --git a/src/components/Tinymce/src/toolbar.ts b/src/components/Tinymce/src/toolbar.ts index 367dad72493653ad2cdc1324cdc2ea197e0cab2b..96eb98fdb80e6b21edc630764fc22c1851b17c51 100644 --- a/src/components/Tinymce/src/toolbar.ts +++ b/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', ];