tinymce et prism implémentent le code mis en évidence et le processus de configuration chinois

Cet article vous présente le code mettant en évidence l'implémentation et la configuration chinoise de tinymce et prism. Il analyse ce problème en détail à travers des exemples spécifiques. Les amis dans le besoin peuvent s'y référer.

Brève introduction : TinyMCE est un éditeur WYSIWYG léger basé sur un navigateur et écrit en JavaScript. Il prend en charge IE6+ et Firefox1.5+. Les fonctions sont puissantes et la configuration des fonctions est flexible et simple. Une autre caractéristique est que la vitesse de chargement est très rapide. Le plus important est que TinyMCE est un logiciel gratuit publié sous licence LGPL. Vous pouvez l'utiliser pour des applications commerciales. Si vous voulez en savoir plus sur Baidu, allons droit au but.

1. Modifier la configuration de la page

1. Nous devons d'abord référencer le fichier de contrôle de style de page Web et le fichier d'édition du langage de script (les deux premiers sont des fichiers de script Tinymce et les deux derniers sont Prism). mettre en surbrillance les fichiers)

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. Concevoir notre texte dans le corps

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

3. Initialiser le texte dans js

(1) tinymce.init Configurer et initialize tinymce

(2) sélecteur : "textarea" est spécifié en fonction de votre sélecteur Voici la zone de texte, qui peut être liée à l'identifiant (#···) ou à la classe (.····)

(3) les plugins remplissent le nom du plug-in à utiliser

(4) la barre d'outils des paramètres de la barre d'outils précise l'affichage du plug-in, ici je montre trois barres d'outils

(5) la barre de menus désactive le modèle de barre de menus

(6) la taille de l'étiquette de la barre d'outils toolbar_items_size est définie sur petite

(7) style_formats initialise le style par défaut, ajustez-le selon vos propres préférences

(8) modèle de modèles, le modèle dans la barre d'outils3 ajoute automatiquement le contenu de la valeur à la zone de texte après avoir sélectionné le titre

(9) langue : 'zh_CN' La langue elle-même est par défaut l'anglais et le la langue spécifiée ici est le chinois

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

De plus, lorsque nous utilisons codeample pour insérer, la balise

class="langue-**" sera générée. À première vue, cela est conforme à. le prisme mettant en évidence le plug-in et indique également le support officiel. Nous utilisons donc prism comme plugin de mise en évidence de code.

(4) Opérations d'affectation et de définition de valeurs

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

2. Afficher les configurations liées à la page

1. Script de surbrillance)

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

2. Retirez simplement la valeur enregistrée par votre éditeur et affichez-la sur la page.

Recommandations associées :

Comment décrire brièvement la structure de base du HTML (avec code)

Quels sont les éléments structurels du HTML ? Résumé de divers éléments structurels en HTML (texte brut)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!