Getting wappler to work with CKEDITOR

Wappler General
1

ok, I’ve got a page that I am using the CKEDITOR on. All seems to work as it should except when I got to submit the data to my form. It only works if I manually submit the form twice.

Test page is here:
https://hitekfab.com/page_edit3.asp?pagename=Prosthetic-Fabrication

There was another post with summernote to add a dmx-on:updated="$(’#summernote’).summernote(‘code’, this.data.value);" to get the value back to form before submit. I"m guessing I just can’t figure out how to get the data back to the form correctly.

Here is that post: https://community.wappler.io/t/using-an-html-editor-with-wappler/2733/2

You can test the form just hit submit twice and and refresh the page you will see that the data has updated to the database.

Any ideas @teodor @bpj @patrick ?

I am also getting a uncaught typeError: cannot read property ‘fn’ of undefined. Bootstrap.min.js:6

Not sure if that has anything to do with it or not?

Capture
Capture1036×181 20.1 KB

Thanks for any input. Its driving me crazy! Happy New Year

2

It looks like CK editor is using BS 4.3.1 while Wappler has 4.6.0 on the page - there may be a class of JS between these which might be causing problems. Interestingly, if you try to run dmx.app.data in console, dmx is showing as not defined which means that the Wappler app code isn’t running properly either - possibly due to failing before this point.

You can specify several options (including if using BS > 4.5) in the ckeditor plugin docs. You can also specify the path to the BS files rather than reloading a new version from CDN.

3

Thanks I'm gonna see if I can line up the bootstrap version and start there. I love this editor because you can use bootstrap classes, way better than the medium and summerset editors. If I can just get this one bit lined up. Or tell client hit submit twice.... LOL

6

I think I have the bootstrap issues fixed. now just have to figure out how to get the value back to the form before the submit.

7

Try adding this to the form:

onsubmit="return CKEDITOR.instances.editor1.updateElement()"

Before sending the data to your server, it will update the textarea replaced by the CKEditor element with the relevant HTML. At the moment this isn’t happening until after the form has been submitted.

8

You sir are a go genius! That did the trick! yippeeeeee…

AWESOME

1 Like