Ckeditor 如何使用基本工具栏显示编辑器

Ckeditor 如何使用基本工具栏显示编辑器,ckeditor,Ckeditor,我正在使用class=ckeditor的方式在我的网页中显示一个ckeditor。如何配置ckeditor以仅显示基本工具栏。在这里,我找到了显示基本工具栏的示例页面,但没有从文档中获得如何显示该工具栏的信息 检查“自定义工具栏”选项卡并查看第一个示例,它有一个非常基本的工具栏类型,如何显示它 这是我的密码 <body> <textarea class="ckeditor" id="description" rows="5" cols="15"></text

我正在使用class=ckeditor的方式在我的网页中显示一个ckeditor。如何配置ckeditor以仅显示基本工具栏。在这里,我找到了显示基本工具栏的示例页面,但没有从文档中获得如何显示该工具栏的信息

检查“自定义工具栏”选项卡并查看第一个示例,它有一个非常基本的工具栏类型,如何显示它

这是我的密码

<body>
    <textarea class="ckeditor" id="description" rows="5" cols="15"></textarea>
</body>

我想为我的网站的所有ckeditor实例显示基本工具栏。

您需要在启动时设置特定配置

<script type="text/javascript">
    CKEDITOR.replace( 'description',
    {
        toolbar : 'Basic', /* this does the magic */
        uiColor : '#9AB8F3'
    });
</script>
描述是指您网站上的编辑器id

有趣的链接:


如果您使用Basic,它将显示所有工具栏,所以请使用此选项

CKEDITOR.config.toolbar = [
   ['Styles','Format','Font','FontSize'],
   '/',
   ['Bold','Italic','Underline','StrikeThrough','-','Undo','Redo','-','Cut','Copy','Paste','Find','Replace','-','Outdent','Indent','-','Print'],
   '/',
   ['NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
   ['Image','Table','-','Link','Flash','Smiley','TextColor','BGColor','Source']
] ;

如果你把前面的两个答案放在一起,你就会得到完整的答案。第一件事是在“ckeditor”文件夹的“config.js”文件中添加选项

 CKEDITOR.editorConfig = function( config ) {
    config.skin = 'bootstrapck';
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.toolbar_Full =
        [
            { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
            { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
            { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
            { name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
                'HiddenField' ] },
            '/',
            { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
            { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
                '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
            { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
            { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
            '/',
            { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
            { name: 'colors', items : [ 'TextColor','BGColor' ] },
            { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
        ];

    config.toolbar_Basic =
        [
            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
        ];
};
然后将调用添加到HTML文件中的'Basic'配置中

            <textarea id="ckeditor"></textarea>
            <script type="text/javascript">
                CKEDITOR.replace( 'ckeditor',
                        {
                            toolbar : 'Basic', /* this does the magic */
                            uiColor : '#9AB8F3'
                        });
            </script>
这应该是您所需要的全部,显然不要忘记在html文件中调用“ckeditor.js”文件。

2018年更新:

那些乐于助人的年轻人只不过创建了一个在线编辑器,你可以根据自己的内心内容进行定制!这是一个夜间构建,因此静态URL对您没有任何用处-从导航到基本配置器选项,然后选择工具栏配置器按钮

将生成的内容复制并粘贴到ivoryckeditor包的config.js文件Web文件夹中,它应该可以工作,而不需要任何其他文件更改

我构建了以下简单布局以显示剪切和粘贴操作以及:

CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
    { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
    { name: 'forms', groups: [ 'forms' ] },
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
    { name: 'links', groups: [ 'links' ] },
    { name: 'insert', groups: [ 'insert' ] },
    { name: 'styles', groups: [ 'styles' ] },
    { name: 'colors', groups: [ 'colors' ] },
    { name: 'tools', groups: [ 'tools' ] },
    { name: 'others', groups: [ 'others' ] },
    { name: 'about', groups: [ 'about' ] }
];

config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript';
};

我也陷入了这个问题,但经过多次尝试,我找到了问题的解决方案:

在ckeditor.rb中使用此选项:-

Ckeditor.setup do | config| 需要ckeditor/orm/active_记录 config.cdn_url=//cdn.ckeditor.com/4.12.1/full/ckeditor.js 结束

您也可以根据您的要求将“完全”更改为“基本”、“标准”或“经典”


祝你好运

你在谷歌上搜索过如何配置ckeditor吗?什么是editor1?我正在使用什么是editor1来显示ckeditor?我用HTML中编辑器的ID来显示ckeditor,因为在同一页面上可以有多个编辑器。如果您从CKEditor网站复制代码,我猜editor1是默认值。-您页面上的编辑器的ID应为:仍不工作,何时调用此。替换方法和位置?@coure您如何初始化编辑器?单靠类本身是不行的,你必须在某个时候使用一些JavaScript…你错过了真正的问题。ckeditor将“基本”定义为一切。他想要一个最小的工具栏,这就是大多数人说的基本的意思。所以你提供了与正确解决方案相反的解决方案。我将上述答案应用到我自己的项目中,并使其正常工作。更重要的是,这个答案让我找到了一个我认为更好的答案,这是因为它使用了定制的config.js。请参阅:使用此页面上的自定义配置文件:http://docs.ckeditor.com/!/guide/dev_配置我删除了所有内容,除了{name:'editing',groups:['find','selection','clipboard','undo','spellchecker']}我不希望每个ckeditor实例都使用相同的工具栏。。。在实例化相关编辑器之前,我尝试在自己的代码中进行此赋值,但没有成功。我需要在哪里添加此代码?没有任何说明基本。。。如果您了解工具栏的数组,您可以自定义。。。你的要求是基本的或完整的等等。。。您可以命名自己的工具栏。。。