使用javascript更改fontsize

时间:2015-04-26 07:49:53

标签: javascript html css fonts

下面的代码将<font size="x">$text</font>添加到WYSIWYG编辑器的textarea:

/**
* Set Size Context
*/
this.set_size_context = function(sizestate)
{
    if (this.buttons['fontsize'])
    {
        if (typeof sizestate == 'undefined')
        {
            sizestate = this.editdoc.queryCommandValue('fontsize');
        }
        switch (sizestate)
        {
            case null:
            case '':
            {
                if (is_moz)
                {
                    sizestate = this.translate_fontsize(this.editdoc.body.style.fontSize);
                }
            }
            break;
        }
        if (sizestate != this.sizestate)
        {
            this.sizestate = sizestate;
            var i;

            if (this.popupmode)
            {
                for (i in this.sizeoptions)
                {
                    if (YAHOO.lang.hasOwnProperty(this.sizeoptions, i))
                    {
                        this.sizeoptions[i].style.display = (i == this.sizestate ? '' : 'none');
                    }
                }
            }
            else
            {
                for (i = 0; i < this.buttons['fontsize'].options.length; i++)
                {
                    if (this.buttons['fontsize'].options[i].value == this.sizestate)
                    {
                        this.buttons['fontsize'].selectedIndex = i;
                        break;
                    }
                }
            }
        }
    }
};

我在PHP端使用<font size标记替换了<span style="font-size标记,并且除了fontsize下拉菜单外,everthing正在工作,当我从列表中选择字体大小时,编辑器仍在添加<font size 。 (在发布或预览邮件时,它已正确转换为<span style="font-size)。

问题是,上面的代码如何生成<font size代码,如何将其替换为<span style="font-size

以下是JS中fontsize的其他相关部分:

this.build_fontsize_popup = function(obj, menu)
{
    for (var n in sizeoptions)
    {
        if (YAHOO.lang.hasOwnProperty(sizeoptions, n))
        {
            var option = document.createElement('div');
            option.innerHTML = '<span style="font-size:' + sizeoptions[n] + '">' + sizeoptions[n] + '</span>'; 
            option.className = 'osize';
            option.style.textAlign = 'center';
            option.title = sizeoptions[n];
            option.cmd = obj.cmd;
            option.controlkey = obj.id;
            option.editorid = this.editorid;
            option.onmouseover = option.onmouseout = option.onmouseup = option.onmousedown = vB_Text_Editor_Events.prototype.menuoption_onmouseevent;
            option.onclick = vB_Text_Editor_Events.prototype.formatting_option_onclick;
            menu.appendChild(option);
        }
    }
}

this.translate_fontsize = function(csssize)
{
    switch (csssize)
    {
        case '15px':
        case '12px': return 1;
        case '15px': return 2;
        case '18px': return 3;
        case '21px': return 4;
        case '24px': return 5;
        case '27px': return 6;
        case '30px': return 7;
        default:     return '';
    }
}

以下是完整的JS文件:https://jsfiddle.net/07ttt9a7/

1 个答案:

答案 0 :(得分:1)

尽管完整代码涉及,但您需要修复

case 'fontname':
            {
                this.wrap_tags('font', argument);
                return;
            }

使用'span'代替'font'

修改以

开头的功能
this.wrap_tags = function(tagname, useoption, selection)
{