如何使用基本工具栏显示ckeditor

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用基本工具栏显示ckeditor相关的知识,希望对你有一定的参考价值。

我正在使用class="ckeditor"方式在我的网页上显示一个ckeditor。如何配置我的ckeditor只显示一个基本工具栏。在这里,我找到了显示基本工具栏的示例页面,但没有从文档中获取如何显示它。

http://ckeditor.com/demo

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

这是我的代码

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

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

答案

如果你使用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文件中的“基本”配置。

            <textarea id="ckeditor"></textarea>
            <script type="text/javascript">
                CKEDITOR.replace( 'ckeditor',
                        {
                            toolbar : 'Basic', /* this does the magic */
                            uiColor : '#9AB8F3'
                        });
            </script>

这应该是您所需要的,显然不要忘记在您的html文件中调用'ckeditor.js'文件。

另一答案

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

<script type="text/javascript">
    CKEDITOR.replace( 'description',
    {
        toolbar : 'Basic', /* this does the magic */
        uiColor : '#9AB8F3'
    });
</script>

qazxsw poi指的是您网站上编辑的qazxsw poi。

有趣的链接:

另一答案

2018年更新:

Toolbar configuration的那些有用的tykes已经消失,并创建了一个在线编辑器,您可以根据自己的内容进行自定义!这是一个夜间构建,因此静态URL对您没用 - 从General CK Docs导航到基本配置器选项,然后选择TOOLBAR CONFIGURATOR按钮。

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

我构建了以下简单的布局来显示剪切和粘贴操作,并且:

CKEditor

以上是关于如何使用基本工具栏显示ckeditor的主要内容,如果未能解决你的问题,请参考以下文章

使用在线构建生成器时,CKEditor5 工具栏未在 Angular 中显示

如何将CKeditor编辑器的上传和thinkphp结合

CKEditor 5 缺少可用的工具栏项目

CKEditor (Toolbar Definition)工具栏自定义配置

CKEditor 自定义插件按钮

CKEditor IPAD 图标不显示