قبل بضعة أيام ، شعرت أن رمز الإدراج للمدونة لم يكن سهلاً للاستخدام. لذلك ، تم استبدال محرر HTML Sina مع Tinymce. وقد تم تطوير إدراج بسيط للرمز. . . فيما يلي عملية التطوير الخاصة بي.
أولاً ، إصدار Tinymce الخاص بي هو الإصدار: 3.2.7 (2009-09-22).
يتطلب رمز إدخال tinymce استدعاء tinymce.execcommand ('mceinsertContent' ، خطأ ، قيمة) ؛ طريقة tinymce. لا تحتاج المعلمات إلى تغييرها ، القيمة هي ما تريد إدراجه.
على سبيل المثال ، كتبت وظيفة ،
نسخة الكود كما يلي:
دالة inserthtml (القيمة)
{
tinymce.execcommand ('mceinsertContent' ، false ، value) ؛
}
في وقت لاحق ، في هذا المثال ، يتم توفير تنزيل. في المثال. هناك ثلاث مستندات متورطة في المجموع.
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: خطأ ،
الوضع: دقيق ،
العناصر: article_content ،
// الوضع: Textareas ،
الموضوع: متقدم ،
الإضافات: Safari ، PageBreak ، Style ، Layer ، Table ، Save ، Advhr ، Advimage ، AdvLink ، المشاعر ، Iespell ، inlinepopups ، insertdatetime ، معاينة ، وسائل الإعلام ، البحث ، الطباعة ، السياق ، لصق ، اتجاهية ، شاشة كاملة ، غير مسبقة ، غير مرئية ،
// خيارات الموضوع
theme_advanced_buttons1: Save ، NewDocument ، | ، Bold ، Italic ، Underline ، strikethrough ، | ، ursifyleft ، ursifycenter ، ursifyright ، ursifyfull ، styleselect ، formateSeSelect ، fontselect ، fontsizelect ، fontsizelect ،
theme_advanced_buttons2: cut ، نسخ ، لصق ، pastetext ، pasteword ، | ، البحث ، استبدال ،
theme_advanced_buttons3: tableControls ، | ، HR ، removeFormat ، VisualAid ، | ، sub ، sup ، | ، charmap ، hearmap ، iespell ، media ، advhr ، | ، print ، | ، ltr ، rtl ، | ، fullscreen ،
theme_advanced_buttons4: insertlayer ، moveforward ، move -pack -park ، | ، styleprops ، | ، cite ، abbr ، adrant
theme_advanced_toolbar_location: TOP ،
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: {
اسم المستخدم: بعض المستخدمين ،
ستافيد: 991234
}
}) ؛
</script>
<script type = text/javaScript>
دالة inserthtml (القيمة)
{
tinymce.execcommand ('mceinsertContent' ، false ، value) ؛
}
</script>
حيث رمز JS هو تهيئة tinymce. لا يتضمن مثال التنزيل Tinymce ، بل تحتاج إلى تنزيله بنفسك. ثم قم بتغيير SRC لرمز JS.
نسخة الكود كما يلي:
<اسم الإدخال = type type = button onClick = window.open ('insertcode.php' ، 'insert code' ، 'height = 500 ، width = 600 ، top = 300 ، left = 300 ، شريط الأدوات = لا ، menubar = no ، scrollbars = no ، resizable = no ، location = no ، status = no') value =
يتم استخدام الرمز أعلاه لفتح ملف insertCode.php.
بعد ذلك ، دعنا نلقي نظرة على الرمز الإدراج. رمز هذا الملف.
بادئ ذي بدء ، رمز JS
نسخة الكود كما يلي:
<لغة البرنامج النصي = javaScript src = http: //www.gosoa.com.cn/js/jquery.js> </script>
<لغة البرنامج النصي = 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 () ؛
}
</script>
التالي هو رمز PHP و HTML
نسخة الكود كما يلي:
<؟ PHP
error_reporting (0) ؛
$ content = $ _post ['content'] ؛
إذا (! فارغ (محتوى $))
{
$ codetype = $ _post ['codetype'] ؛
صدى '<div id = postcontent>' ؛
$ content = htmlSpecialChars ($ content) ؛
صدى المحتوى $ ؛
صدى </div>
<type type = hidden name = codetype id = codeType value = '. $ codeType.' />
<نوع الإدخال = اسم الزر = إرسال قيمة = إرسال onClick = insertCode () style = الحدود: 1px Solid #000 ؛ ارتفاع الخط: 18 بكسل ؛ العرض: 60px ؛/> '؛
}آخر
{
؟>
<النمط div = الهامش: 0 auto>
<form id = form1 name = form1 method = post action = insertCode.php>
<label> حدد نوع التعليمات البرمجية لإدراجها
<حدد name = codetype id = codetype>
<Option Value = 'php'> php </soph>
<value Option = 'JS'> JS </soph>
<value Option = 'html'> html </soph>
<Stion Value = 'c'> c </soph>
<Option Value = 'ASP'> ASP </soph>
<Option Value = 'xml'> xml </soph>
<value Option = 'java'> java </soph>
<value Option = 'java'> java </soph>
<value Option = 'csharp'> c#</soph>
<Option Value = 'sql'> sql </soph>
</select>
</label>
<blabel>
<textarea name = content id = content cols = 30 rows = 20 style = width: 600px ؛ الارتفاع: 200 بكسل ؛ الحدود: 1px متقطع #333> </filectarea>
</label>
<p>
<label style = padding-left: 50px ؛>
<type type = إرسال اسم = إرسال قيمة = إرسال النمط = الحدود: 1px Solid #000 ؛ ارتفاع الخط: 18 بكسل ؛ العرض: 60px ؛/>
</label>
</p>
<p> </p>
</form>
</div>
<؟ PHP
}
؟>
في insertcode.php ، يتم استخدام وظيفة insertCode () لاستدعاء وظيفة inserthtml () لصفحة tinymce.html وإدراج الكود في صفحة tinymce.html.
في الكود ، لماذا نحتاج "+قيمة+"؟
نظرًا لأننا نعرض الصفحة ، فسنستخدم المكون الإضافي SyntaxHighlighter لتسليط الضوء على الرمز.
نقطة أخرى يجب شرحها ، هنا ، المحتوى $ = htmlspecialchars (محتوى $) ؛ أجرينا HTMLSpecialChars Escape Operation للرمز نفسه. وبهذه الطريقة ، سيكون الرمز الذي تم إدخاله في قاعدة البيانات آمنة.
حسنًا ، دعنا ننظر إلى 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 ($ article_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 ('code') ؛
</script>
حسنًا ، لقد انتهى الأمر.