يتضمن مشروع التطوير الحالي مربعات نصية غنية. بعد معرفة الكثير من محرري النص الأثرياء ، قررت أخيرًا استخدام Ueditor من Du Niang. السبب: إنه يحتوي على وظائف قوية ويأتي مع صور وتحميلات الفيديو التي يتم تكييفها مع الواجهة الخلفية Java.
معرض المشروع
بدون مزيد من اللغط ، عنوان المشروع هو: http://ueditor.baidu.com/website/
من المؤسف أن Jianshu لا يدعم الروابط الخارجية على مواقع أخرى.
عملية التكامل
التحول الخلفي
نظرًا لأن المشروع يستخدم إطار عمل Springboot ، فإن دعم Ueditor للواجهة الخلفية Java هو فقط لإعطاء ملف JSP. لذلك ، يجب معالجة الملف وتعديله إلى وحدة تحكم موحدة لـ Springboot.
@controller @tructional @requestmapping ("/static/common/ueditor/jsp") الفئة العامة jspcontroller { @requestmapping ("/controller") responsebody public void getConfiginFo (httpservletrequest request ، httpservledsponse) String ROOTPATH = request.getSession (). getServletContext () .getRealPath ("/") ؛ حاول {string exec = new ActionEnter (request ، rootpath) .exec () ؛ printWriter Constr = response.getWriter () ؛ الكاتب. write (exec) ؛ الكاتب. flush () ؛ الكاتب. } catch (ioException | jsonexception e) {e.printstacktrace () ؛ }}كما ذكر أعلاه ، يدعم المشروع طلبات التحميل من/static/common/ueditor/jsp/controller.
طلب الواجهة الأمامية
أضف دعم ueditor في الواجهة الأمامية. أي استيراد حزمة Uediootr بأكملها في مشروع ، واستيراد JS حيث يتم استخدام التحكم.
عند مقدمة المشروع ، يكون بنية الكود المقابلة الخاصة بي كما يلي:
مقدمة الصفحة ، يتم تقديم الرمز المقابل على النحو التالي:
<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/common/ueditor/ueditor.all.js}"> </script> فقط قم بتثبيت محرر Ueditor. فيما يلي معلمات التهيئة الخاصة بي ، للرجوع إليها فقط.
// instantiation editor var ue = ue.geteditor (''+id ، {أشرطة الأدوات: [['fontfamily' ، // font 'font'fontsize' ، // font size'undo '، // undo' ، // redo '| // Bold'underline '، // unline''strikethrough' ، // strikethrough '|' ، 'ursifyleft' ، // list-align'justifyright '، // allign'justeCenter' ، // center-align '|' ، 'link' ، // hyperlink ' // Music '، // music //' insertvideo '، // video' ، // clear format 'FormatMatch' ، // format brush 'source' ، // source code]] ، enableeautosave: false ، autoheightenabled: true ، autofloatenabled: true ، inialFrameweTth: wide ، initialframeight: qualter ،في هذه المرحلة ، سترى مربع نص غني عند زيارة صفحتنا.
ومع ذلك ، سيؤدينا إلى وجود خطأ في ملف تكوين الخلفية ولا يمكن تنفيذ وظيفة التحميل.
تنفيذ وظيفة التحميل
تعديل ملف config.js ومسار الطلب العالمي المقابل. هذا الطلب هو الحصول على بيانات التكوين المقابلة لـ config.json. يمكنك إرجاع معلومات التكوين مباشرة في وحدة التحكم أو قراءة ملفات JSON في وحدة التحكم. أنا أستخدم طريقة قراءة ملفات التكوين هنا ، باستخدام الطريقة التي تأتي مع UEDITITOR. تم تنفيذ المقالة في البداية. فيما يلي طلب يجب تعديله:
بعد الانتهاء من التكوين أعلاه ، قم بتحميل صفحة Ueditor مرة أخرى ، ويمكن إكمال زر التحميل للصورة.
ملاحظة: إذا بدأت وضع تصحيح الأخطاء ، فأضف نقاط التوقف واختبارها عند تحميل سلسلة JSON. سيحدث خطأ في مهلة. لم يتم العثور على حقل التكوين في ملف التكوين في الوقت الحالي. كل شيء ، تجدر الإشارة هنا. إذا لم تكن جميع التكوينات مشكلة ، ولكن لا يزال يتم إرجاع خطأ تكوين الخلفية ، فيمكنك إلغاء جميع نقاط التوقف وتجربتها.
ملاحظة: يتطلب التحميل إضافة مكون التحميل ، استخدم fileuoload هنا
<Rependency> <roupeD> commons-filepload </groupId> <StifactId> commons-filepload </shintifactid> <الإصدار> 1.3 </version> </sependency>
استخدم Servlet لتنفيذ التحميل
/** * حاول استخدام Servlet لتنفيذ Ueditor * * Author onywang * create 2018-02-05 2:40 **/ @webservlet (name = "ueditorservlet" ، urlpatterns = "/static/common/ueditor/ueditor") public ueditorrollerservlevlet DOPOST (طلب httpservletrequest ، استجابة httpservletresponse) يلقي servletexception ، ioException {request.setcharacterencoding ("UTF-8") ؛ استجابة. printWriter out = response.getWriter () ؛ servletContext application = this.getServletContext () ؛ String ROOTPATH = Application.getRealPath ("/") ؛ سلسلة الإجراء = request.getParameter ("الإجراء") ؛ String result = new ActionEnter (request ، rootpath+"web-inf/classes") .exec () ؛ if (Action! = null && (action.equals ("listfile") || Action.equals ("listimage"))))) {rootpath.replace ("//" ، "/") ؛ النتيجة = result.replaceall (Rootpath ، "/") ؛ } out.write (نتيجة) ؛ } override void void doget (httpservletrequest req ، httpservletresponse resp) يلقي servletexception ، ioException {dopost (req ، resp) ؛ } استخدم طريقة servlet وإنشاء servlet مشروحة جديدة.
تحتاج إلى إضافة شرح ServletComponentscan إلى الطريقة الرئيسية.
قم بتعديل مسار الوصول الافتراضي لـ UEDitor.
ملاحظة: تحت Springboot ، يتم وضع جميع ملفات الموارد ضمن الفصول. كل شيء ، كن حذرا عند التعامل مع المسارات. أضف مسارات إلى ويب/فئات
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.