tinymce und prism implementieren hervorgehobenen Code und den chinesischen Konfigurationsmethodenprozess

Dieser Artikel stellt Ihnen die Code-Hervorhebung und die chinesische Konfiguration von Tinymce und Prisma vor. Er analysiert dieses Problem im Detail anhand konkreter Beispiele.

Kurze Einführung: TinyMCE ist ein leichter, browserbasierter WYSIWYG-Editor, der in JavaScript geschrieben ist. Es bietet eine sehr gute Unterstützung für IE6+ und Firefox1.5+. Die Funktionen sind leistungsstark und die Funktionskonfiguration ist flexibel und einfach. Ein weiteres Merkmal ist, dass die Ladegeschwindigkeit sehr hoch ist. Das Wichtigste ist, dass TinyMCE eine kostenlose Software ist, die unter der LGPL-Lizenz veröffentlicht wird. Genug gesagt. Wenn Sie mehr über Baidu erfahren möchten.

1. Seitenkonfiguration bearbeiten

1. Zuerst müssen wir auf die Steuerdatei für den Webseitenstil und die Bearbeitungsdatei für die Skriptsprache verweisen (die ersten beiden sind Tinymce-Skriptdateien und die letzten beiden sind Prisma). Dateien hervorheben)

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>

2. Entwerfen Sie unseren Text im Textkörper

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

3. Initialisieren Sie den Text in js

(1) tinymce.init konfiguriert und initialisiert tinymce

(2) Selektor: „textarea“ wird entsprechend Ihrem Selektor angegeben. Hier ist ein Textbereich, der an die ID (#···) oder die Klasse (.····) gebunden werden kann

(3) Plugins geben den Namen des zu verwendenden Plug-Ins ein

(4) Symbolleisteneinstellungen Symbolleiste gibt das Anzeige-Plug-In an, hier zeige ich drei Symbolleisten

(5) Menüleiste deaktiviert die Menüleistenvorlage

(6) toolbar_items_size Symbolleistenbeschriftungsgröße ist auf klein eingestellt

(7) style_formats Initialisierungs-Standardstil, passen Sie diesen nach Ihren eigenen Vorlieben an

( 8) Vorlagenvorlage. Die Vorlage in der Symbolleiste3 hängt den Wertinhalt automatisch an das Textfeld an, nachdem der Titel ausgewählt wurde

(9) Sprache: „zh_CN“ Die Sprache selbst ist standardmäßig Englisch und die hier angegebene Sprache ist Chinesisch

<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>

Wenn wir außerdem Codebeispiele verwenden, wird durch Einfügen das Tag

(4) Zuweisungs- und Einstellungswertoperationen

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

2. Seitenbezogene Konfigurationen anzeigen

1. Verweisen Sie auf Webseitenstil-Steuerdateien und Skriptsprachen-Bearbeitungsdateien (zwei Highlights). Skript)

1 <link href="prism.css" rel="stylesheet" />
2 <script src="prism.js"></script>

2. Nehmen Sie einfach den von Ihrem Editor gespeicherten Wert heraus und zeigen Sie ihn auf der Seite an.

Verwandte Empfehlungen:

Wie man die Grundstruktur von HTML (mit Code) kurz beschreibt

Was sind die Strukturelemente von HTML? ? Zusammenfassung verschiedener Strukturelemente in HTML (Klartext)

Das obige ist der detaillierte Inhalt vontinymce und prism implementieren hervorgehobenen Code und den chinesischen Konfigurationsmethodenprozess. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!