如何在页面标记中定义自定义ckeditor工具栏

时间:2013-10-16 13:23:07

标签: asp.net webforms ckeditor

我可以使用页面标记中的ToolbarBasic属性为asp.net中的ckeditor控件定义自定义工具栏。我是这样做的:

<CKEditor:CKEditorControl ID="CKEditor1" BasePath="/ckeditor/" runat="server" Width="100%" Toolbar="Basic"
ToolbarBasic="|Bold|Italic|Underline|Strike|-|NumberedList|BulletedList|Outdent|Indent|-|JustifyLeft|JustifyCenter|JustifyRight|JustifyBlock|-|Link|Unlink|-|TextColor|-|Undo|Redo|Cut|Copy|Paste|PasteText|PasteFromWord|-|Find|Replace|SelectAll|-|Image|Table|HorizontalRule|SpecialChar|-|Format|" ></CKEditor:CKEditorControl>

这会创建一个自定义工具栏,其中所有指定的项目都位于同一“部分”中,即它们是组合在一起的。哪里有| - |如果指定,则会在项目之间创建一条小垂直线,但这些项目仍保留在同一“部分”中。我可以看到,当使用标准的“完整”工具栏时,项目被分成多个部分,但我不知道如何使用上述语法来做到这一点。

不幸的是,我不记得我最初在网上找到这种语法的地方,并且是从我的一个旧项目中获取的。现在我无法在线找到有关此语法的任何信息,所有搜索都提供了有关以不同方式定义自定义工具栏的信息。

我使用的ckeditor版本是3.6.6.1。

3 个答案:

答案 0 :(得分:5)

您可能在此处找到了原始语法:http://docs.cksource.com/CKEditor_3.x/Developers_Guide/ASP.NET/Configuration

要回答您的问题,新行会创建一个新部分,并且/会将按钮放在下一行。

使用您的示例:

<CKEditor:CKEditorControl ID="CKEditor1" BasePath="/ckeditor/" runat="server" Width="100%" Toolbar="Basic"
ToolbarBasic="|Bold|Italic|Underline|Strike|-|NumberedList|BulletedList|Outdent|Indent|-|JustifyLeft|JustifyCenter|JustifyRight|JustifyBlock|
|Link|Unlink|-|TextColor|-|Undo|Redo|Cut|Copy|Paste|PasteText|PasteFromWord|
/
|Find|Replace|SelectAll|-|Image|Table|HorizontalRule|SpecialChar|-|Format|" ></CKEditor:CKEditorControl>

这会在JustifyBlockLink之间添加一个区间差距,并在PasteFromWord之后将按钮移至第二行。

您也可以在ToolbarBasic中设置该文字,如果需要,可以直接在Toolbar属性中设置。

答案 1 :(得分:0)

CKEditor工具栏可根据您的需要进行调整。您可以使用以下代码定义包含完整工具栏定义中可用的所有按钮的工具栏:

                                    <CKEditor:CKEditorControl ID="CKEdMainPageDescriptionWebsiteMobileappEn" BasePath="ckeditor/" runat="server" Width="100%" Toolbar="Basic"
                                        ToolbarBasic="|Bold|Italic|Underline|Strike|-|NumberedList|BulletedList|Outdent|Indent|-|JustifyLeft|JustifyCenter|JustifyRight|JustifyBlock|
                                        |Link|Unlink|-|TextColor|-|Undo|Redo|Cut|Copy|Paste|PasteText|PasteFromWord|
                                          /
                                        |Styles|-|Format|-|Font|-|FontSize|"> </CKEditor:CKEditorControl>

http://thecallingtree.com/ToolbarDefine.aspx

答案 2 :(得分:0)

我希望在此处进行编辑,内容如下:\ Scripts \ ckeditor \ config.js

/*
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
    config.removePlugins = 'save';
};