tinymce と prism は、強調表示されたコードと中国語の構成メソッドのプロセスを実装します。-htmlチュートリアル-php.cn

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

不言

リリース： 2018-07-25 09:32:56

オリジナル

2354 人が閲覧しました

この記事では、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.保存された値をページに表示します。