富文本编辑器字号字体

public/static/manager/wangEditor/wangEditor.min.js

@@ -546,8 +546,38 @@
     var config = {
  
         // 默认菜单配置
-        menus: ['head', 'bold', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote', 'emoticon', 'image', 'table', 'video', 'code', 'undo', 'redo'],
- 
+        menus: ['head', 'bold','fontSize','fontName', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote', 'emoticon', 'image', 'table', 'video', 'code', 'undo', 'redo'],
+        fontNames: ['微软雅黑','黑体', '仿宋', '楷体', '标楷体', '华文仿宋', '华文楷体', '宋体', '微软雅黑', 'Arial', 'Tahoma', 'Verdana'],
+          fontSizes: {
+            'x-small': {
+              name: '10px',
+              value: '1'
+            },
+            small: {
+              name: '13px',
+              value: '2'
+            },
+            normal: {
+              name: '16px',
+              value: '3'
+            },
+            large: {
+              name: '18px',
+              value: '4'
+            },
+            'x-large': {
+              name: '24px',
+              value: '5'
+            },
+            'xx-large': {
+              name: '32px',
+              value: '6'
+            },
+            'xxx-large': {
+              name: '48px',
+              value: '7'
+            }
+          },
         colors: ['#000000', '#eeece0', '#1c487f', '#4d80bf', '#c24f4a', '#8baa4a', '#7b5ba1', '#46acc8', '#f9963b', '#ffffff'],
 
         // // 语言配置
@@ -1349,6 +1379,86 @@
         }
     };
     
+    function FontSize(editor) {
+        var _this = this;
+    
+        this.editor = editor;
+        this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-text-heigh"><i/></div>');
+        this.type = 'droplist';
+    
+        // 当前是否 active 状态
+        this._active = false;
+    
+        // 初始化 droplist
+        this.droplist = new DropList(this, {
+            width: 160,
+            $title: $('<p>字号</p>'),
+            type: 'list', // droplist 以列表形式展示
+            list: [{ $elem: $('<span style="font-size: x-small;">x-small</span>'), value: '1' }, { $elem: $('<span style="font-size: small;">small</span>'), value: '2' }, { $elem: $('<span>normal</span>'), value: '3' }, { $elem: $('<span style="font-size: large;">large</span>'), value: '4' }, { $elem: $('<span style="font-size: x-large;">x-large</span>'), value: '5' }, { $elem: $('<span style="font-size: xx-large;">xx-large</span>'), value: '6' }],
+            onClick: function onClick(value) {
+                // 注意 this 是指向当前的 FontSize 对象
+                _this._command(value);
+            }
+        });
+    }
+    
+    // 原型
+    FontSize.prototype = {
+        constructor: FontSize,
+    
+        // 执行命令
+        _command: function _command(value) {
+            var editor = this.editor;
+            editor.cmd.do('fontSize', value);
+        }
+    };
+    
+    /*
+        menu - fontName
+    */
+    
+    // 构造函数
+    function FontName(editor) {
+        var _this = this;
+    
+        this.editor = editor;
+        this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-font"><i/></div>');
+        this.type = 'droplist';
+    
+        // 当前是否 active 状态
+        this._active = false;
+    
+        // 获取配置的字体
+        var config = editor.config;
+        var fontNames = config.fontNames || [];
+    
+        // 初始化 droplist
+        this.droplist = new DropList(this, {
+            width: 100,
+            $title: $('<p>字体</p>'),
+            type: 'list', // droplist 以列表形式展示
+            list: fontNames.map(function (fontName) {
+                return { $elem: $('<span style="font-family: ' + fontName + ';">' + fontName + '</span>'), value: fontName };
+            }),
+            onClick: function onClick(value) {
+                // 注意 this 是指向当前的 FontName 对象
+                _this._command(value);
+            }
+        });
+    }
+    
+    // 原型
+    FontName.prototype = {
+        constructor: FontName,
+    
+        _command: function _command(value) {
+            var editor = this.editor;
+            editor.cmd.do('fontName', value);
+        }
+    };
+    
+    
+ 
     /*
     menu - link
 */
@@ -2977,6 +3087,10 @@
  
     MenuConstructors.head = Head;
     
+    MenuConstructors.fontSize = FontSize;
+    
+    MenuConstructors.fontName = FontName;
+ 
     MenuConstructors.link = Link;
  
     MenuConstructors.italic = Italic;