Tinymce 플러그인 개발 : HTML, PHP, SQL, JS 코드를 삽입하고 코드를 강조 표시합니다.

저자：Eve Cole 업데이트 시간：2025-03-28 20:48:02

며칠 전, 블로그의 삽입 코드는 사용하기 쉽지 않다고 생각했습니다. 따라서 Sina의 HTML 편집기는 Tinymce로 대체되었습니다. 간단한 코드 삽입이 개발되었습니다. . . 다음은 내 개발 과정입니다.

첫째, 내 tinymce 버전은 3.2.7 (2009-09-22)입니다.

tinymce 삽입 코드는 tinymce.execcommand를 호출해야합니다 ( 'mceinsertContent', false, value); tinymce의 방법. 매개 변수를 변경할 필요가 없으며 값은 삽입하려는 것입니다.

예를 들어, 나는 함수를 썼고

코드 사본은 다음과 같습니다.

함수 inserthtml (값)

{

tinymce.execcommand ( 'mceinsertContent', false, value);

}

나중에이 예를 들어 다운로드가 제공됩니다. 예에서. 총 3 개의 문서가 있습니다.

tinymce.html insertcode.php save.php이 세 가지 파일입니다.

tinymce.html은 tinymce 텍스트 박스 페이지입니다.

기본 코드는 다음과 같습니다.

코드 사본은 다음과 같습니다.

<스크립트 유형 = 텍스트/JavaScript>

tinymce.init ({

// 일반 옵션

Convert_urls : False,

모드 : 정확한

요소 : article_content,

// 모드 : Textareas,

테마 : 고급,

플러그인 : 사파리, 페이지 브레이크, 스타일, 레이어, 테이블, 저장, Advhr, Advimage, Advlink, 감정, Iespell, InlinePopups, insertDateTime, 미리보기, 미디어, 검색어 장소, 인쇄, 컨텍스트 멘누, 페이스트, 풀 스크린, 비 편집 불가능, 비정규, 비방, XHTMLXTRA, 템플릿, WordPlate, WordCount.

// 테마 옵션

tembom_advanced_buttons1 : 저장, NewDocument, |, 굵은, 이탤릭체, 밑줄, strikethrough, |, 정당한 성, 정당한 성, 정당한, 정당화, 스타일 스셀렉트, 형식 선택, fontselect, fontsizeEct, fontsizesect,

tembom_advanced_buttons4 : insertLayer, Moveforward, Movebackward, Absolute, |, StyleProps, |, Cite, Abbr, Acronym, del, ins, attribs, | visubling, themplate, pagebreak,

테마_advanced_toolbar_location : 상단,

테마_advanced_toolbar_align : 왼쪽,

테마_advanced_statusbar_location : 하단,

테마_advanced_resizing : true,

// 컨텐츠 CSS 예제 (사이트 CSS 여야합니다)

content_css : css/content.css,

// 링크/이미지/미디어/템플릿 대화 상자에 대한 목록을 드롭합니다

template_external_list_url : lists/template_list.js,

external_link_list_url : lists/link_list.js,

external_image_list_url : lists/image_list.js,

media_external_list_url : lists/media_list.js,

// 템플릿 플러그인의 값을 바꾸십시오

template_replace_values : {

사용자 이름 : 일부 사용자,

스태프 : 991234

}

});

</스크립트>

<스크립트 유형 = 텍스트/JavaScript>

함수 inserthtml (값)

{

tinymce.execcommand ( 'mceinsertContent', false, value);

}

</스크립트>

여기서 JS 코드는 tinymce를 초기화하는 것입니다. 다운로드 예제에는 tinymce가 포함되어 있지 않으므로 직접 다운로드해야합니다. 그런 다음 JS 코드의 SRC를 변경하십시오.

코드 사본은 다음과 같습니다.

<입력 이름 = 버튼 유형 = 버튼 onclick = wind

위의 코드는 insertCode.php 파일을 여는 데 사용됩니다.

다음으로 삽입 코드를 살펴 보겠습니다. 이 파일의 코드.

우선, JS 코드

코드 사본은 다음과 같습니다.

<스크립트 언어 = javaScript>

함수 insertCode ()

{

var value = $ ( '#postcontent'). html ();

var codeType = $ ( '#codeType'). val ();

// window.opener.inserthtml ( '<textArea rows = 3 cols = 50 name = code class ='+codeType+'>'+value+'</textArea>');

window.opener.inserthtml ( '<pre name = code class ='+codeType+'>'+value+'</pre>');

Window.Close ();

}

</스크립트>

다음은 PHP 및 HTML 코드입니다

코드 사본은 다음과 같습니다.

<? php

error_reporting (0);

$ content = $ _post [ 'content'];

if (! 빈 ($ content))

{

$ codeType = $ _post [ 'CodeType'];

echo '<div id = postcontent>';

$ content = htmlspecialchars ($ content);

echo $ 컨텐츠;

echo '</div>

<입력 유형 = 숨겨진 이름 = CodeType id = CodeType value = '. $ codeType.' />

<입력 유형 = 버튼 이름 = 제출 값 = 제출 onclick = insertCode () 스타일 = 테두리 : 1px solid #000; 라인 높이 : 18px; 너비 : 60px;/> ';

}또 다른

{

<라벨> 삽입 할 코드 유형을 선택하십시오

<옵션 값 = 'php'> php </옵션>

<옵션 값 = 'js'> js </옵션>

<옵션 값 = 'html'> html </옵션>

<옵션 값 = 'c'> c </옵션>

<옵션 값 = 'ASP'> ASP </옵션>

<옵션 값 = 'xml'> xml </옵션>

<옵션 값 = 'java'> java </옵션>

<옵션 값 = 'csharp'> c#</옵션>

<옵션 값 = 'sql'> sql </옵션>

</선택>

</레이블>

<라벨>

</레이블>

<p>

<레이블 스타일 = 패딩 왼쪽 : 50px;>

<입력 유형 = 제출 이름 = 제출 값 = 제출 스타일 = 테두리 : 1px solid #000; 라인 높이 : 18px; 너비 : 60px;/>

</레이블>

</p>

</form>

</div>

<? php

}

insertCode.php에서 insertCode () 함수는 tinymce.html 페이지의 inserthtml () 함수를 호출하고 tinymce.html 페이지에 코드를 삽입하는 데 사용됩니다.

코드에서 왜 '+value+'가 필요한가?

페이지를 표시하므로 구문 Highlighter 플러그인을 사용하여 코드를 강조 표시합니다.

설명 할 또 다른 요점은 여기에서 $ content = htmlspecialchars ($ content); 코드 자체에 대한 HTMLSpecialchars Escape 작업을 수행했습니다. 이러한 방식으로 데이터베이스에 삽입 된 코드는 안전합니다.

좋아, Save.php를 다시 살펴 보겠습니다.이 페이지는 제출 된 내용을 표시하는 데 사용됩니다.

기본 코드는 다음과 같습니다.

코드 사본은 다음과 같습니다.

$ article_content = $ _post [ 'article_content'];

함수 트랜스 코드 ($ str)

{

if (빈 ($ str))

{

거짓을 반환합니다.

}

$ str = str_replace ( '', '', $ str);

$ str = str_ireplace ( '<br>', n, $ str);

$ str = str_ireplace ( '<pre', '<pre name = code', $ str);

Return $ str;

}

에코 트랜스 코드 ($ article_content);

dp.syntaxhighligher.highlightall ( 'code');

</스크립트>

좋아, 끝났어.