使用 execCommand 应用字体大小答案

【问题标题】：apply font size using execCommand使用 execCommand 应用字体大小
【发布时间】：2010-05-04 17:26:30
【问题描述】：

var wgetFrame = window.frames[0] wframeDoc = wgetFrame.document;

editor.focus();
editor.execCommand('bold');
wframeDoc.execCommand('forecolor',false,'#00ff00');
wframeDoc.execCommand('JustifyCenter', false, null);
wframeDoc.execCommand('fontsize', false, 15);

（我在CKEditor中使用上面的代码作为插件）

bold、forecolor 和 JustifyCenter，它们都正确显示，选中的文本被 span 元素包裹

但是当应用 fontsize 命令时，被选中的会进入字体元素内部，我知道这是正确的，但它需要在 span 元素内

我需要知道为什么粗体、前景色和 JustifyCenter 被 span 和 fontsize 包裹而不是！！

如果还有其他方法可以应用这种样式

（ps：我在初始化ckeditor时运行这些命令，即使editort不包含任何文本，当你编写时应用定义的样式）

CKEDITOR.editorConfig = function(config) {
CKEDITOR.addStylesSet('customStyles',
[
    { name: 'Header 1', element: 'h1' },
    { name: 'Header 2', element: 'h2' },
    { name: 'Header 3', element: 'h3' },
    { name: 'Text', element: 'p' },
    { name: 'Left Align', element: 'img', attributes: { 'class': 'ImageLeft'} },
    { name: 'Right Align', element: 'img', attributes: { 'class': 'ImageRight'} }
]);

};

我可以应用 editor.execCommand("Header 1"); ??

【问题讨论】：

标签： fonts ckeditor

【解决方案1】：

来自

onClick : function( value ) {
    editor.focus();
    editor.fire( 'saveSnapshot' );

    var style = styles[ value ];

    if ( this.getValue() == value )
        style.remove( editor.document );
    else
        style.apply( editor.document );

    editor.fire( 'saveSnapshot' );
}

在 _source\plugins\font\plugin.js 中我能够找到一种方法来做到这一点，但它似乎有点长

editor.focus();
editor.fire('saveSnapshot');

var styles = new CKEDITOR.style({
    element     : 'span',
    styles      : { 'font-size' : '#(size)' },
    overrides   : [ { element : 'font', attributes : { 'size' : null } } ]
}, {size: '72px'});

styles.apply( editor.document );
editor.fire('saveSnapshot');

我现在遇到的问题是编辑器焦点，当您午餐编辑器时，您会看到应用的字体大小，但是如果您单击编辑器外部的元素并返回，光标离开 span style="72px"并创建一个新的P元素

【讨论】：