javascript - NicEditor 字体大小从 标签到

Question

您好，我正在使用 NicEditor，我希望字体大小以不同的方式工作。现在编辑器使用:

<font size='1...7'>the selected text here</font>

我不希望它成为一个 span 标签，即

<span style='font-size:30px'>the selected text here</span>

这是下拉列表的代码:

var nicEditorFontSizeSelect = nicEditorSelect.extend({
    sel : {1 : '1 (8pt)', 2 : '2 (10pt)', 3 : '3 (12pt)', 4 : '4 (14pt)', 5 : '5 (18pt)', 6 : '6 (24pt)', 7 : '7 (36pt)', 8 : '8 (48pt)', 9 : '9 (72pt)', 10 : '10 90pt)', 11 : '11 (100pt)'},
    init : function() {
        this.setDisplay('Font Size...');
        for(itm in this.sel) {
            this.add(itm,'<font size="'+itm+'">'+this.sel[itm]+'</font>');
        }       
    }
});

但我找不到要修改的代码以替换 font进入span文本区域内的标记。

非常欢迎任何建议。

谢谢

Answer 1

知道这是一个老问题，但如果其他人需要这里的答案。

请注意，这是非常基本的，可以进行改进，例如，它将创建嵌套的。

无论如何，在初始化 nicEditor 之前添加此 JS 代码，创建自定义插件:

var nicSelectOptionsCustomFormat = {
    buttons : {
        'fontCustomSize' : {name : __('Font size'), type : 'nicEditorCustomFormatSelect'}
    }
};
var nicEditorCustomFormatSelect = nicEditorSelect.extend({
    sel : {'11px' : '11px', '13px' : '13px', '15px' : '15px', '19px' : '19px', '22px' : '22px'},

    init : function() {
        this.setDisplay('Font size');
        for(itm in this.sel) {
            this.add(itm,'<span style="size:'+itm+'">'+this.sel[itm]+'</span>');
        }
    }

    ,update : function(elm) {
        var newNode = document.createElement('span');
        newNode.style.fontSize = elm;
        var rng = this.ne.selectedInstance.getRng().surroundContents(newNode);
        this.close();
    }
});
nicEditors.registerPlugin(nicPlugin,nicSelectOptionsCustomFormat);

然后在创建编辑器时使用fontCustomSize，例如:

var config = {
    buttonList: ["bold", "italic", "underline","fontCustomSize"]
};
var e = new nicEditor(config);
e.panelInstance("page-description");