2016-05-03 11 views
0

私は自分のウェブサイトにブログを書く機能を開発しています。そのために、ckeditorとckeditorのコードスニペットプラグインを使って適切な形式でコードを書いています。 コードを書いている間もうまく動作していますが、フォームを送信して、振り返ってみると、書式設定コードのみを取得しています。タグが付いた色の組み合わせはありません(カラーコードなし)。書き込み。ckeditor submissionのコードスニペットで色の組み合わせを取り除きます

Download the ckediotr

Enable code snippet plugin

code snippet plugin

enter image description here

enter image description here

コードは次のようになって提出した後、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'; 
}; 
+0

ください装い、親切に私にどんな提案を与えます。 –

答えて

0

としてはdocumentationで説明:

どこターゲットページの上に蛍光ペンのスタイルを表示するにはCKEditorのコンテンツが表示されたら、highlight.jsスクリプトとテーマのスタイルシートをロードする必要がありますこのページでのコピーをckeditor/plugins/codesnippet/lib/highlightディレクトリに再利用するか、またはhighlight.js download pageから自分のコピーをダウンロードすることができます。

ページの<head>セクションに貼り付けます。次のコードですべての<pre><code> .. </code></pre>要素にInititalize 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ライブラリとデフォルトのテーマのスタイルシートをロードします

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

ありがとう –

関連する問題