سألخص المشكلات التي واجهتها في عملية تخصيص نمط المحرر ، وخاصة واجهة التطوير الثانوية للمحرر وتخصيص الأسلوب مع الزاوي. هناك العديد من المشاكل. أخيرًا ، بمساعدة ** ، تم الانتهاء منه. لا يزال هناك أي تفاعل بين الإصدار القديم والإصدار الجديد ، لكن هذا ليس صعبًا. فيما يلي يشرح القضايا بشكل منفصل.
تطور Ueditor
يمكنك تنزيل أي إصدار على الموقع الرسمي واستخدامه: http://ueditor.baidu.com/website/download.html بعد التنزيل ، يمكنك استخدامه وفقًا للتكوين على الموقع الرسمي. عنوان المستند: http://fex.baidu.com/ueditor/ هناك الكثير من المشكلات في تطوير Ueditor الثانوي ، وهي مدرجة هنا.
1. Ueditor تقوم تلقائيًا بتصفية علامة DIV في علامة P.
خلال عملية النمط المخصص ، وجدت أنه تم ترشيح جميع divs وعدد علامات UNP. لقد وجدت الكثير من المعلومات عبر الإنترنت ، لكن لم يكن أي منها مفيدًا. في وقت لاحق ، رأيت كتابة رئيسية مفادها أن تكوين إصدارات مختلفة من Ueditor مختلفة. هنا كتبت الحل: افتح ملف تكوين ueditor.config.js وأضف الكود التالي:
، leftdivtranstop: خطأ
لاحظ أنه يتم إضافته يدويًا في Window.uediroe_config! بالإضافة إلى ذلك ، واجه بعض الأشخاص مواقف مماثلة ويمكنهم الرجوع إلى: http://www.cnblogs.com/olive116/p/3464495.html
2. كيفية إدراج الأنماط المخصصة في المحرر؟
يتم توفير الواجهة في المحرر ، دعنا نلقي نظرة.
دالة inserthtml () {var value = proft ('insert html code' ، '') ؛ ue.geteditor ('editor'). execcommand ('inserthtml' ، value)}إذن كيف تستخدم هذه الواجهة في مشروعنا؟ أولاً ، تحتاج إلى إدراك المحرر ، وعادة ما تستخدم ue.geteditor () مباشرة للحصول على المثيل.
// استخدم طريقة المصنع Geteditor لإنشاء مثيل المحرر والرجوع إليه. إذا قمت بالإشارة إلى المحرر تحت إغلاق معين ، فيمكنك الاتصال مباشرة بـ UE.GetEditor ("محرر") للحصول على المثيل ذي الصلة قبل استخدامه. نحتاج إلى تقديم المحرر من أجل استدعاء طريقته.
<script src = "libs/ueditor/ueditor.config.js"> </script> <script src = "libs/ueditor/ueditor.all.min.js"> </script>
إنشاء مثال محرر في مشروعنا الزاوي. يوفر المحرر طرقًا جاهزة للتسوية:
// إنشاء العمود الفعلي للمحرر $ scope.ready = function (ueditor) {window.editor = ueditor ؛} ؛حسنًا ، يمكننا الآن استخدام مثيل المحرر. بعد ذلك ، دعونا نلقي نظرة على الأنماط المخصصة.
نمط مخصص
دعنا نلقي نظرة على أسلوب القائمة الأكورديون التي كتبناها في متناول اليد. عنوان التنزيل: https://github.com/foreverjiangting/set-menu/tree/master/menu يستخدم التفاعل المستخدم هنا data-toggle = "Collapse" ، لكنه يتعارض مع NG ، لذلك يجب استخدام NG للتحكم في التفاعل. دعونا نرى كيف تكتب:
<!-أضف شريط الأدوات-> <viv> <h4> شريط الأدوات </h4> <!-محتوى الشريط الجانبي-> <div> <a ng-click = "toggle ('titlestyle')"> <span> </span> home </a> <ul ng-hide = "titlestyle" id = "usermeun" ng-click = "inserthtml ('titles' ، title)"> <a> {{title.name}} </a> </li></ul> <a ng-click = "toggle ('titleicon')"> </span> icon </a> <ul ng-hide = "titleicon" sources.imgs "ng-click =" inserthtml ('imgs' ، img) "> <a> <img ng-src =" {{img.url}} "> </a> </li> </ul> <a ng-click =" toggle ('titleyouixia') " ng-hide = "titleyouxia" id = "glyphicnmenu"> <li ng-repeat = "yx في المصادر. ng-click = "toggle ('toolserve')"> <span> </span> لوحة الرسائل </a> <ul ng-hide = "tetleserve" id = "servemenu"> <li ng-repeat = "ser in sources.sers" ng-click = "inserthtml ('sers' ، ser) "> <a> {{ser.name}} </a> </li></ul> <a ng-click =" toggle ('titlearticle') "> <span> </span> المقالات الموصى بها </a> <ul ng-hide =" titlearticle "id =" inticlemenu "> ng-click = "inserthtml ('arcs' ، arc)"> <a> {{arc.article}} </a> </li> </ul> </viv> <!-موضوع المحتوى-> </div>الرمز في JS كما يلي:
// نمط تفاعل شريط الأدوات $ scope.titlestyle = $ scope.titleicon = $ scope.titleyouxia = $ scope.titleserve = $ titlearticle = false ؛ $ scope.toggle = function (style) {$ scope [style] =! نطاق $ [style] ؛}تأثير الأكورديون الذي تتحكم فيه NG بسيط وخفيف ، مع وجود كمية صغيرة من التعليمات البرمجية.
الآثار هي كما يلي:
بعد كتابة النمط ، سيتم إدراجه في المحرر. فكيف يتم إدخاله؟ هناك نوعان من الأشياء هنا: أدخل مباشرة ، وأدخل وفقًا للمقالات بعد البحث. من الأسهل إدخالها مباشرة.
$ scope.inserthtml = function (type ، item) {if (type === 'leghles' || type === 'imgs') {editor.execcommand ('inserthtml' ، item.html) ؛}التأثير بعد الإدراج هو كما يلي:
بالطبع ، ما فائدة القيام بذلك؟ يستخدم بشكل أساسي المحتوى في المحرر ويستخدم ملزمة بيانات NG لتعكسه على التطبيق ، وبالتالي إنشاء واجهة تحرير مقالة التطبيق.
إنتاج وظيفة البحث
يتم الحصول على البيانات بشكل طبيعي من API. كيفية الحصول على البيانات في API؟ دعونا نلقي نظرة. نحن نستخدم HTTP بشكل أساسي للحصول على البيانات ، ثم نستخدم الطريقة التي تتساقط في ذلك الوقت ، والحصول على HTTP ، والحصول على البيانات ، ثم استخدام الطريقة التي تتساقط في ذلك الوقت ، والحصول على بيانات scope.data.
Angular.Module ('service'). الخدمة ('articleservice' ، function ($ http) {return {searchArticle: function (title) {return $ http.get ('api/article/search' ، {data: {title: title}) ؛}} ؛} ؛}) ؛هنا نعلن عن مقالات API وإرجاع بيانات API ، لذلك نحن حقن التبعية في الصفحة للاتصال بها لاستدعاء طريقتها. دعونا نلقي نظرة على الكود: عادة مكالمات الخدمة
يتم وضع البيانات التي يتم إرجاعها بواسطة API في مجلد ، ويتم وضع وحدة التحكم التي تتحكم في البيانات في مجلد. دعونا نلقي نظرة على كيفية استدعاء بيانات API مرة أخرى في وحدة التحكم.
Angular.Module ('article.controllers'). وحدة تحكم ('servicectrl' ، الوظيفة (scope $ ، $ rootscope ، $ filter ، $ timeout ، $ state ، $ stateparams ، contentservice ،، articleservice ، type) {type) {type) {لاحظ أنك تحتاج إلى حقن مقالات المقالات في وحدة التحكم قبل أن تتمكن من إعادة الاتصال بالبيانات. كيف تدعو البيانات مرة أخرى؟ انظر إلى الكود التالي:
var arcfullSearch = {text: '' ، النتيجة: [] ، محدد: [] ، // تخزين البيانات المحددة أولاً في الصفيف تبدأ البحث: function () {var self = this ؛ var text = self.text.trim () تم تمريره في self.result = data.data ؛ // الحصول على البيانات} ، الدالة (err) {console.log (err) ؛}) ؛ } ،} ؛حسنًا ، لقد نجحنا في الاتصال إلى بيانات الوظيفة. فيما يتعلق بقسم البحث ، ما يلي هو ملخص لنقاط المعرفة غير المعروفة.
ملخص نقاط المعرفة
1. كيفية كتابة صفيف في سلسلة
2. فيما يتعلق باستخدام استبدال البديل بوظيفة
ينص ECMASCRIPT على أن استبدال المعلمة لطريقة استبدال () يمكن أن يكون وظيفة أو سلسلة. في هذه الحالة ، تستدعي كل مباراة الوظيفة ، والكلمة التي تعيدها
سيتم استخدام السلسلة بدلاً من النص. تشير المعلمة الأولى التي تم إرجاعها بواسطة وظيفة رد الاتصال عن الوظيفة إلى حرف المطابقة ، والثاني ثم بيانات حزمة المطابقة. دعونا نلقي نظرة على الكود.
3. ما هو الجحيم [p.slice (0 ، index)] ستعرف بعد تصحيح الأخطاء.
دعونا نرى ما يعنيه رمز التوليف.
var arr = serve.map (function (xx) {return item.html.replace (/{{([/w/. Formatfield (xx [p]) ؛}}) ؛4. فيما يتعلق بمبدأ التوقيت setTimeout ، دعونا نلقي نظرة على الرمز أولاً
لماذا الإخراج -1؟ دعونا نلقي نظرة أولاً على مبدأ setTimeOut ()
SetTimeOut () ينفذ رمز مرة واحدة فقط. إذا كنت ترغب في الاتصال عدة مرات ، فاستخدم SetInterval () أو اطلب من الكود نفسه استدعاء SetTimeOut () مرة أخرى.
يتم استخدام SetTimeout للتأخير لفترة من الوقت قبل إجراء عملية معينة. أي بعد أن يتم تأخير الوقت المحدد بعد التحميل ، يتم تنفيذ التعبير مرة واحدة ، ويتم تنفيذها مرة واحدة فقط.
setTimeout (رمز ، وقت التأخير) ؛
وقت التأخير ليس الوقت الذي تتوقعه. المتصفحات المختلفة لها أوقات تأخير مختلفة. خذ المثال أعلاه ، أي أن وقت التأخير ليس 0 أعلاه. مقارنة
بمعنى آخر ، يتم تنفيذ SetTimeOut مرة واحدة فقط ، ولكن الوقت ليس 0. ليس من المؤكد عدد الثواني التي يتم تأخيرها. ثم ليس من المستغرب سبب ظهوره -1. دعونا نحلل البرنامج.
عندما أنا = 3 ، بعد (3) ، يتم تقليلها إلى 2 وتنفيذ setTimeout
عندما أنا = 2 ، بعد (2) ، يتم تقليلها إلى 1 وتنفيذ setTimeout
عندما i = 1 ، بعد (0) ، يتم تقليلني إلى 2 ، ويتم تنفيذ setTimeout
عندما أنا = 0 ، بعد (0) ، أتناقص إلى -1. في هذا الوقت ، ينتهي البرنامج ، لكن الفاصل الزمني لضبط setTimeOut هو 0 لن يفهم التنفيذ ، وسيتم إدراجه في قائمة انتظار مؤشر الترابط ، في انتظار I
عندما يصبح -1 ، سيتم تنفيذ SetTimeouts الثلاثة السابقة ، وفي هذا الوقت قد تغيرت إلى -1 ، وبالتالي فإن الإخراج هو -1. تتم طباعة وحدة التحكم المطبوعة في هذا الوقت بواسطة وحدة التحكم السابقة.
SetTimeout هو رمز غير متزامن ، مما يعني أن كتابة TimeTimeout (FN ، 100) لا يعني أنه سيتم تنفيذ FN مباشرة بعد 100 ميلي ثانية ، ومن المحتمل أن يكون التأخير أطول. لأن كل شيء
لن يتم تنفيذ الأحداث غير المتزامنة (بما في ذلك أجهزة ضبط الوقت ، أو XMLHTTPrequest المكتمل) فقط عندما يكون هناك مجاني أثناء تنفيذ البرنامج ، وليس عند تنصت عند التنفيذ.
ما سبق هو ملخص لمشكلة إدخال نمط angularjs المخصص في ueditor الذي أدخله المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!