การพัฒนาปลั๊กอิน Tinymce: แทรก HTML, PHP, SQL, รหัส JS และเน้นรหัส

ไม่กี่วันที่ผ่านมาฉันรู้สึกว่ารหัสการแทรกของบล็อกนั้นไม่ง่ายที่จะใช้ ดังนั้นบรรณาธิการ HTML ของ Sina จึงถูกแทนที่ด้วย tinymce และการแทรกรหัสอย่างง่ายได้รับการพัฒนา - - ต่อไปนี้เป็นกระบวนการพัฒนาของฉัน

ก่อนอื่นเวอร์ชัน Tinymce ของฉันคือเวอร์ชัน: 3.2.7 (2009-09-22)

รหัสการแทรก Tinymce ต้องการการเรียก tinymce.execommand ('mceinsertContent', เท็จ, ค่า); วิธีการของ tinymce พารามิเตอร์ไม่จำเป็นต้องเปลี่ยนแปลงค่าคือสิ่งที่คุณต้องการแทรก

ตัวอย่างเช่นฉันเขียนฟังก์ชั่น

การคัดลอกรหัสมีดังนี้:

ฟังก์ชั่น inserthtml (ค่า)

-

tinymce.execcommand ('mceinsertContent', เท็จ, ค่า);

-

ในภายหลังสำหรับตัวอย่างนี้มีการดาวน์โหลด ในตัวอย่าง มีเอกสารสามฉบับที่เกี่ยวข้องทั้งหมด

tinymce.html InsertCode.php save.php ไฟล์ทั้งสามนี้

tinymce.html เป็นหน้ากล่องข้อความ tinymce

รหัสหลักมีดังนี้:

การคัดลอกรหัสมีดังนี้:

<script type = text/javaScript src = http: //www.vevb.com/tinymce/tiny_mce.js> </script>

<script type = text/javascript>

tinymce.init ({

// ตัวเลือกทั่วไป

convert_urls: เท็จ

โหมด: แน่นอน

องค์ประกอบ: บทความ _content,

// โหมด: textareas,

ชุดรูปแบบ: ขั้นสูง,

ปลั๊กอิน: Safari, Pagebreak, สไตล์, เลเยอร์, ​​ตาราง, บันทึก, advhr, advimage, advlink, อารมณ์, iespell, inlinepopups, insertdatetime, ตัวอย่าง, สื่อ, searchreplace, พิมพ์, บริบท, paste, ทิศทาง, fullscreen

// ตัวเลือกธีม

Theme_advanced_buttons1: บันทึก, NewDocument, |, bold, italic, ขีดเส้นใต้, strikethrough, |, justifyleft, justifycenter, justifyright, justifyfull, styleselect, formatselect, fontselect, fontsizeselect

Theme_advanced_buttons2: ตัด, สำเนา, วาง, pastext, pastext, pasteword, |, ค้นหา, แทนที่, |, bullist, numlist, |, outdent, retdent, intent, blockquote, |, undo, redo, |, ลิงก์, unlink, Anchor, ภาพ, การทำความสะอาด, การทำความสะอาด, รหัส,

Theme_advanced_buttons3: tablecontrols, |, hr, remverformat, visualaid, |, sub, sup, |, charmap, อารมณ์, iespell, สื่อ, advhr, |, พิมพ์, |, ltr, rtl, |, fullscreen, fullscreen,

Theme_advanced_buttons4: Insertlayer, Moveforward, Movwward, Absolute, |, Styleprops, |, Cite, Abbr, ตัวย่อ, Del, Ins, attribs, |, Varechars

Theme_advanced_toolbar_location: ด้านบน,

Theme_advanced_toolbar_align: ซ้าย,

Theme_advanced_statusbar_location: ด้านล่าง

Theme_advanced_resizing: จริง

// ตัวอย่างเนื้อหา CSS (ควรเป็น CSS ของคุณ)

content_css: css/content.css,

// รายการดร็อปสำหรับกล่องโต้ตอบลิงค์/ภาพ/สื่อ/เทมเพลต

template_external_list_url: รายการ/template_list.js,

external_link_list_url: รายการ/link_list.js,

external_image_list_url: รายการ/image_list.js,

media_external_list_url: รายการ/media_list.js,

// แทนที่ค่าสำหรับปลั๊กอินเทมเพลต

template_replace_values: {

ชื่อผู้ใช้: ผู้ใช้บางคน

StaffID: 991234

-

-

</script>

<script type = text/javascript>

ฟังก์ชั่น inserthtml (ค่า)

-

tinymce.execcommand ('mceinsertContent', เท็จ, ค่า);

-

</script>

โดยที่รหัส JS คือการเริ่มต้น tinymce ตัวอย่างการดาวน์โหลดไม่รวมถึง tinymce คุณต้องดาวน์โหลดด้วยตัวเอง จากนั้นเปลี่ยน SRC ของรหัส JS

การคัดลอกรหัสมีดังนี้:

<ชื่ออินพุต = ปุ่มประเภท = ปุ่ม onClick = window.Open ('insertCode.php', 'รหัสแทรก', 'ความสูง = 500, ความกว้าง = 600, ด้านบน = 300, ซ้าย = 300, แถบเครื่องมือ = ไม่, menubar = ไม่, scrollBars = ไม่

รหัสด้านบนใช้เพื่อเปิดไฟล์ insertCode.php

ถัดไปลองดูที่รหัส InsertCode รหัสของไฟล์นี้

ก่อนอื่นรหัส JS

การคัดลอกรหัสมีดังนี้:

<script language = javascript src = http: //www.gosoa.com.cn/js/jquery.js> </script>

<ภาษาสคริปต์ = JavaScript>

Function 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 ('<ชื่อก่อน = code class ='+codetype+'>'+value+'</pre>');

window.close ();

-

</script>

ถัดไปคือรหัส PHP และ HTML

การคัดลอกรหัสมีดังนี้:

<? php

ERROR_REPORTING (0);

$ content = $ _post ['เนื้อหา'];

ถ้า (! ว่างเปล่า ($ $ เนื้อหา))

-

$ codetype = $ _post ['codetype'];

echo '<div id = postcontent>';

$ content = htmlspecialchars ($ เนื้อหา);

Echo $ เนื้อหา;

Echo '</div>

<อินพุต type = name hidden = codetype id = codetype value = '. $ codetype' -

<ประเภทอินพุต = ชื่อปุ่ม = ส่งค่า = ส่ง onClick = insertCode () style = border: 1px solid #000; ความสูงบรรทัด: 18px; ความกว้าง: 60px;/> ';

}อื่น

-

-

<div style = margin: 0 auto>

<ฟอร์ม id = form1 name = method1 method = post action = insertCode.php>

<label> เลือกประเภทของรหัสที่จะแทรก

<select name = codetype id = codetype>

<ตัวเลือกค่า = 'php'> php </potion>

<ตัวเลือกค่า = 'js'> js </potion>

<ตัวเลือกค่า = 'html'> html </potion>

<ตัวเลือกค่า = 'c'> c </potion>

<ตัวเลือกค่า = 'ASP'> ASP </potion>

<ตัวเลือกค่า = 'xml'> xml </pontion>

<ตัวเลือกค่า = 'java'> java </pontion>

<ตัวเลือกค่า = 'java'> java </pontion>

<ตัวเลือกค่า = 'csharp'> c#</opovie

<ตัวเลือกค่า = 'SQL'> SQL </pontion>

</เลือก>

</lable>

<label>

<textarea name = content id = content cols = 30 rows = 20 style = width: 600px; ความสูง: 200px; Border: 1px Dashed #333> </textarea>

</lable>

<p>

<label style = padding-left: 50px;>

<ประเภทอินพุต = ส่งชื่อ = ส่งค่า = ส่ง style = border: 1px solid #000; ความสูงบรรทัด: 18px; ความกว้าง: 60px;/>

</lable>

</p>

<p> </p>

</form>

</div>

<? php

-

-

ใน InsertCode.php ฟังก์ชั่น InsertCode () ใช้เพื่อเรียกใช้ฟังก์ชัน inserTHTML () ของหน้า tinymce.html และแทรกรหัสลงในหน้า tinymce.html

ในรหัสทำไมเราถึงต้องการ '+value+'?

เนื่องจากเรากำลังแสดงหน้าเราจะใช้ปลั๊กอิน Syntaxhighlighter เพื่อไฮไลต์รหัส

อีกจุดหนึ่งที่จะอธิบายที่นี่ $ content = htmlspecialchars ($ เนื้อหา); เราดำเนินการ HTMLSpecialChars Escape สำหรับรหัสเอง ด้วยวิธีนี้รหัสที่แทรกลงในฐานข้อมูลจะปลอดภัย

ตกลงมาดู save.php อีกครั้งหน้านี้ใช้เพื่อแสดงเนื้อหาที่ส่ง

รหัสหลักมีดังนี้:

การคัดลอกรหัสมีดังนี้:

-

$ article_content = $ _post ['article_content'];

ฟังก์ชัน TransCode ($ Str)

-

ถ้า (ว่าง ($ str))

-

กลับเท็จ;

-

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

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

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

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

คืน $ str;

-

echo transcode ($ atstorch_content);

-

<script class = javascript src =/tinymce/lightcode/scripts/shcore.js> </script>

<script class = javascript src =/tinymce/lightcode/scripts/shbrushcsharp.js> </script>

<script class = javascript src =/tinymce/lightcode/scripts/shbrushphp.js> </script>

<script class = javascript src =/tinymce/lightcode/scripts/shbrushjscript.js> </script>

<script class = javascript src =/tinymce/lightcode/scripts/shbrushjava.js> </script>

<script class = javascript src =/tinymce/lightcode/scripts/shbrushvb.js> </script>

<script class = javascript src =/tinymce/lightcode/scripts/shbrushsql.js> </script>

<script class = javascript src =/tinymce/lightcode/scripts/shbrushxml.js> </script>

<script class = javascript src =/tinymce/lightcode/scripts/shbrushdelphi.js> </script>

<script class = javascript src =/tinymce/lightcode/scripts/shbrushpython.js> </script>

<script class = javascript src =/tinymce/lightcode/scripts/shbrushruby.js> </script>

<script class = javascript src =/tinymce/lightcode/scripts/shbrushcss.js> </script>

<script class = javascript src =/tinymce/lightcode/scripts/shbrushcpp.js> </script>

<script class = javascript>

dp.syntaxhighlighter.highlightall ('รหัส');

</script>

ตกลงมันจบแล้ว