에디터 글꼴 크기 커스터마이징

e_lib/trumbowyg/trumbowyg.fontsize.css

@@ -0,0 +1,27 @@
+.trumbowyg-fontsize_24pt-dropdown-button{
+    min-height:25pt;
+}
+
+.trumbowyg-fontsize_28pt-dropdown-button{
+    min-height:29pt;
+}
+
+.trumbowyg-fontsize_32pt-dropdown-button{
+    min-height:33pt;
+}
+
+.trumbowyg-fontsize_40pt-dropdown-button{
+    min-height:41pt;
+}
+
+.trumbowyg-fontsize_46pt-dropdown-button{
+    min-height:47pt;
+}
+
+.trumbowyg-fontsize_52pt-dropdown-button{
+    min-height:53pt;
+}
+
+.trumbowyg-fontsize_60pt-dropdown-button{
+    min-height:61pt;
+}

e_lib/trumbowyg/trumbowyg.fontsize.js

@@ -0,0 +1,107 @@
+(function ($) {
+    'use strict';
+
+    $.extend(true, $.trumbowyg, {
+        langs: {
+            // jshint camelcase:false
+            en: {
+                fontsize: 'Font size',
+                fontsizes: {
+                    'x-small': 'Extra small',
+                    'small': 'Small',
+                    'medium': 'Regular',
+                    'large': 'Large',
+                    'x-large': 'Extra large',
+                    'custom': 'Custom'
+                }
+            },
+            ko: {
+                fontsize: '글자 크기',
+                fontsizes: {
+                    'custom': '사용자 정의'
+                }
+            },
+        }
+    });
+    // jshint camelcase:true
+
+    // Add dropdown with font sizes
+    $.extend(true, $.trumbowyg, {
+        plugins: {
+            fontsize: {
+                init: function (trumbowyg) {
+                    trumbowyg.addBtnDef('fontsize', {
+                        dropdown: buildDropdown(trumbowyg)
+                    });
+                }
+            }
+        }
+    });
+
+    function buildDropdown(trumbowyg) {
+        var dropdown = [];
+        var sizes = [
+            '8pt',
+            '9pt',
+            '10pt',
+            '11pt',
+            '12pt',
+            '14pt',
+            '16pt',
+            '18pt',
+            '20pt',
+            '24pt',
+            '28pt',
+            '32pt',
+            '40pt',
+            '46pt',
+            '52pt',
+            '60pt'
+        ];
+
+        $.each(sizes, function (index, size) {
+            trumbowyg.addBtnDef('fontsize_' + size, {
+                text: '<span style="font-size: ' + size + ';line-height: ' + size + '">' + size + '</span>',
+                hasIcon: false,
+                fn: function () {
+                    trumbowyg.execCmd('fontSize', index + 1, true);
+                }
+            });
+            dropdown.push('fontsize_' + size);
+        });
+
+        var freeSizeButtonName = 'fontsize_custom',
+            freeSizeBtnDef = {
+                fn: function () {
+                    trumbowyg.openModalInsert('Custom Font Size',
+                        {
+                            size: {
+                                label: 'Font Size',
+                                value: '48px'
+                            }
+                        },
+                        function (values) {
+                            var text = trumbowyg.range.startContainer.parentElement;
+                            var selectedText = trumbowyg.getRangeText();
+                            if ($(text).html() === selectedText) {
+                                $(text).css('font-size', values.size);
+                            } else {
+                                trumbowyg.range.deleteContents();
+                                var html = '<span style="font-size: ' + values.size + ';">' + selectedText + '</span>';
+                                var node = $(html)[0];
+                                trumbowyg.range.insertNode(node);
+                            }
+                            trumbowyg.saveRange();
+                            return true;
+                        }
+                    );
+                },
+                text: '<span style="font-size: medium;">' + trumbowyg.lang.fontsizes.custom + '</span>',
+                hasIcon: false
+            };
+        trumbowyg.addBtnDef(freeSizeButtonName, freeSizeBtnDef);
+        dropdown.push(freeSizeButtonName);
+
+        return dropdown;
+    }
+})(jQuery);

hwe/b_dipcenter.php

@@ -56,7 +56,7 @@ var editable = <?=($me['level']>=5?'true':'false')?>;
 <?=WebUtil::printJS('../e_lib/trumbowyg/langs/ko.min.js')?>
 <?=WebUtil::printJS('../e_lib/trumbowyg/plugins/colors/trumbowyg.colors.min.js')?>
 <?=WebUtil::printJS('../e_lib/trumbowyg/plugins/fontfamily/trumbowyg.fontfamily.js')?>
-<?=WebUtil::printJS('../e_lib/trumbowyg/plugins/fontsize/trumbowyg.fontsize.js')?>
+<?=WebUtil::printJS('../e_lib/trumbowyg/trumbowyg.fontsize.js')?>
 
 <?=WebUtil::printJS('../d_shared/common_path.js')?>
 <?=WebUtil::printJS('js/dipcenter.js')?>
@@ -64,6 +64,7 @@ var editable = <?=($me['level']>=5?'true':'false')?>;
 <?=WebUtil::printCSS('../e_lib/bootstrap.min.css')?>
 <?=WebUtil::printCSS('../e_lib/trumbowyg/ui/trumbowyg.min.css')?>
 <?=WebUtil::printCSS('../e_lib/trumbowyg/plugins/colors/ui/trumbowyg.colors.css')?>
+<?=WebUtil::printCSS('../e_lib/trumbowyg/trumbowyg.fontsize.css')?>
 <?=WebUtil::printCSS('../d_shared/common.css')?>
 <?=WebUtil::printCSS('css/common.css')?>
 <?=WebUtil::printCSS('css/dipcenter.css')?>