Saya akan meringkas masalah yang saya temui dalam proses menyesuaikan gaya untuk editor, terutama antarmuka pengembangan sekunder editor dan menyesuaikan gaya dengan Angular. Ada banyak masalah. Akhirnya, dengan bantuan **, itu selesai. Masih belum ada interaksi antara versi lama dan versi baru, tetapi tidak sulit. Berikut ini menjelaskan masalah secara terpisah.
Pengembangan Ueditor
Anda dapat mengunduh versi apa pun di situs web resmi dan menggunakannya: http://ueditor.baidu.com/website/download.html Setelah mengunduh, Anda dapat menggunakannya sesuai dengan konfigurasi di situs web resmi. Alamat dokumen: http://fex.baidu.com/ueditor/ Ada banyak masalah dengan pengembangan sekunder UEDITOR, dan mereka terdaftar di sini.
1. Ueditor secara otomatis menyaring tag div ke dalam tag p
Selama proses gaya khusus, saya menemukan bahwa semua div disaring dan tag UNP ditemukan. Saya menemukan banyak informasi online, tetapi tidak ada yang berguna. Belakangan, saya melihat tulisan utama bahwa konfigurasi berbagai versi ueditor berbeda. Di sini saya menulis solusi saya: buka file konfigurasi ueditor.config.js dan tambahkan kode berikut:
, AllowDivTranstop: Salah
Perhatikan bahwa itu ditambahkan secara manual di jendela.uediroe_config! Selain itu, beberapa orang mengalami situasi serupa dan dapat merujuk pada: http://www.cnblogs.com/olive116/p/3464495.html
2. Bagaimana cara memasukkan gaya khusus ke dalam editor?
Antarmuka disediakan di editor, mari kita lihat.
Function InserthTml () {var value = prompt ('masukkan kode html', ''); ue.getEditor ('editor'). ExecCommand ('Inserthtml', value)}Jadi, bagaimana Anda menggunakan antarmuka ini dalam proyek kami sendiri? Pertama, Anda perlu mewujudkan editor, biasanya menggunakan ue.getEditor () secara langsung untuk mendapatkan instance.
// Gunakan Geteditor Metode Pabrik untuk membuat dan merujuk pada instance editor. Jika Anda merujuk ke editor di bawah penutupan tertentu, Anda dapat secara langsung menghubungi UE.GetEditor ('Editor') untuk mendapatkan contoh yang relevan sebelum menggunakannya. Kita perlu memperkenalkan editor untuk memanggil metodenya.
<Script src = "LIBS/UEeditor/ueditor.config.js"> </script> <script src = "libs/ueditor/ueditor.all.min.js"> </script>
Buat contoh editor dalam proyek sudut kami. Editor menyediakan metode siap untuk membuat instantiate:
// Buat kolom aktual editor $ scope.ready = function (uEditor) {window.Editor = uEditor;};Oke, kita sekarang dapat menggunakan instance editor. Selanjutnya, mari kita lihat gaya kustom.
Gaya khusus
Mari kita lihat gaya menu akordeon yang kami tulis di tangan. Alamat unduhan: https://github.com/foreverjiangting/set-menu/tree/master/menu interaksi yang digunakan di sini menggunakan data-koggle = "collapse", tetapi bertentangan dengan NG, sehingga NG perlu digunakan untuk mengontrol interaksi. Mari kita lihat bagaimana menulis:
<!-Tambahkan Toolbar-> <div> <h4> Toolbar </h4> <!-Konten sidebar-> <verv> <a ng-click = "toggle ('titlestyle')"> <span> </span> home </a> <ulg-hide = "titlestyle" id = "usmeun"> </a> <ulg-hide = "titlestyle" id = "usmeun"> </a> <ulg-hide = "titlestyle" id = "usmeun"> </a> <ulg-hide = "titlestyle" id = "usmeun"> </a> <ulg-hide = "titlestyle" id = "USmeun"> </a> ng-click = "INSTERTHTML ('Title', Title)"> <a> {{title.name}} </a> </li> </ul> <a ng-click = "toggle ('titleicon')"> <pan> </span> ikon </a> <ul ng-hide = "titleicon =" uclicon = "" ucling = "uclicon =" titelicon = "" ucleic = "titelicon =" "uPon =" " sources.imgs" ng-click="insertHtml('imgs', img)"><a><img ng-src="{{img.url}}"></a></li></ul><a ng-click="toggle('titleYouxia')"><span>Life</span></a><ul ng-hide = "titleyouxia" id = "glyphicnmenu"> <li ng-repeat = "yx di sumber.yxs" ng-click = "inserththtml ('yxs', yx)"> <a> {{yx.name}} </a> </li> </Ul> ng-click = "toggle ('titleServe')"> <span> </span> papan pesan </a> <ul ng-hide = "titleServe" id = "servemenu"> <li ng-repeat = "ser in sources.sers" ng-click = "inserthtml ('sers', 'sers', 'sers', 'sers', 'sers', sers ', sers', sers ', sers', sers ', sers' sersers" ng-click = "INSERTHTML ('sers', 'sers', 'sers', 'sers', 'sers', 'sers', 'sers', 'sers', 'sers', 'sers', 'sers', 'sers', 'sers', sers ',' sers ',' sers ', sers', 'serser ser)"><a>{{ser.name}}</a></li></ul><a ng-click="toggle('titleArticle')"><span></span>Recommended Articles</a><ul ng-hide="titleArticle" id="ArticleMenu"><li ng-repeat="arc in sources.arcs" ng-click = "INSTERTHTML ('arcs', arc)"> <a> {{arc.article}} </a> </li> </ul> </div> <!-Tema konten berakhir-> </div>Kode di JS adalah sebagai berikut:
// Gaya interaksi toolbar $ scope.titlestyle = $ scope.titleicon = $ scope.titleyouxia = $ scope.titleserve = $ titlearticle = false; $ scope.toggle = function (style) {$ scope [style] =! $ scope [style];}Efek akordeon yang dikendalikan oleh NG sederhana dan ringan, dengan sejumlah kecil kode.
Efeknya adalah sebagai berikut:
Setelah gaya ditulis, itu akan dimasukkan ke dalam editor. Jadi bagaimana cara memasukkannya? Ada dua jenis hal di sini: masukkan langsung, dan masukkan sesuai dengan artikel setelah mencari. Lebih mudah dimasukkan secara langsung.
$ scope.inserthtml = function (type, item) {if (type === 'judul' || type === 'imgs') {editor.execCommand ('inerthtml', item.html);}Efek setelah penyisipan adalah sebagai berikut:
Tentu saja, apa gunanya melakukan ini? Ini terutama menggunakan konten dalam editor dan menggunakan pengikatan data NG untuk mencerminkannya pada aplikasi, sehingga membuat antarmuka pengeditan artikel aplikasi.
Produksi Fungsi Pencarian
Data secara alami diperoleh dari API. Bagaimana cara mendapatkan data di API? Mari kita lihat. Kami terutama menggunakan HTTP untuk mendapatkan data, kemudian menggunakan metode kemudian untuk panggilan balik, mendapatkan http, mendapatkan data, dan kemudian menggunakan metode kemudian untuk callback, mendapatkan data scope.data.
angular.module ('service'). Service ('ArtikelService', function ($ http) {return {SearchARTikel: function (title) {return $ http.get ('API/artikel/pencarian', {data: {title: title}});}};});Di sini kami mendeklarasikan artikel dan mengembalikan data API, jadi kami menyuntikkan ketergantungan ke halaman untuk memanggilnya untuk memanggil metodenya. Mari kita lihat kode: Biasanya panggilan layanan
Data yang dikembalikan oleh API ditempatkan di folder, dan pengontrol yang mengontrol data ditempatkan di folder. Mari kita lihat bagaimana data API dipanggil kembali dalam pengontrol.
angular.module ('artikel.controllers'). controller ('servicectrl', function ($ scope, $ rootscope, $ filter, $ timeout, $ state, $ stateParams, ContentService ,, artikelService, type) {Perhatikan bahwa Anda perlu menyuntikkan artikel ke dalam pengontrol sebelum Anda dapat memanggil kembali data. Bagaimana cara menelepon kembali data? Lihat kode berikut:
var arcfullsearch = {text: '', hasil: [], dipilih: [], // disimpan data yang dipilih terlebih dahulu ke dalam array yang dimulai: fungsi () {var self = this; var text = self.text.trim (data); Teks (! Parameter yang diteruskan di self.result = data.data; // dapatkan data}, function (err) {console.log (err);}); },};Oke, kami berhasil menelepon balik ke data fungsi. Mengenai bagian pencarian, berikut ini adalah ringkasan poin pengetahuan yang tidak diketahui.
Ringkasan Poin Pengetahuan
1. Cara menulis array ke dalam string
2. Mengenai penggunaan penggantian ganti dengan fungsi
Ecmascript menetapkan bahwa penggantian parameter dari metode ganti () dapat berupa fungsi atau string. Dalam hal ini, setiap pertandingan memanggil fungsi, dan kata itu kembali
String akan digunakan sebagai pengganti teks. Parameter pertama yang dikembalikan oleh fungsi Callback Function menunjukkan karakter pencocokan, dan yang kedua dan selanjutnya data paket yang cocok. Mari kita lihat kode.
3. Apa itu [p.slice (0, index)] [p.slice (index+1)]? Anda akan tahu setelah debugging.
Mari kita lihat apa arti kode sintesis.
var arr = serve.map (function (xx) {return item.html.replace (/{{([/w /.#+?)}/ gi, function (match, p) {var index = p.indexOf ('.'); if (index> 0) {return formatfield (xx [p.slice (0,); if (index> 0) {return formatfield (xx [p.slice (0,); index (index> 0) {return formatfield (xx [p.slice (0,); index (index> p. formatfield (xx [p]);}});4. Mengenai prinsip pengatur waktu, mari kita lihat kode terlebih dahulu
Mengapa output -1? Pertama -tama mari kita lihat prinsip setTimeout ()
setTimeout () hanya menjalankan kode sekali. Jika Anda ingin menelepon beberapa kali, gunakan setInterval () atau minta kode itu sendiri memanggil setTimeout () lagi.
SetTimeout digunakan untuk menunda untuk jangka waktu tertentu sebelum melakukan operasi tertentu. Artinya, setelah waktu yang ditentukan ditunda setelah pemuatan, ekspresi dieksekusi sekali, dan hanya sekali dieksekusi.
setTimeout (kode, waktu tunda);
Waktu tunda bukanlah waktu yang Anda harapkan. Browser yang berbeda memiliki waktu tunda yang berbeda. Ambil contoh di atas, yaitu, waktu tunda bukan 0 di atas. Perbandingan
Dengan kata lain, SetTimeout hanya dieksekusi sekali, tetapi waktunya tidak 0. Tidak pasti berapa detik penundaan. Maka tidak mengherankan mengapa muncul sebagai -1. Mari kita analisis program.
Saat i = 3, setelah sementara (3), saya dikurangi menjadi 2 dan menjalankan setTimeout
Saat i = 2, setelah sementara (2), saya dikurangi menjadi 1 dan menjalankan setTimeout
Ketika i = 1, setelah sementara (0), saya dikurangi menjadi 2, dan setTimeout dieksekusi
Ketika i = 0, setelah sementara (0), saya berkurang menjadi -1. Pada saat ini, program berakhir, tetapi interval waktu untuk menetapkan setTimeout adalah 0 tidak akan memahami eksekusi, dan itu akan dimasukkan ke dalam antrian eksekusi utas, menunggu saya
Ketika menjadi -1, tiga setTimeouts sebelumnya akan dieksekusi, dan pada saat ini saya telah berubah menjadi -1, jadi outputnya adalah -1. Konsol yang dicetak saat ini dicetak oleh konsol sebelumnya.
SetTimeout adalah kode asinkron, yang berarti bahwa menulis setTimeout (FN, 100) tidak berarti bahwa FN akan dieksekusi segera setelah 100 milidetik, dan penundaan cenderung lebih lama. Karena semua
Acara Asynchronous (termasuk timer, atau XmlHttpRequest selesai) hanya akan dieksekusi ketika ada gratis selama pelaksanaan program, bukan ketika Anda menetapkan saat Anda mengeksekusi.
Di atas adalah ringkasan masalah memasukkan gaya kustom AngularJS ke ueditor yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!