代码之家 › 专栏 › 技术社区 › Biskrem Muhammad

laravel ckeditor深色主题

ckeditor4.x ckeditor php

Biskrem Muhammad · 技术社区 · 7 年前

我在网上搜索了CKEditor的深色皮肤以及如何实际插入它。

我只是想分享一下我是如何让它简单地工作的实际上,我做了一个我认为很有趣的编辑 官方的黑暗势力

我把这个问题和答案贴在这里,因为我在这里没有找到任何相关的主题。我想以一种简单而详细的方式与大家分享这一非常具体的知识和解决方案,使之更容易、更直接地传达给每一个人

加

谢谢

1 回复 | 直到 7 年前

Biskrem Muhammad 7 年前

以下是详细答案:

如果您将CKEditor用于laravel项目,请首先安装它 follow these steps
成功运行后, Download this skin folder 至CKEditor skins

public/vendor/unisharp/laravel-ckeditor/skins

刚好在…之后粘贴 皮肤 config.js 表单编辑器基目录- public/vendor/unisharp/laravel-ckeditor 对于laravel-

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

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' }
    ];

    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';

    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;link:advanced';

    config.skin = 'ckeditor-basic-moono-dark-biskrem';
};

结果

这是一个屏幕截图

解释

// The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' }
    ];

最后一行代码:

config.skin = 'ckeditor-basic-moono-dark-biskrem';

让编辑真正了解我们的黑暗主题 ckeditor-basic-moono-dark-biskrem 表示中的皮肤文件夹名称 皮肤 文件夹