Versi terbaru CKEditor dan CKFinder dapat diunduh dari situs web resmi (http://cksource.com).
Tempatkan dua sumber daya di atas di direktori root situs web: /CKEditor (di sini di versi 3.6.2, Anda perlu memasukkan folder _Samples\ckeditor ke dalam folder terkompresi) dan /CKFinder (tidak peka huruf besar/kecil, Anda dapat meletakkan folder di sini secara langsung). )
Perhatikan, di sini terkadang ada kesalahan dalam generasi. Misalnya, ada tag tipe AssemblyTitle duplikat, terutama karena situs web memiliki lebih dari satu AssemblyInfo.cs untuk menghapus file yang diunduh. Atau hapus folder _source. Jika Anda memiliki pertanyaan di sini, Anda dapat menghubungi saya: QQ saya: 515072775
Menggunakan CKEditor di halaman:
<textarea cols="80" id="prcontent" name="content" rows="50"> Halo, penggunaan Anda berhasil! </textarea>
<scrip remove ttype="text/javascrip remove t" >
CKEDITOR.replace('konten', { tinggi:200, lebar: 520 });
</scrip去掉t>. .
CKEditor tidak dilengkapi dengan fungsi unggah, jadi perlu diunggah dengan CKFinder
Langkah 1: Situs web perlu mereferensikan dll CKFinder (direktori: /CKFinder/bin/Release/CKFinder.dll)
Langkah 2: Konfigurasikan config.js CKEditor (direktori: /CKEditor/config.js) di fungsi CKEDITOR.editorConfig, dan fungsi yang tidak perlu dapat dihapus
CKEDITOR.editorConfig = fungsi(konfigurasi) {
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; Jangan menulis "~/ckfinder/..." atau "/ckfinder/..."
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html? Jenis=Gambar';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html? Jenis=Berkedip';
config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
config.filebrowserWindowWidth = '800'; Pengaturan ukuran pop-up Telusuri Server
config.filebrowserWindowHeight = '500';
}
CKFinder.setupCKEditor(null, '.. /ckfinder/'); Perhatikan bahwa jalur ckfinder sesuai dengan penempatan aktual
Konfigurasi CKFinder:
Buka kontrol pengguna config.ascx di bawah "ckfinder\" dan ubah jalur BaseUrl-nya:
BaseUrl = "~/ckfinder/userfiles/"; atau BaseUrl = "ckfinder/userfiles/";
Berikut adalah poin tambahan: berguna untuk menguji di IIS. Jika tidak, jika unggahan tidak berhasil, Anda akan berpikir bahwa ada yang salah dengan konfigurasi.
CKEditor memiliki fungsi unggah setelah konfigurasi selesai, tetapi bagaimana jika file gambar adalah nama gambar asli dan ingin mengubahnya menjadi nama file acak? Kemudian lihat langkah ketiga.
Langkah 3: Ubah kode sumber CKFinder. CKFinder hadir dengan kode sumbernya sendiri, direktori: /CKFinde/_source
Buat proyek baru saat ini di VS ke CKFinde/_source/CKFinder.Net.sln, file solusi yang diunduh di sini mungkin tidak terbuka di VS2008, Anda dapat memilih untuk menambahkan proyek baru atau menggunakan versi VS yang lebih baru untuk membukanya.
1) Buka file /Settings/ConfigFile.cs
Temukan 27 baris dan tambahkan atribut: bool publik RandomReName; Ganti nama secara acak
Temukan 67 baris dan tetapkan nilai ke properti barusan: RandomReName = true; Nilai defaultnya adalah true
Simpan file yang ditutup
2) Buka file /Konektor/Config.cs
Temukan 62 baris, tambahkan atribut:
bool publik RandomReName
{
get { returnSettings.ConfigFile.Current.RandomReName; }
}
Simpan file yang ditutup
3) Buka file /Connector/CommandHandlers/FileUploadCommandHandler.cs
Temukan baris 64 dan tambahkan kode penghakiman:
if ( Config.Current.RandomReName) // Gunakan nama acak
sFileName =DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." +sEkstensi;
Simpan file yang ditutup
4) Buat ulang proyek, timpa /ckfinder/_source/bin/Debug/CKFinder.dll /ckfinder/bin/Release/CKFinder.dll atau hapus referensi yang ditambahkan sebelumnya ke proyek situs web dan hapus kembali dll dari proyek CKFinder.Net
Langkah terakhir: Buka /ckfinder/config.ascx
Temukan 40 baris dan tambahkan atribut: (Bahkan, Anda dapat menambahkan ini atau tidak, karena ada nilai default yang ditetapkan sebelumnya, tetapi harus diatur ke false saat menggunakan nama aslinya)
//上传完毕后使用随机文件名
RandomReName = benar;
Simpan tutup
Oke, sekarang konfigurasi sudah berhasil, CKEditor dapat memiliki fungsi upload. Pengaturan fungsi lain akan terus dipelajari saat Anda punya waktu~
Satu pengingat lagi: folder CKEditor dan CKFinder memiliki banyak hal yang tidak perlu, seperti nama dengan garis bawah, proyek .net tidak membutuhkan php, asp.
Jika ada kesalahan dalam mengunggah file: File tidak dapat dilihat karena alasan keamanan. Silakan hubungi administrator sistem Anda dan periksa profil CKFinder.
Anda perlu memodifikasi file config.ascx
penggantian publik bool CheckAuthentication()
{
reture salah;
}
Dimodifikasi menjadi:
penggantian publik bool CheckAuthentication()
{
Validasi formulir
returnRequest.IsAuthenticated;
}
3. Terapkan kontrol CKEditor pada halaman [dua metode, a dan b]
[A: Mengutip INSTALL.html dalam paket terkompresi]
Jika Anda ingin mengintegrasikan CKEditor dengan halaman ASP.NET Anda, ikuti langkah-langkah yang diuraikan di bawah ini.
1. Buka situs unduhan CKEditor resmi dan unduh versi terbaru dari CKEditor 3.x dan CKEditor untuk ASP.NET Control.
2. Buka kemasan kedua paket instalasi ke lokasi yang diinginkano Hapus n.
3. Tambahkan referensi ke CKEditor untuk ASP.NET Control ke situs web Anda.
Di Visual Studio gunakan perintah Tambahkan Referensi dan telusuri file bin\Release\CKEditor.NET.dll dari CKEditor yang dibongkar untuk paket instalasi ASP.NET. Anda juga dapat menyalin file DLL secara manual ke folder bin aplikasi Anda.
4. Salin file editor yang tidak dikemas dari paket instalasi CKEditor 3.x dan tempelkan ke direktori aplikasi situs web Anda.
5. Daftarkan CKEditor untuk ASP.NET Control di halaman Anda:
<%@ register assembly="CKEditor.NET" namespace="CKEditor.NET" tagPrefix="CKEditor" %>
6. Masukkan instance CKEditor ke dalam isi halaman:
<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>
【b】
1. <head>Tambahkan referensi js yang sesuai ke halaman:
<scrip remove t type="text/javascrip remove t" language="javascrip remove t" src="ckfinder/ckfinder.js"></scrip去掉t>
<scrip remove t type="text/javascrip remove t" language="javascrip remove t" src="ckeditor/ckeditor.js"></scrip去掉t>
2. Kemudian, <body>tambahkan kode berikut ke lokasi di mana kontrol perlu ditempatkan, dan ada metode penggunaan berikut:
(1) Tambahkan atribut class yang ditentukan ke kontrol
<textarea id="textarea1" name="editor1" class="ckeditor">halo!</textarea>
Kontrol Server:
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>
(2) Injeksikan kode js - di sini kode js paling baik ditulis setelah kontrol, atau <head>di dalamnya
<textarea id="textarea1" name="editor1">halo!</textarea>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('editor1', { height:400, width:800 });
</scrip去掉t>. .
Kontrol Server:
<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('<%=mckeditor. ID Klien %>');
</scrip去掉t>. .
=============================================================================================================
Referensi kedua:
asp.net metode konfigurasi ckeditor 3.0.1 dan ckfinder_aspnet_1.4.1.1
Menurut petunjuk http://ckeditor.com.cn/docs/, CKEditor dikonfigurasi di halaman web, dan ketika dilihat di browser, saya merasa bahwa antarmuka CKEditor memang sangat indah, tetapi ketika saya dengan senang hati ingin mencoba fungsi unggah gambar, saya tidak melihat tombol untuk mengunggah gambar.
Melanjutkan pencarian online, kesimpulannya adalah bahwa "CKEditor tidak memiliki fungsi unggah itu sendiri, dan perlu diintegrasikan dengan CKFinder untuk mencapai fungsi unggah".
Kemudian unduh CKFinder 1.4.1.1 untuk Asp.net, unzip, dan letakkan folder ckfinder di direktori root proyek - karena banyak sumber di Internet mengatakan bahwa yang terbaik adalah menempatkan CKEditor dan CKFinder di direktori level yang sama. Dan dengan cara ini, kami akan memiliki dua folder lagi di proyek kami tanpa alasan. Saya sendiri memiliki fetish kebersihan kode, saya pikir,
Tinggalkan folder sebagai tanda penghormatan kepada penulis, itu sudah cukup. Menjaga dua akan membuat saya merasa sangat tidak nyaman.
Sebelum kita mengintegrasikan CKFinder ke dalam CKEditor, kita juga perlu mengkonfigurasi CKFinder sedikit. Teman-teman pintar harus dengan mudah berpikir bahwa karena ini adalah plug-in untuk mengunggah file, sebagian besar hal yang akan dikonfigurasi adalah jalur untuk mengunggah file.
Jalur unggah default CKFinder adalah folder userfiles di direktorinya sendiri, tetapi saya telah memasukkan CKFinder ke folder CKEditor, jika saya menyimpan gambar di userfiles, sistem harus melewati folder tiga lapis untuk menemukan file atau gambar, jadi saya berencana untuk mengunggah gambar ke folder upFile di direktori root proyek.
Untuk mengimplementasikan fungsi ini, Anda perlu memodifikasi file config.ascx di bawah CKFinder untuk mengubah BaseUrl = "/ckfinder/userfiles/" menjadi BaseUrl = "~/upFile/". Kemudian, potong file CKFinder.dll dari folder CKFinder/bin ke folder bin proyek sistem. Atau perkenalkan CKFinder.dll ke dalam proyek dengan menambahkan referensi.
Selanjutnya, kita dapat menggunakan CKEditor dengan pengunggahan file:
Masukkan folder CKFinder ke dalam folder CKEditor, dan di halaman, impor file js dari keduanya:
<scrip hapus tsrc="http://www.cnblogs.com/ckeditor/ckeditor.js" type="teks/javascrip hapus t"></scrip去掉t>
<scrip hapus t src="http://www.cnblogs.com/ckeditor/ckfinder/ckfinder.js" type="text/javascrip hapus t"></scrip去掉t>
Ada dua cara untuk mereferensikan editor ke kontrol:
Salah satunya adalah menggunakan area teks kontrol klien:
<textarea rows="20" cols="40" name="txtContent" id="txtContent"></textarea>
<scrip remove t type="text/javascrip remove t" >
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</scrip去掉t>. .
Yang kedua adalah menggunakan kotak teks kontrol sisi server:
<asp:TextBox id="txtContent" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox>
<scrip remove t type="text/javascrip remove t" >
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</scrip去掉t>Secara pribadi, saya pikir karena ini adalah program asp.net, maka gunakan kontrol sisi server. Meskipun berjalan sedikit lebih lambat daripada kontrol klien, pengembangannya sedikit lebih cepat. Dan, sebagai programmer, kami selalu ingin mencoba semua kemungkinan sebelum memilih salah satu yang kami sukai.
Bahkan, Anda juga dapat menetapkan nilai ke kontrol tanpa menggunakan Text='<%# Bind("info") %>', dan menggunakannya langsung di backcode
this.txtContent.Text="Nilai awal"
Itu juga mungkin. Anda juga dapat menggunakan kode berikut secara langsung untuk mendapatkan nilainya:
Kode CKFinder dan CKEditor. Ketika saya menjalankan halaman dengan editor secara langsung, kompiler memberikan kesalahan berikut:
string content=this.txtContent.Text
Catatan: Atribut TextMode="MultiLine" sangat penting, jika tidak, nilainya akan menjadi null.
Saya tidak merampingkan sebelum men-debug program
Jenis atau nama namespace "ControlDesigner" tidak ada di namespace "System.Web.UI.Design" (apakah tidak ada referensi rakitan?)
Kesalahannya ada di baris 19 ckeditor\ckfinder\_source\FileBrowserDesigner.cs, jadi cukup sederhanakan file:
Langkah pertama adalah merampingkan ckeditor: hapus folder _samples dan _source, dan hanya tiga file bahasa yang dapat disimpan di direktori lang: en.js, zh.js, dan zh-cn.js;
Langkah kedua adalah merampingkan ckfinder: hapus folder _samples dan _source, dan hanya simpan file bahasa en.js, zh.js, dan zh-cn.js di direktori lang.
Perhatikan baris kedua kode js di sini: CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/'); , di mana "http://www.cnblogs.com/ckeditor/ckfinder/" adalah jalur relatif ckfinder ke halaman saat ini,
Harap jangan menyalin dan menempelkan kode secara langsung, jika tidak, kesalahan berikut mungkin muncul saat mengunggah gambar:
Deskripsi: HTTP 404. Resource yang Anda cari (atau salah satu dependensinya) mungkin telah dihapus, atau namanya telah berubah, atau untuk sementara tidak tersedia. Silakan periksa URL berikut dan pastikan ejanya dengan benar.
URL yang diminta: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
Jadi, jika Anda tidak ingin memasukkan ckfinder ke folder ckeditor seperti yang saya lakukan, tidak apa-apa, selama Anda mengisi perubahan jalur dengan benar di sini.
Saya pikir ini akan dianggap sebagai semua pekerjaan, tetapi ketika saya mengunggah gambar, prompt berikut muncul:
Untuk alasan keamanan, file tidak dapat dilihat. Silakan hubungi administrator sistem Anda dan periksa profil CKFinder.
Tidak mungkin, seperti kata pepatah, hal-hal baik sulit dimakan. Saya hanya bisa bertanya kepada guru terbaik - Baidu. Salin informasi prompt di atas ke kotak pencarian Baidu, dan setelah memasuki mobil, saya menemukan posting tentang integrasi PHP ckeditor. Berikut cara melakukannya:
Ubah file config.ascx di bawah CKFinder untuk mengubah nilai pengembalian fungsi bool CheckAuthentication() penggantian publik dari return false menjadi return true.
Diuji lagi, gambar berhasil diunggah! |
Diposting pada 18/04/2015 19.11.55
|
|
|
