Component WYSIWYG

[barayuda]

barayuda last edited by wayanjimmy

Halo teman-teman, saya berkelana mencari wyswig dgn lisensi MIT. Ketemulah SunEditor.

nah, saya ada kendala saat membuatnya menjadi custom component, v-model yg sy set di custom component kadang muncul kadang tidak. Padahal sih sudah watch value-nya.

Apa ada kawan-kawan yg pernah buat component wyswig?

code: https://codesandbox.io/s/relaxed-dew-ew9xk

library suneditor: http://suneditor.com/sample/html/out/index.html

nb: kenapa milih editor ini, karena fiturnya yg ada table dan hampir lengkap seperti ckeditor / froala

[wayanjimmy]

wayanjimmy last edited by wayanjimmy @barayuda

@barayuda ok saya udah lama banget ga coding Vue lagi.

Tapi dari yang saya lihat VueJS dan SunEditor adalah sebuah Dunia yang berbeda.

Kalau mau bikin custom component, yang saya pikirkan adalah kita harus binding satu demi satu event yang terjadi di instance suneditor ke vuejs method. Hal ini diperlukan untuk memastikan state / vue model yang kamu gunakan valuenya consistent dengan yang di SunEditor.

Sebagai gambaran saya contek implementasi sun editor di ReactJS
https://github.com/mkhstar/suneditor-react/blob/master/SunEditor.js#L112
bagian ini adalah bagian yang mendeteksi event onchange yang terjadi di SunEditor dan melakukan sync valuenya terhadap state yang ada didalam ReactJS.

Seharusnya konsepnya tidak beda jauh dengan VueJS. cuma nama event di VueJS mungkin beda misal

• ComponentDidUpdate -> updated
• ComponentDidMouint -> mounted

lebih lengkapnya bisa di cek di VueJS LifeCycle

[alfrcr]

alfrcr JS Warrior last edited by

boleh dibantu kaya gmn kodingnya sejauh ini bli?

@alfinsuryaS ada pengalaman Vue
@imdbsd ada pengalaman buat WYSIWYG tapi dgn react
tinggal kita kombinasikan aja

[wayanjimmy]

wayanjimmy last edited by @barayuda

@barayuda halo Bara, mungkin kalau disediakan code dalam bentuk codesandbox.io untuk memudahkan reproduce issuenya bisa bantu teman-teman yang lain untuk menjawab

[barayuda]

barayuda last edited by @wayanjimmy

maaf semuanya, ini code-nya https://codesandbox.io/s/relaxed-dew-ew9xk

[wayanjimmy]

wayanjimmy last edited by @barayuda

@barayuda said in Component WYSIWYG:

v-model yg sy set di custom component kadang muncul kadang tidak

Bara, saya masih kurang mengerti bagian ini, mungkin bisa sediakan screenshot untuk membantu mendeskripsikan apa yang dimaksud?

[barayuda]

barayuda last edited by barayuda @wayanjimmy

@wayanjimmy said in Component WYSIWYG:

v-model yg sy set di custom component kadang muncul kadang tidak

sudah update di codesanbox lagi jimmy, https://codesandbox.io/s/relaxed-dew-ew9xk
data "description" itu saya dpt dari API. Nah, yg sy maksud kadang muncul kadang tidak itu, data "description" tidak terlihat di wyswig-nya. Tapi, saat di inspect element menggunakan vue devtools, props "value" yg berisikan dari v-model="description", props-nya terisi.

[alfrcr]

alfrcr JS Warrior last edited by

kebetulan ada suhu Vue @Irfan-Maulana mohon pencerahan

[wayanjimmy]

wayanjimmy last edited by wayanjimmy @barayuda

@barayuda ok saya udah lama banget ga coding Vue lagi.

Tapi dari yang saya lihat VueJS dan SunEditor adalah sebuah Dunia yang berbeda.

Kalau mau bikin custom component, yang saya pikirkan adalah kita harus binding satu demi satu event yang terjadi di instance suneditor ke vuejs method. Hal ini diperlukan untuk memastikan state / vue model yang kamu gunakan valuenya consistent dengan yang di SunEditor.

Sebagai gambaran saya contek implementasi sun editor di ReactJS
https://github.com/mkhstar/suneditor-react/blob/master/SunEditor.js#L112
bagian ini adalah bagian yang mendeteksi event onchange yang terjadi di SunEditor dan melakukan sync valuenya terhadap state yang ada didalam ReactJS.

Seharusnya konsepnya tidak beda jauh dengan VueJS. cuma nama event di VueJS mungkin beda misal

• ComponentDidUpdate -> updated
• ComponentDidMouint -> mounted

lebih lengkapnya bisa di cek di VueJS LifeCycle

[barayuda]

barayuda last edited by @wayanjimmy

@wayanjimmy oh begitu ternyata, saya kira bisa di bypass langsung seperti yg saya buat sebelumnya. Kalo gitu saya rewrite component saya dulu. Untuk binding semua method dari SunEditor.

thank you om @wayanjimmy

[barayuda]

barayuda last edited by barayuda @alfrcr

@alfrcr said in Component WYSIWYG:

kebetulan ada suhu Vue @Irfan-Maulana mohon pencerahan

Wah boleh nih bang @Irfan-Maulana , utk pencerahan

[barayuda]

barayuda last edited by

Update disini, akhirnya sy sudah berhasil. dan sangat stable (opini pribadi, karena digunakan diprojek pribadi, hehe). Berhubung lib ini MIT, sy berencana utk publis hasilnya agar bs digunakan komunitas. Semoga diijinkan author-nya.

Sekian, saya akhiri thread ini.
Terima kasih mimin

[alfrcr]

alfrcr JS Warrior last edited by @barayuda

@barayuda kalo boleh di share pengalamannya waktu develop bli