当前位置：文江博客话题详情

通过 JavaScript 从 CKEditor 中的样式框中分配一些样式

发布于 2024-11-06 02:48:53 字数 213 浏览 4 评论 0原文

如何通过 JS 模拟用户从样式框中选择某种样式？我想放一些快捷按钮，一键分配一些流行的样式。

编辑：

我不在乎它是编辑器内按钮还是外部按钮。
我不想要 css-style 分配；我想要 CKEditor 风格 分配（样式框的分配）。

原文

分享到QQ

分享到微博

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

发布评论

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

倾听心声的旋律 2024-11-13 02:48:53

我没有使用过 CKEditor，但是，我看到你的问题并想“弄清楚这会很有趣。”好吧，这就是我的想法：（

是的，我发现了糟糕的文档，但是，这不是重点……不过，我会给他们评论代码的道具。）

///
// function to add buttons that trigger styles to be applied.
//
// editor - CKEDITOR - instance of editor you want command attached to.
// buttonName - String - name of the button
// buttonLabel - String - humane readable name of the button
// commandName - String - name of command, the way to call this command from CKEDITOR.execCommand()
// styleDefinition - StyleDefinition - obj defining the style you would like to apply when this command is called.
///

var addButtonCommand = function( editor, buttonName, buttonLabel, commandName, styleDefiniton )
{
    var style = new CKEDITOR.style( styleDefiniton );
    editor.attachStyleStateChange( style, function( state )
        {
            !editor.readOnly && editor.getCommand( commandName ).setState( state );
        });
    editor.addCommand( commandName, new CKEDITOR.styleCommand( style ) );
    editor.ui.addButton( buttonName,
        {
            label : buttonLabel,

            command : commandName
            //adding an icon here should display the button on the toolbar.
            //icon : "path to img",
        });
};

//Get the editor instance you want to use.  Normally the same as the ID of the textarea CKEditor binds to.
var editor1 = CKEDITOR.instances.editor1;

//If you look at ckeditor/_source/plugins/styles/default.js you will see that this selects the first element.  That list is read into the array 'default'.
var blueTitleStyle = CKEDITOR.stylesSet.registered.default[0];

//Or, you can define the style like this: See http://dev.ckeditor.com/wiki/Components/Styles for more info on style definitions.
var blueTitleStyle = { 
    name : 'Blue Title',
    element : 'h3',
    styles : { 'color' : 'Blue' }
};

addButtonCommand(editor1, 'BlueTitle', 'BlueTitle', 'bluetitle', blueTitleStyle);

这是一个 Javascript 函数来帮助您的点击事件：

//function used to execute the command.  Only used for calling the command when not calling from a button. (Like an A with an onClick bound to it.)
    //pulled this function right out of the api.html example in the ckeditor/_samples dir.
    function ExecuteCommand( commandName )
    {
        // Get the editor instance that we want to interact with.
        var oEditor = CKEDITOR.instances.editor1;

        // Check the active editing mode.
        if ( oEditor.mode == 'wysiwyg' )
        {
            // Execute the command.
            // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#execCommand
            oEditor.execCommand( commandName );
        }
        else
        {
            alert( 'You must be in WYSIWYG mode!' );
        }
    }

现在，您可以创建一个像这样的链接：

<a href='#' class='setBlueTitle'>Set Blue Title</a>

并使用一些 jQuery 来增加它的趣味性：

 <script type="text/javascript">
            $(document).ready(function(){
                $(".setBlueTitle").onClick(function(e){
                    //stops the click from changing the page and whatever other default action would happen.
                    e.preventDefault();

                    ExecuteCommand('bluetitle');
                });
            });
        </script>

我对按钮图标部分不是 100% 确定。我没有图标可以尝试。但是，根据一些帖子，它应该可以正常工作。无论如何，jQuery 单击绑定有效。

应该差不多就是这样了！我必须进行大量的挖掘才能弄清楚这一点，但看到它起作用确实令人满意！

I haven't used CKEditor, but, I saw your question and thought "That would be fun to figure out." Well, here is what I figured out:

(yes, I found terrible documentation, but, that's not the point...I will give them props for commenting their code, though.)

///
// function to add buttons that trigger styles to be applied.
//
// editor - CKEDITOR - instance of editor you want command attached to.
// buttonName - String - name of the button
// buttonLabel - String - humane readable name of the button
// commandName - String - name of command, the way to call this command from CKEDITOR.execCommand()
// styleDefinition - StyleDefinition - obj defining the style you would like to apply when this command is called.
///

var addButtonCommand = function( editor, buttonName, buttonLabel, commandName, styleDefiniton )
{
    var style = new CKEDITOR.style( styleDefiniton );
    editor.attachStyleStateChange( style, function( state )
        {
            !editor.readOnly && editor.getCommand( commandName ).setState( state );
        });
    editor.addCommand( commandName, new CKEDITOR.styleCommand( style ) );
    editor.ui.addButton( buttonName,
        {
            label : buttonLabel,

            command : commandName
            //adding an icon here should display the button on the toolbar.
            //icon : "path to img",
        });
};

//Get the editor instance you want to use.  Normally the same as the ID of the textarea CKEditor binds to.
var editor1 = CKEDITOR.instances.editor1;

//If you look at ckeditor/_source/plugins/styles/default.js you will see that this selects the first element.  That list is read into the array 'default'.
var blueTitleStyle = CKEDITOR.stylesSet.registered.default[0];

//Or, you can define the style like this: See http://dev.ckeditor.com/wiki/Components/Styles for more info on style definitions.
var blueTitleStyle = { 
    name : 'Blue Title',
    element : 'h3',
    styles : { 'color' : 'Blue' }
};

addButtonCommand(editor1, 'BlueTitle', 'BlueTitle', 'bluetitle', blueTitleStyle);

Here is a Javascript function to aid your click events:

//function used to execute the command.  Only used for calling the command when not calling from a button. (Like an A with an onClick bound to it.)
    //pulled this function right out of the api.html example in the ckeditor/_samples dir.
    function ExecuteCommand( commandName )
    {
        // Get the editor instance that we want to interact with.
        var oEditor = CKEDITOR.instances.editor1;

        // Check the active editing mode.
        if ( oEditor.mode == 'wysiwyg' )
        {
            // Execute the command.
            // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#execCommand
            oEditor.execCommand( commandName );
        }
        else
        {
            alert( 'You must be in WYSIWYG mode!' );
        }
    }

Now, you can create a link like this:

<a href='#' class='setBlueTitle'>Set Blue Title</a>

and use a bit of jQuery to spice it up:

 <script type="text/javascript">
            $(document).ready(function(){
                $(".setBlueTitle").onClick(function(e){
                    //stops the click from changing the page and whatever other default action would happen.
                    e.preventDefault();

                    ExecuteCommand('bluetitle');
                });
            });
        </script>

I am not 100% sure about the button icon part. I didn't have an icon to try it with. But, according to a few posts, it should work fine. Regardless, the jQuery click binding works.

That should be pretty much it! I had to do quite a bit of digging around to figure this out, but it certainly is satisfying to see it work!

回复收藏 0 原文

甜味超标? 2024-11-13 02:48:53

这里有一个选项：

首先，您可以设置想要在 CSS 类中尝试的所需样式。然后，您可以在单击该按钮时设置测试 div 的 className。这是一个简单的示例：

test.css:

.bold {
   font-weight: bold; 
}

.italic {
   font-style: italic; 
}

test.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
    <input type="button" onclick="document.getElementById('testStyleDiv').className='bold'" value="bold"/>
    <input type="button" onclick="document.getElementById('testStyleDiv').className='italic'" value="italic"/>

    <div id="testStyleDiv">foo</div>
</body>
</html>

Here's one option

First, you can setup the desired styles you want to try out in a CSS class. Then, you can set the className for the test div when you click that button. Here's a simple example:

test.css:

.bold {
   font-weight: bold; 
}

.italic {
   font-style: italic; 
}

test.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
    <input type="button" onclick="document.getElementById('testStyleDiv').className='bold'" value="bold"/>
    <input type="button" onclick="document.getElementById('testStyleDiv').className='italic'" value="italic"/>

    <div id="testStyleDiv">foo</div>
</body>
</html>

回复收藏 0 原文

~没有更多了~