tinymce と prism は、強調表示されたコードと中国語の構成メソッドのプロセスを実装します。

この記事では、tinymce と prism の実装と中国語構成を強調表示するコードを紹介し、具体的な例を通じてこの問題を詳細に分析します。

簡単な紹介: TinyMCE は、JavaScript で書かれた軽量のブラウザベースの WYSIWYG エディターです。 IE6 以降および Firefox1.5 以降に対する非常に優れたサポートがあります。機能は強力であり、機能構成は柔軟かつシンプルです。読み込み速度が非常に速いのも特徴です。最も重要なことは、TinyMCE は LGPL ライセンスに基づいてリリースされたフリー ソフトウェアであるということです。Baidu について詳しく知りたい場合は、ここまでにしておきます。

1. ページ構成を編集します

1. まず、Web ページのスタイル制御ファイルとスクリプト言語編集ファイルを参照する必要があります (最初の 2 つは tinymce スクリプト ファイル、最後の 2 つはプリズム ハイライト ファイルです)。本文では

1 <script type="text/javascript" src="tinymce.min.js"></script>
2 <script type="text/javascript" src="jquery.tinymce.min.js"></script>
3 <link href="prism.css" rel="stylesheet" />
4 <script src="prism.js"></script>

でテキストをデザインします。 3. js でテキストを初期化します

(1) tinymce.init が tinymce

を設定して初期化します (2) セレクター: "textarea" はセレクターに従って指定されます。はテキストエリアであり、ID (#...) またはクラス (.....) にバインドできます

(3) plugins 使用するプラグイン名を入力します

(4) ツールバー設定 ツールバーは、表示プラグイン、ここでは 3 つのツールバーを示します

(5) menubar はメニュー バー テンプレートを無効にします

(6) toolbar_items_size ツールバーのラベル サイズは小さく設定されます

(7) style_formats はデフォルトのスタイルを初期化します。独自の設定

(8) テンプレート テンプレート、ツールバー 3 のテンプレートは、タイトルを選択した後、値の内容をテキスト ボックスに自動的に追加します

(9) 言語: 'zh_CN' 言語自体のデフォルトは英語で、ここで指定される言語は中国語です

1 <textarea name="content" style="width:100%"></textarea>

さらに、codesample を使用して挿入すると、

class = " language-** " タグが生成されます。これは、一見するとプリズム ハイライト プラグインに対応しており、公式サポートも示しています。そこで、コード強調表示プラグインとして prism を使用します。

(4) 値の割り当てと設定

<script type="text/javascript">
    tinymce.init({
        selector: "textarea",
        plugins: [
            "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
            "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
            "table contextmenu directionality emoticons template textcolor paste fullpage textcolor codesample"
        ],
 
        toolbar1: "undo redo | cut copy paste | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
        toolbar2: " searchreplace | bullist numlist | outdent indent blockquote | link unlink anchor image media code codesample | inserttime preview | forecolor backcolor",
        toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",
 
        menubar: false,
        toolbar_items_size: &#39;small&#39;,
 
        style_formats: [
            {title: &#39;Bold text&#39;, inline: &#39;b&#39;},
            {title: &#39;Red text&#39;, inline: &#39;span&#39;, styles: {color: &#39;#ff0000&#39;}},
            {title: &#39;Red header&#39;, block: &#39;h1&#39;, styles: {color: &#39;#ff0000&#39;}},
            {title: &#39;Example 1&#39;, inline: &#39;span&#39;, classes: &#39;example1&#39;},
            {title: &#39;Example 2&#39;, inline: &#39;span&#39;, classes: &#39;example2&#39;},
            {title: &#39;Table styles&#39;},
            {title: &#39;Table row 1&#39;, selector: &#39;tr&#39;, classes: &#39;tablerow1&#39;}
        ],
 
        templates: [
            {title: &#39;Test template 1&#39;, content: &#39;Test 1&#39;},
            {title: &#39;Test template 2&#39;, content: &#39;Test 2&#39;}
        ],
        language:&#39;zh_CN&#39;
    });</script>

2. 表示ページ関連の設定

1. 参照 Web ページのスタイル制御ファイルとスクリプト言語編集ファイル (2 つの強調表示されたスクリプト)

1 var context=tinyMCE.activeEditor.getContent();//进行值得获取
2  
3 tinyMCE.activeEditor.setContent("你的数据");//进行值得获取

2.保存された値をページに表示します。

関連する推奨事項:

HTML の基本構造を簡単に説明する方法 (コード付き)

HTML の構造要素とは何ですか? HTML（プレーンテキスト）のさまざまな構造要素のまとめ

以上がtinymce と prism は、強調表示されたコードと中国語の構成メソッドのプロセスを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。