Beberapa hari yang lalu, saya merasa bahwa kode penyisipan blog tidak mudah digunakan. Jadi, editor HTML Sina digantikan dengan Tinymce. Dan penyisipan kode sederhana telah dikembangkan. . . Berikut ini adalah proses pengembangan saya.
Pertama, versi Tinymce saya adalah Versi: 3.2.7 (2009-09-22).
Kode Penyisipan Tinymce memerlukan panggilan tinymce. Metode Tinymce. Parameter tidak perlu diubah, nilai adalah apa yang ingin Anda masukkan.
Misalnya, saya menulis fungsi,
Salinan kode adalah sebagai berikut:
fungsi inerthtml (nilai)
{
tinymce.execCommand ('McEinsertContent', false, value);
}
Kemudian, untuk contoh ini, unduhan disediakan. Dalam contoh. Ada tiga dokumen yang terlibat secara total.
tinymce.html insertCode.php save.php ketiga file ini.
tinymce.html adalah halaman kotak teks Tinymce.
Kode utamanya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<type script = text/javascript src = http: //www.vevb.com/tinimce/tiny_mce.js> </script>
<type skrip = teks/javascript>
tinymce.init ({
// Opsi Umum
Convert_urls: false,
Mode: tepat
Elemen: artikel_content,
// Mode: TexTareas,
Tema: Lanjutan,
plugins: safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,
// Opsi tema
tema_advanced_buttons1: save, newdocument, |, tebal, miring, garis bawah, strikethrough, |, justifyleft, justifycenter, justifyright, justifyfull, styleselect, formatSelect, fontselect, fontsizeselect, fontsizeselect,
tema_advanced_buttons2: potong, salin, paste, pastetext, plasteword, |, cari, ganti, |, bullist, numlist, |, Outdent, Indent, Blockquote, |, Undo, Redo, |, Link, Unlink, Anchor, Image, Cleanup, Help, Code, |, InsertDate, Inserttime, Preview, |,
tema_advanced_buttons3: TableControls, |, HR, Remestformat, Visualid, |, Sub, Sup, |, Charmap, Emosi, Iespell, Media, Advhr, |, Print, |, Ltr, RTL, |, Layar Penuh,
tema_advanced_buttons4: InsertLayer, movingward, muncul kembali, absolute, |, styleprops, |, mengutip, abbr, akronim, del, in, attribs, |, visualchars, nonbreak, template, pagebreak,
tema_advanced_toolbar_location: top,
tema_advanced_toolbar_align: kiri,
tema_advanced_statusbar_location: Bottom,
tema_advanced_ressizing: true,
// Contoh konten CSS (harus menjadi situs Anda CSS)
content_css: css/content.css,
// Jatuhkan daftar untuk dialog tautan/gambar/media/templat
template_external_list_url: daftar/template_list.js,
External_link_list_url: Daftar/link_list.js,
External_image_list_url: Daftar/gambar_list.js,
media_external_list_url: daftar/media_list.js,
// ganti nilai untuk plugin template
Template_replace_values: {
Nama pengguna: Beberapa pengguna,
StaffID: 991234
}
});
</script>
<type skrip = teks/javascript>
fungsi inerthtml (nilai)
{
tinymce.execCommand ('McEinsertContent', false, value);
}
</script>
di mana kode JS untuk menginisialisasi TinyMCE. Contoh unduhan tidak termasuk Tinymce, Anda perlu mengunduhnya sendiri. Kemudian ubah SRC kode JS.
Salinan kode adalah sebagai berikut:
<Input Name = Tombol Tipe = Tombol OnClick = Window.Open ('InsertCode.php', 'Masukkan kode', 'Tinggi = 500, Lebar = 600, TOP = 300, Kiri = 300, Toolbar = Tidak, Menubar = Tidak, SCROLLBAR = Tidak, RESEZABLE = Tidak, Lokasi = Tidak, No Status = Tidak') Nilai = Klip di Sini
Kode di atas digunakan untuk membuka file insertCode.php.
Selanjutnya, mari kita lihat insertCode. Kode file ini.
Pertama -tama, kode JS
Salinan kode adalah sebagai berikut:
<bahasa skrip = javascript src = http: //www.gosoa.com.cn/js/jquery.js> </script>
<bahasa skrip = javascript>
fungsi insertCode ()
{
var value = $ ('#Postcontent'). html ();
var codetype = $ ('#codetype'). val ();
// window.opener.inserthTml ('<textArea bingkai = 3 cols = 50 name = code class ='+codetype+'>'+value+'</textarea>');
window.opener.inserthTml ('<pre name = code class ='+codetype+'>'+value+'</pri>');
window.close ();
}
</script>
Berikutnya adalah Kode PHP dan HTML
Salinan kode adalah sebagai berikut:
<? php
error_reporting (0);
$ content = $ _post ['konten'];
if (! kosong ($ konten))
{
$ codetype = $ _post ['codetype'];
echo '<div id = postcontent>';
$ content = htmlspecialchars ($ content);
echo $ konten;
Echo '</div>
<Input Type = Hidden Name = codetype id = codetype value = '. $ codetype.' />
<Input type = tombol nama = Kirim nilai = Kirim OnClick = InsertCode () Style = Border: 1px Solid #000; Line-Height: 18px; Lebar: 60px;/> ';
}kalau tidak
{
?>
<Div Style = Margin: 0 Auto>
<Form ID = Form1 Name = Metode Form1 = Post Action = InsertCode.php>
<label> Pilih jenis kode yang akan dimasukkan
<Pilih name = codetype id = codetype>
<Opsi value = 'php'> php </option>
<Opsi value = 'js'> js </pection>
<Option value = 'html'> html </pection>
<Option value = 'C'> C </pection>
<Option value = 'asp'> asp </pection>
<Option value = 'xml'> xml </pection>
<Opsi value = 'java'> java </pection>
<Opsi value = 'java'> java </pection>
<Opsi value = 'csharp'> C#</pection>
<Option value = 'sql'> sql </pection>
</pilih>
</label>
<label>
<TextAreA Name = Content ID = Content Cols = 30 ROWS = 20 Gaya = Lebar: 600px; Tinggi: 200px; BORDER: 1PX DELEPRED #333> </TextArea>
</label>
<p>
<label style = padding-left: 50px;>
<Input Type = Kirim Nama = Kirim Nilai = Kirim Gaya = Border: 1px Solid #000; Line-Height: 18px; Lebar: 60px;/>
</label>
</p>
<p> </p>
</form>
</div>
<? php
}
?>
Di insertCode.php, fungsi insertCode () digunakan untuk memanggil fungsi inerthtml () dari halaman tinymce.html dan masukkan kode ke halaman tinymce.html.
Dalam kode, mengapa kita membutuhkan '+nilai+'?
Karena kami menampilkan halaman, kami akan menggunakan plug-in sintaksHighlighter untuk menyorot kode.
Poin lain yang harus dijelaskan, di sini, $ content = htmlspecialchars ($ content); Kami melakukan operasi pelarian HTMLSpecialChars untuk kode itu sendiri. Dengan cara ini, kode yang dimasukkan ke dalam database akan aman.
Oke, mari kita lihat save.php lagi, halaman ini digunakan untuk menampilkan konten yang dikirimkan.
Kode utamanya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<?
$ Artikel_content = $ _post ['artikel_content'];
function transcode ($ str)
{
if (kosong ($ str))
{
mengembalikan false;
}
$ str = str_replace ('', '', $ str);
$ str = str_replace ('', '', $ str);
$ str = str_ireplace ('<br>', n, $ str);
$ str = str_ireplace ('<pre', '<pre name = code', $ str);
mengembalikan $ str;
}
Echo Transcode ($ artikel_content);
?>
<skrip class = javascript src =/tinymce/lightcode/scripts/shcore.js> </script>
<skrip class = javascript src =/tinymce/lightcode/skrip/shbrushcsharp.js> </script>
<skrip class = javascript src =/tinymce/lightcode/scripts/shbrushphp.js> </script>
<skrip class = javascript src =/tinymce/lightcode/scripts/shbrushjscript.js> </script>
<skrip class = javascript src =/tinymce/lightcode/scripts/shbrushjava.js> </script>
<skrip class = javascript src =/tinymce/lightcode/scripts/shbrushvb.js> </script>
<skrip class = javascript src =/tinymce/lightcode/scripts/shbrushsql.js> </script>
<skrip class = javascript src =/tinymce/lightcode/scripts/shbrushxml.js> </script>
<skrip class = javascript src =/tinymce/lightcode/skrip/shbrushdelphi.js> </script>
<skrip class = javascript src =/tinymce/lightcode/scripts/shbrushpython.js> </script>
<skrip class = javascript src =/tinymce/lightcode/scripts/shbrushruby.js> </script>
<skrip class = javascript src =/tinymce/lightcode/scripts/shbrushcss.js> </script>
<skrip class = javascript src =/tinymce/lightcode/scripts/shbrushcpp.js> </script>
<skrip class = javascript>
dp.synaxhighlighter.highlightall ('kode');
</script>
Oke, sudah berakhir.