Enterprise: Editor: Mengonfigurasi tombol heading tidak berfungsi

Dibuat pada 4 Sep 2019 · 31Komentar · Sumber: infor-design/enterprise

Jelaskan bugnya
Editor Teks Kaya tampaknya mengabaikan pengaturan tombol editor, atau fitur tersebut tidak didokumentasikan. Editor selalu menampilkan H3 dan H4 sementara H1 dan H2 hilang. Editor juga tampaknya mengabaikan pengaturan apa pun selain _header1_ dan _header2_ yang kemudian ditampilkan sebagai 'H3' dan H4'

Untuk Mereproduksi
Langkah-langkah untuk mereproduksi perilaku:

Jalankan proyek ids-enterprise-ng dan gunakan kode ini

    // Customize the buttons on init
    this.editor.buttons = {
      editor: [
        'header1', 'header2', 'header3', 'header4', 'header5', 'header6',
        'separator', 'bold', 'underline', 'strikethrough',
        'separator', 'foreColor',
        'separator', 'justifyLeft', 'justifyCenter', 'justifyRight',
        'separator', 'quote', 'orderedlist', 'unorderedlist',
        'separator', 'anchor',
        'separator', 'clearFormatting',
        'separator', 'source'
      ],
      source: [
        'visual'
      ]
    };

Klik pada Editor Teks Kaya
Lihat tombol H3 dan H4 yang ditampilkan

Perilaku yang diharapkan
Editor harus menghormati pengaturan dan membuat tombol heading yang sesuai, sesuai kode terlampir H1, H2, H3, H4, H5, H6

Versi: kapan

id-perusahaan-ng: 5.5.2

[5] type

Sumber

Fruko

Komentar yang paling membantu

Saya pikir saya sekarang paling menyukai gagasan Paragraph, Heading 1, Heading 2, and Heading 3. sebagai teks dalam pemilih tombol menu. Ini membaca kurang seperti tag HTML ke pengguna akhir.

Kemudian di bawahnya kita bisa menggunakan class sebagai ganti tag HN atau apapun yang kita inginkan di markup. Jadi itu hanya mengatur hierarki dalam teks.

tmcconechy pada 18 Nov 2019

👍3

Semua 31 komentar

Ini juga dapat direproduksi di ids-enterprise. Jadi kemungkinan masalahnya ada di sana.

Pergi ke http://localhost :4000/components/editor/example-customize-buttons.html
Kode ini dikonfigurasi untuk menampilkan h1 dan h2 dan bukan h3 dan h4 tetapi ini tidak berpengaruh https://github.com/infor-design/enterprise/blob/master/app/views/components/editor/example-customize -buttons.html#L21

Harapkan Anda dapat mengatur tombol ke h1-h6 sesuai keinginan (agar sesuai dengan struktur halaman).

tmcconechy pada 4 Sep 2019

@Fruko @tmcconechy , saya pikir apa yang ada di kode sumber di sini sedikit keliru.

Melihat source , header1 dan header2 belum tentu dipetakan ke tag H1/H2 masing-masing. Mereka dipetakan ke H3/H4. Komponen Editor telah seperti ini selamanya, dan saya yakin alasannya adalah bahwa pada tingkat aplikasi, H1/H2 bukanlah sesuatu yang "dapat diedit" dalam arti bahwa pengguna yang menggunakan komponen ini hanya dapat menambahkan satu ke konten.

Jelas persyaratan/kebutuhan telah berubah sejak set desain asli kami, tetapi masalah ini tidak terlalu mudah bagi saya. Ini sedikit peningkatan/penambahan fitur. Beberapa pertanyaan:

Haruskah kita membangun dukungan untuk semua level header?
Bagaimana kita dengan anggun menangani potensi perubahan yang melanggar di sekitar ini (mengubah header1/2 menjadi 3/4, sebenarnya menambahkan 3/4 "benar").
Kami membutuhkan @infor-design/design untuk menghasilkan ikon untuk semua 6 level header di kedua tema.

EdwardCoyle pada 18 Nov 2019

Saya pikir awalnya saya membuat H2, H3 berfungsi, kemudian dengan mengatur Anda dapat membuat H4 dan H5 berfungsi.
Anda akan mengatur ini berdasarkan struktur halaman Anda sehingga aksesibilitas bekerja dengan heading.

Saya pikir untuk memperbaikinya mungkin kita bisa membuat tombol menu dengan Heading 1 - heading 6 di dalamnya dan biarkan pengguna memutuskan. Atau dapat membuatnya lebih jelas tentang judul mana yang diizinkan di dalamnya (dan teks). Jadi kita tidak perlu ikon (mereka agak jelek)

tmcconechy pada 18 Nov 2019

Pengguna hanya ingin membuat hierarki saat mereka mengetik; bagaimana kita membuatnya setelah itu adalah masalah lain sama sekali.

Jika kita tetap dengan desain saat ini, tombolnya seharusnya hanya mengatakan H1, H2, dan H3.

Saya suka saran Tim tentang menu tarik-turun; banyak editor teks menggunakan pola itu. Jika kita beralih ke desain itu, kita dapat memiliki opsi yang berbunyi: Paragraf, Judul 1, Judul 2, dan Judul 3. Pendekatan ini bahkan dapat menjelaskan format khusus jika diperlukan.

kentonquatman pada 18 Nov 2019

👍1

@EdwardCoyle Saya setuju dengan @kentonquatman sebagai pengguna Saya ingin menentukan hierarki teks dengan lebih banyak fleksibilitas daripada hanya H3 dan H4

Fruko pada 18 Nov 2019

👍1

Saya pikir saya sekarang paling menyukai gagasan Paragraph, Heading 1, Heading 2, and Heading 3. sebagai teks dalam pemilih tombol menu. Ini membaca kurang seperti tag HTML ke pengguna akhir.

Kemudian di bawahnya kita bisa menggunakan class sebagai ganti tag HN atau apapun yang kita inginkan di markup. Jadi itu hanya mengatur hierarki dalam teks.

tmcconechy pada 18 Nov 2019

👍3

Jika diperlukan, saya dapat membuat tiket sendiri untuk memperbarui desain bilah alat RTE untuk menyertakan menu tarik-turun.

kentonquatman pada 18 Nov 2019

👍1

Tentu dan salah satu alasan saya menyebutkan tombol menu alih-alih dropdown adalah mereka bekerja lebih mudah di bilah alat. Tapi jika Anda mengarang sesuatu, kita bisa melihatnya.

tmcconechy pada 18 Nov 2019

Implementasi yang dijelaskan di atas terdengar seperti cara Google Documents melakukannya:

Screen Shot 2019-11-18 at 4 22 16 PM

Hanya menentukan beberapa ide cepat tentang apa yang mungkin dibutuhkan tombol menu, dari segi perubahan. Beri tahu saya jika ini berada di jalur yang benar:

[x] Kita mungkin dapat membuat tombol menu khusus (mungkin sebenarnya membuat komponen "fontpicker"/"stylepicker") yang dapat merender item menu untuk menampilkan aturan gaya yang disediakan. Mungkin perlu beberapa perubahan pipa rendering untuk memfasilitasi ini.
[ ] Meniru konfigurasi "default" saat ini dari sistem font (h3/h4/paragraph) saat membangun default untuk pemilih baru.
[ ] Perlu membuat beberapa kompatibilitas mundur di atas itu (fx: jika konfigurasi editor mendeteksi pengaturan lama, itu harus mengubahnya ke sistem baru secara otomatis).
[ ] Mungkin juga saat yang tepat untuk membahas #2679 yang berhubungan dengan konversi antar tag/gaya.

EdwardCoyle pada 18 Nov 2019

👍1

@tmcconechy Ya, maaf. Maksudku tombol menu.

kentonquatman pada 18 Nov 2019

@EdwardCoyle Ya, akan keren untuk menampilkan opsi menu dengan gaya yang diterapkan, seperti contoh yang Anda posting dari Google Documents.

kentonquatman pada 18 Nov 2019

IDS_RichTextEditor_StyleSelection_Dark_01

kentonquatman pada 5 Des 2019

👍2

Beberapa warna pada ini dapat berubah karena @elizabethhartley saat ini sedang menyempurnakan palet warna dan tema kami.

kentonquatman pada 5 Des 2019

@kentonquatman bagaimana dengan ikon baru?

elizabethhartley pada 5 Des 2019

@elizabethhartley Dari apa yang saya lihat di situs IDS, itu belum diadopsi: https://design.infor.com/code/ids-enterprise/latest/demo/components/editor/example-index?theme=uplift&variant =cahaya&warna=0563C2

kentonquatman pada 5 Des 2019

Tangkapan layar Anda sepertinya menunjukkan ikon "soho"? https://design.infor.com/code/ids-enterprise/latest/demo/components/editor/example-index kecuali saya salah memahami pertanyaannya?

tmcconechy pada 5 Des 2019

Maaf, saya menambahkan kebingungan. Saya mendasarkan desain pada apa yang kami miliki saat ini di IDS, yang menggunakan ikon sistem yang lebih lama. Jika Anda melihat versi hidup Anda akan melihat apa yang saya maksud. Kami juga harus memperbarui ikon-ikon itu.

kentonquatman pada 5 Des 2019

QA GAGAL

1. Peramban: IE11

[ ] Pemilih font tidak berfungsi saat teks tidak dipilih (yaitu cukup letakkan tanda sisipan di suatu tempat di teks) Anda harus memilih teks untuk diterapkan.

2. Peramban: Chrome, IE 11, EDGE, Safari

[ ] Caret menghilang setelah menerapkan jenis header atau menggunakan pemilih font

3. Peramban: IE 11, EDGE, Firefox

[ ] Anda dapat menggabungkan blockquote dan jenis Header

4. Peramban: IE 11, EDGE

[ ] Saat mengganti jenis header, gaya font teks akan dihapus (mis. Tebal, Miring, Dicoret)

jbrcna pada 16 Des 2019

Mengenai poin-poin ini yang saya beri nomor. Saya tidak berpikir ada di antara mereka yang bekerja dengan upaya tambahan.

Tidak layak diperbaiki karena IE 11 akan segera tidak didukung dan kecil dan terlalu sulit (jika bukan tidak mungkin) untuk diperbaiki
Mungkin layak untuk memperbaiki ketiganya tetapi kursor akan kembali setelah Anda memilih sehingga tidak mudah. Mari kita lihat apakah ada pelanggan yang mengangkat masalah serupa.
Ini bukan persyaratan.
Ini mungkin bagus karena menghapus gaya-gaya itu dan menggunakan gaya header.

Semua ini terlalu kecil untuk menghabiskan waktu satu.

tmcconechy pada 16 Des 2019

👍1

Sepertinya gaya pada elemen ini tidak sesuai dengan desain.

| Desain | Versi Saat Ini |
| --- | --- |
| Screen Shot 2019-12-16 at 2 19 09 PM | Screen Shot 2019-12-16 at 2 16 39 PM |

Sepertinya implementasinya hanya menggunakan komponen menubutton standar. Saya ingin menghapus panah dan memindahkan menu lebih dekat ke bilah alat. Apakah mungkin untuk memasukkan lebih banyak gaya dari desain atau apakah kita perlu memperbarui komponen menubutton?

kentonquatman pada 16 Des 2019

Oke, mari kita buka kembali dan sesuaikan. Saya bertanya-tanya tentang ukuran tombol. Adakah alasan mengapa desain memiliki panah yang sangat jauh dari teks? Ini adalah kustomisasi pada tombol menu sehingga kita tidak perlu mengubahnya secara khusus.

tmcconechy pada 16 Des 2019

@kentonquatman adalah gaya dalam desain sesuatu yang perlu diterapkan lebih umum untuk semua jenis menubutton? Atau apakah kita menciptakan gaya sekunder hanya untuk ini?

EdwardCoyle pada 16 Des 2019

@tmcconechy Panah berada di paling kanan untuk menjelaskan kata-kata yang lebih besar (Header 1 vs. Default), mirip dengan bagaimana menu dropdown akan ditata. Lebar tombol harus selalu sama dan panah harus selalu berada di tempat yang sama, apa pun gaya yang dipilih.

@EdwardCoyle Saya tidak yakin apakah gaya ini harus diterapkan untuk setiap contoh tombol menu. Saya perlu melihat itu sedikit lebih banyak, tetapi tebakan saya adalah tidak.

kentonquatman pada 16 Des 2019

Agak membingungkan karena tombol menunya agak digabungkan dengan dropdown. Tapi pemikiran saya adalah Anda hanya mengambil ruang toolbar ekstra. Panah bisa saja di akhir teks apakah itu 8 vs 7 karakter + 5px tanpa konsekuensi? Atau bisa dikatakan teks terbesar adalah Header 6 dan menggunakan lebar itu. Kami tidak benar-benar menunjukkan gaya di tombol saat dipilih? Atau itu alasannya. (Fx Header 1 Ditampilkan dalam font besar saat dipilih?)

tmcconechy pada 16 Des 2019

Saya tidak berpikir panah harus bergerak berdasarkan panjang label. Lebih baik menyimpannya di posisi yang sama; itu adalah perawatan yang paling umum untuk jenis elemen ini.

Contoh dari Google Documents:

| Satu | Dua | Tiga |
| --- | --- | --- |
| Screen Shot 2019-12-16 at 3 02 24 PM | | Screen Shot 2019-12-16 at 3 01 44 PM |

kentonquatman pada 16 Des 2019

Ok, Satu-satunya hal yang saya pikir saya bingung adalah tombol menu kami tidak bergerak sekarang. Salah satu contoh (agak berantakan) http://master-enterprise.demo.design.infor.com/components/menubutton/test-on-toolbar.html . Ini penting agar tidak ada banyak ruang kosong yang terbuang pada bilah alat, jadi saya tidak akan mengubahnya tetapi ini disejajarkan dengan benar.

Tetapi untuk kasus editor ini saya memang bisa melihat memperbaiki ukuran seperti google tetapi mungkin tidakkah kita hanya membuatnya sedikit tetapi kurang sehingga ukurannya sama tetapi lebih dekat dengan kumpulan nilai yang sebenarnya? Mungkin ada 40 piksel terbuang di ruang kosong dan itu akan menyebabkan satu atau dua tombol bilah alat meluap?

Ini mungkin karena atau teks adalah "Default" dan "header 1" bukan "Header Text" / "Heading 3"
yang lebih panjang. Jadi mungkin kami hanya membuatnya lebih dekat berdasarkan nilai yang dapat Anda pilih dalam kasus kami (jadi seperti 10 px ditambah nilai teks maksimum)?

tmcconechy pada 16 Des 2019

@kentonquatman , @tmcconechy , dan saya membuat daftar langkah selanjutnya untuk menyelesaikan ini:

[x] Ganti "Default" ke "Normal Text" di item pertama
[x] Buat deteksi terprogram dari lebar item terbesar dalam daftar, dan atur itu sebagai lebar tingkat atas tombol pemilih.
[x] Secara keseluruhan di seluruh toolbar formatter, hapus panah dari menu popup, dan posisikan menu sedikit di atas tombol pemicunya.
[x] Lokalkan ukuran font default.

EdwardCoyle pada 16 Des 2019

👍1

Satu hal lain yang baru saja saya temukan adalah bahwa dalam tema Soho teks pemilih sangat besar. Ini agak benar karena itu gayanya tetapi bertanya-tanya apakah itu sedikit salah. Apakah google benar-benar mengubah ukuran benda-benda di pemilih seperti ini? Apakah menurut kami ini dapat ditingkatkan pada tema soho sama sekali?

Screen Shot 2019-12-17 at 1 04 34 PM

tmcconechy pada 17 Des 2019

QA Gagal

[ ] Lebar menu berada pada level yang sama dengan tombol pemicu. Menu harus sedikit lebih lebar dari tombol pemicu. Lihat tangkapan layar untuk referensi. Saya tidak yakin apakah ini hanya masalah aplikasi demo

Diverifikasi di http://4240-rc0-enterprise.demo.design.infor.com/components/editor/example-index?theme=uplift&variant=light

[ ] Peramban: EDGE
Panah tidak sejajar

jbrcna pada 20 Des 2019

Untuk poin 1 - kami membuat sedikit variasi untuk membuat semuanya konsisten. Mari kita biarkan ini apa adanya.
Poin 2 - kita harus memperbaikinya

tmcconechy pada 20 Des 2019

[x] Perbaiki masalah tata letak yang dicatat
[x] Kami juga menemukan tes gagal dalam detail NG:

-  checkout 6.3.x in ng and run:
- `npm run test`
- `npm run testdebug` to debug
- seems like this test page shows the issue http://localhost:4000/components/toolbar-flex/example-more-actions-ajax.html notice that beforeOpen is not being called anymore.

tmcconechy pada 20 Des 2019

Apakah halaman ini membantu?

0 / 5 - 0 peringkat