Question

我正在我的网站上开发一个博客写作功能，因为我已经使用ckeditor和ckeditor代码片段插件以正确的格式编写代码。在编写代码时它看起来很好并且工作正常，但是当我提交表单并回顾我只获得格式化代码时，没有任何颜色组合标签（没有颜色代码），我在写作时看到了

Download the ckediotr

Enable code snippet plugin

在ck编辑器中编写代码时提交后代码变得像这样没有任何颜色组合。这是我的代码的的index.php

<?php
$content = "";
if (isset($_POST['sub'])) {
    $content = $_POST['editor1'];
}
?>

    <!DOCTYPE html>
    <html>

        <head>
            <meta charset="utf-8">
            <meta name="robots" content="noindex, nofollow">
            <title>Using syntax highlighting</title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
            <script src="http://cdn.ckeditor.com/4.5.8/standard-all/ckeditor.js"></script>
              <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

        </head>

        <body>
            <form action="#" method="post">
            <textarea id="editor1" name="editor1" >
            </textarea>
            <input type="submit" name="sub"/>
            </form>
            <script>
                var config = {
                    extraPlugins: 'codesnippet',
                    codeSnippet_theme: 'monokai_sublime',
                    height: 356
                };

                CKEDITOR.replace('editor1', config);
            </script>
            <div id="data">
                <?=$content;?>
            </div>

        </body>

    </html>

config.js

/**
 * @license Copyright (c) 2003-2015, 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
    config.extraPlugins = 'lineutils';
//    config.extraPlugins = 'widget';
//    config.extraPlugins = 'dialog';
    config.extraPlugins = 'codesnippet'; //enable code snippet plugin
    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        {name: 'clipboard', groups: ['clipboard', 'undo']},
        {name: 'editing', groups: ['find', 'selection', 'spellchecker']},
        {name: 'links'},
        {name: 'insert'},
        {name: 'forms'},
        {name: 'tools'},
        {name: 'document', groups: ['mode', 'document', 'doctools']},
        {name: 'others'},
        '/',
        {name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
        {name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi']},
        {name: 'styles'},
        {name: 'colors'},
        {name: 'about'},
        {name: 'codesnippet'}

    ];
//        config.extraPlugins = 'codesnippet';

    // 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';
};

Answer 1

正如documentation：

中所述

要查看显示CKEditor内容的目标页面上的突出显示样式，您需要在此页面上加载highlight.js脚本和主题的样式表。您可以重复使用放置在highlight.js目录中的ckeditor/plugins/codesnippet/lib/highlight副本，也可以从highlight.js download page下载您自己的副本。

将其附加到您网页的<head>部分。以下代码将加载highlight.js库和默认主题的样式表：

<head>
    ...
    <link href="ckeditor/plugins/codesnippet/lib/highlight/styles/default.css" rel="stylesheet">
    <script src="ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
</head>

使用以下代码在所有highlight.js元素上初始化<pre><code> .. </code></pre>：

<script>hljs.initHighlightingOnLoad();</script>

ckeditor提交中的代码段删除颜色组合

1 个答案: