使用 execCommand 应用字体大小

发布于 2024-08-31 19:17:18 字数 1103 浏览 1 评论 0原文

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中的插件)

粗体,前景色和JustifyCenter,它们都直接渲染,所选文本由span元素包裹

,但是当应用fontsize命令时,所选文本进入字体元素内部, 我知道这是正确的,但它需要它位于 span 元素内

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

另外,是否有另一种方法来应用此样式

(ps:我在初始化 ckeditor 时运行这些命令,即使编辑器不包含任何文本,当您编写时,应用定义的样式)


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

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

(i use the code above as a plugin in CKEditor)

bold, forecolor and JustifyCenter , they all rend corectly , the selected text is wrapped by a span element

but when applying the fontsize command , the selected goes inside the font element,
i know this is correct, but it need it to be inside a span element

i need to know why bold, forecolor and JustifyCenter are wrapped by span and fontsize not !!

and also if there another way to apply this styles

( ps : i run those commands when ckeditor is initialized, even if the editort doesn't contain any text, when u write the style definied is applied )


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'} }
]);

};

can i apply editor.execCommand( "Header 1" ); ??

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

牛↙奶布丁 2024-09-07 19:17:18

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 元素

from

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

in _source\plugins\font\plugin.js i was able to find a way to do it, but it seem a bit long

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

the problem that i get now , is with editor focus , when you lunch the editor u see the font size applied , but if u click on a element outside the editor and come back , the cursor leave span style="72px" and create a new P element

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文