tinymce and prism implement highlighted code and Chinese configuration method process-HTML Tutorial-php.cn

tinymce and prism implement highlighted code and Chinese configuration method process

不言

Release： 2018-07-25 09:32:56

Original

2281 people have browsed it

This article introduces to you the implementation of code highlighting and Chinese configuration of tinymce and prism. It analyzes this problem in detail through specific examples. Friends in need can refer to it.

Brief introduction: TinyMCE is a lightweight browser-based WYSIWYG editor written in JavaScript. It has very good support for IE6 and Firefox1.5. The functions are powerful and the function configuration is flexible and simple. Another feature is that the loading speed is very fast. The most important thing is that TinyMCE is a free software released under the LGPL license. You can use it for commercial applications. Enough said. If you want to know more about Baidu, let’s get to the point.

1. Edit page configuration

1. First we need to reference the web page style control file and script language editing file (the first two are tinymce script files, and the last two are prism highlight files )

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>

Copy after login

2. Design our text in the body

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

Copy after login

3. Initialize the text in js

(1) tinymce.init configures and initializes tinymce

(2) selector: "textarea" is specified according to your selector. Here is textarea, which can be bound to id (#···) or class (.····)

(3) plugins fill in the name of the plug-in to be used

(4) toolbar sets the toolbar to specify the display plug-in, here I show three toolbars

(5) menubar disables the menu bar Template

(6) toolbar_items_size toolbar label size is set to small

(7) style_formats is the default style initialized, this can be adjusted according to your own preferences

(8) templates template, The template in toolbar3 automatically appends the value content to the text box after selecting the title

(9) language: 'zh_CN' The language itself defaults to English, and the language specified here is Chinese

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

Copy after login

In addition, when we use codesample Inserting will generate the tinymce and prism implement highlighted code and Chinese configuration method process

(4) Assignment and setting value operations

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

Copy after login

2. Display page related configuration

1. Reference web page style control file and script language editing file (two highlights Display script)

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

Copy after login

2. Just take out the value saved by your editor and display it on the page.

Related recommendations:

How to briefly describe the basic structure of html (with code)

What are the structural elements of HTML? Summary of various structural elements in HTML (plain text)

The above is the detailed content of tinymce and prism implement highlighted code and Chinese configuration method process. For more information, please follow other related articles on the PHP Chinese website!