CODEWITHSUNDEEP
javascripttextboxtext-editorniceditrich-text-editor
King Pangilinan
King Pangilinan

Reputation: 597

NicEditor font size mody from <font size='1'> tag to <span style='font-size: 8px'>

Hi I am using NicEditor and I want the font size work in defferent way bec. rightnow the editor uses the:

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

I wan't it to become a span tag i.e.

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

Here is the code for the dropdown:

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

but I can not find the code to modify so that it will replace the font into a span tag inside the textarea.

Any suggestions are very welcome.

Thank you

Upvotes: 2

Views: 2597

Answers (1)

Sandbox
Sandbox

Reputation: 181

Know this is an old question but should anyone else need the answer here it is.

Note this is very basic and could do with improving, for example it'll create nested 's.

Anyway, add this JS code before you initialise your nicEditor, create a custom plugin:

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);

Then use fontCustomSize when you create your editor, eg:

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

Upvotes: 4

Related Questions