Proyek pengembangan saat ini melibatkan kotak teks yang kaya. Setelah belajar tentang banyak editor teks kaya, saya akhirnya memutuskan untuk menggunakan Ueditor Du Niang. Alasan: Ini memiliki fungsi yang kuat dan dilengkapi dengan gambar dan unggahan video yang disesuaikan dengan backend Java.
Galeri Proyek
Tanpa basa -basi lagi, alamat proyek ini adalah: http://ueditor.baidu.com/website/
Sangat disayangkan bahwa Jianshu tidak mendukung tautan eksternal di situs lain.
Proses integrasi
Transformasi backend
Karena proyek menggunakan kerangka kerja Springboot, dukungan Ueditor untuk backend Java hanya untuk memberikan file JSP. Oleh karena itu, file perlu diproses dan dimodifikasi menjadi pengontrol terpadu untuk springboot.
@Controller @transactional @requestMapping ("/static/common/ueditor/jsp") kelas publik jspcontroller {@RequestMapping ("/controller") @ResponseBody void getConfigInfo (httpservletrequest, httpservleteSpons response) {httpservletre ("), httplequest, httpservleteSponsepons response. String rootPath = request.getSession (). GetserVletContext () .getRealPath ("/"); coba {string exec = ActionEnter baru (request, rootpath) .exec (); Printwriter writer = response.getWriter (); writer.write (exec); writer.flush (); writer.close (); } catch (ioException | jsonexception e) {e.printstacktrace (); }}Seperti disebutkan di atas, proyek mendukung permintaan unggahan dari/static/common/ueditor/jsp/controller.
Permintaan front-end
Tambahkan dukungan Ueditor di front-end. Artinya, impor seluruh paket Uediootr ke dalam suatu proyek, dan impor JS tempat kontrol digunakan.
Saat Pendahuluan Proyek, struktur kode yang sesuai adalah sebagai berikut:
PENDAHULUAN Halaman, kode yang sesuai diperkenalkan sebagai berikut:
<script type = "text/javaScript" charset = "utf-8" th: src = "@{/static/common/ueditor/ueditor.config.js}"> </script> <script type = "Text/JavaScript" Charset = "UTF-8" TH: SRC = "@{/Static/Static/Static/ueditor/uedor/uedor/uedor/uedor/uedor/uedor/uDitor/o/uedor/uedor/uDitor Cukup instantiate editor ueditor. Di bawah ini adalah parameter inisialisasi saya, hanya untuk referensi.
// Editor Instantiasi var ue = ue.getEditor (''+id, {toolbars: [['fontfamily', // font 'font'fontsize', // font size'undo ', // undo', // redo '|', 'emosi', // Emosi 'foncolor', // font 'font',/endo 'font',//endo font 'undo',//endo font 'uchor', // bold'underline ', // unline'strikethrough', // strikethrough '|', 'justifyleft', // list-align'justifyright ' // musik ', // musik //' insertVideo ', // video', // format 'format', // format sikat 'sumber', // kode sumber]], enableAutoSave: false, autoheighenabled: true, autofloatenabled: true, initialframewidth: initiHeight, autoMrameHeight: autofloatenabled: true, initialframeWidth: webar, initiNeight: Autofloatenabled: true, initialframewidth: widh, autoMrameNe;Pada titik ini, Anda akan melihat kotak teks yang kaya saat mengunjungi halaman kami.
Namun, itu akan meminta kami bahwa ada kesalahan dalam file konfigurasi latar belakang dan fungsi unggahan tidak dapat diimplementasikan.
Menerapkan fungsi Upload
Ubah file config.js dan jalur permintaan global yang sesuai. Permintaan ini adalah untuk mendapatkan data konfigurasi yang sesuai dengan config.json. Anda dapat langsung mengembalikan informasi konfigurasi di pengontrol atau membaca file JSON di pengontrol. Saya menggunakan metode membaca file konfigurasi di sini, menggunakan metode yang disertai dengan uEditor. Artikel ini telah diimplementasikan di awal. Berikut adalah permintaan yang perlu dimodifikasi:
Setelah menyelesaikan konfigurasi di atas, muat halaman Ueditor lagi, dan tombol pengunggahan gambar dapat diselesaikan.
Catatan: Jika Anda memulai mode debugging, tambahkan breakpoint dan uji saat memuat string JSON. Kesalahan batas waktu akan terjadi. Bidang konfigurasi belum ditemukan di file konfigurasi untuk saat ini. Semua, harus dicatat di sini. Jika semua konfigurasi tidak bermasalah, tetapi kesalahan konfigurasi latar belakang masih dikembalikan, Anda dapat membatalkan semua breakpoint dan mencobanya.
Catatan: Mengunggah memerlukan penambahan komponen unggah, gunakan Fileuoload di sini
<dependency> <GroupId> Commons-Fileupload </groupid> <ArTifactId> Commons-Fileupload </artifactId> <version> 1.3 </version> </gandendency>
Gunakan servlet untuk mengimplementasikan unggahan
/** * Cobalah untuk menggunakan servlet untuk mengimplementasikan ueditor * * @author onywang * @create 2018-02-05 2:40 **/ @WebServlet (name = "UEditorServlet", UrlPatterns = "/Static/Common Extends @Obltitor @OVERPLET @OVERPLOLTERSVLET/UEDITORT") DOPOST (permintaan httpservletRequest, respons httpservletResponse) melempar servletException, ioException {request.setcharacterencoding ("UTF-8"); response.setHeader ("tipe konten", "teks/html"); Printwriter out = response.getWriter (); ServletContext application = this.getSerVletContext (); String rootpath = application.getRealPath ("/"); String action = request.getParameter ("action"); String result = ActionEnter baru (permintaan, rootpath+"web-inf/class") .exec (); if (action! = null && (action.equals ("listFile") || action.equals ("listImage")))) {rootpath = rootpath.replace ("//", "/"); hasil = result.replaceall (rootpath, "/"); } out.write (hasil); } @Override Protected void doGet (httpservletRequest req, httpservletResponse resp) melempar servletException, ioException {dopost (req, resp); } Gunakan metode servlet dan buat servlet beranotasi baru.
Anda perlu menambahkan anotasi @SerVletComponentScan ke dalam metode utama.
Ubah jalur akses default dari Ueditor.
Catatan: Di bawah Springboot, semua file sumber daya ditempatkan di bawah kelas. Semua, hati -hati saat menangani jalur. Tambahkan jalur ke web-inf/kelas
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.