집 > 기사 > 웹 프론트엔드 > Tinymce와 Prism은 강조 표시된 코드와 중국어 구성 방법 프로세스를 구현합니다.

Tinymce와 Prism은 강조 표시된 코드와 중국어 구성 방법 프로세스를 구현합니다.

不言원래의: 2018-07-25 09:32:562334검색

이 글에서는 Tinymce와 프리즘의 구현과 중국어 구성을 강조하는 코드를 소개합니다. 필요한 친구들이 참고할 수 있도록 구체적인 예를 통해 이 문제를 자세히 분석합니다.

간단한 소개: TinyMCE는 JavaScript로 작성된 경량 브라우저 기반 WYSIWYG 편집기입니다. IE6+ 및 Firefox1.5+를 매우 잘 지원합니다. 기능은 강력하고 기능 구성은 유연하고 간단합니다. 또 다른 특징은 로딩 속도가 매우 빠르다는 것입니다. 가장 중요한 것은 TinyMCE가 LGPL 라이센스에 따라 출시된 무료 소프트웨어라는 것입니다. Baidu에 대해 더 알고 싶다면 본론으로 들어가겠습니다.

1. 페이지 구성 편집

1. 먼저 웹페이지 스타일 제어 파일과 스크립트 언어 편집 파일을 참조해야 합니다. (처음 두 개는tinymce 스크립트 파일이고 마지막 두 개는 프리즘 하이라이트 파일입니다.)

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>

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

3에서 텍스트를 디자인합니다. js

에서 텍스트를 초기화합니다. (1)tinymce.init는tinymce

을 구성하고 초기화합니다.(2)선택기: "textarea"는 선택기에 따라 지정됩니다. 텍스트 영역이며 ID(#···) 또는 클래스(.····)에 바인딩될 수 있습니다.

(3) 플러그인은 사용할 플러그인 이름을 입력합니다.

(4) 도구 모음 설정 도구 모음은 표시 플러그인, 여기에는 세 개의 도구 모음이 표시됩니다.

(5) menubar는 메뉴 표시줄 템플릿을 비활성화합니다.

(6) toolsbar_items_size 도구 모음 레이블 크기는 작게 설정됩니다.

(7) style_formats는 기본 스타일을 초기화하고 이를 사용자에 따라 조정합니다. 자신의 기본 설정

(8) 템플릿 템플릿, 도구 모음 3의 템플릿은 제목을 선택한 후 자동으로 값 내용을 텍스트 상자에 추가합니다.

(9) 언어: 'zh_CN' 언어 자체는 기본적으로 영어, 여기에 지정된 언어는 중국어입니다.

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

또한 코드 샘플을 사용하여 삽입하면 class = "언어-**" 태그가 생성되는데, 이는 얼핏 프리즘 하이라이팅 플러그인에 적합하고 공식적인 지원도 표시합니다. 그래서 우리는 코드 강조 플러그인으로 프리즘을 사용합니다.

(4) 할당 및 값 설정 작업

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

2. 페이지 관련 구성 표시

1. 참조 웹 페이지 스타일 제어 파일 및 스크립트 언어 편집 파일(강조 표시된 두 개의 스크립트)

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

2. 저장된 값을 페이지에 표시합니다.

Tinymce와 Prism은 강조 표시된 코드와 중국어 구성 방법 프로세스를 구현합니다.

관련 기사