Using an HTML editor with Wappler

[TomD]

I appreciate that Medium editor is available and will often replace the need for a typical HTML editor (CKEditor, TinyMCE etc.). However, it lacks many options that are typically found with HTML editors. If people are used to using the features of these editors (eg in this case, selecting colours/fonts etc.), it’s difficult to argue that they would be better off with fewer options.

I decided Summernote would do the job (there’s a Bootstrap 4 version available and it’s quite lightweight). I thought it would be easy to set up and indeed it was. However the textarea which should be populated with text from a database query displays no text when the editor is enabled. I tried moving the .js files around, but this didn’t help.

Has anybody had any luck integrating one of these editors with Wappler? I would be grateful for any suggestions.

[patrick]

I did a small test with Summernote and it seems to works fine. I think you have problems with setting the value using an App Connect binding. The dmx-bind:value is set after the editor is initialized, so the value is not set in the editor.

I did some tests and found that the updated event we have for App Connect will help, add onupdated="$('#summernote').summernote('code', this.data.value);" to the textarea to set the code of the editor after it received the value. Change the id to the id of your text area.

Normally the this in the event should point to the html element, this is not the case at this moment in App Connect, this points to the component Class, there the value is stored in the data property. It is possible that we change the this for these events later to point to the html element, when this would change then the above code will not work, this.data.value should then be changed to this.value.

[web-works]

So it should look something like this

<textarea id="tekst" name="tekst" dmx-bind:value="homequery.data.homeq[0].tekst" class="form-control" onupdated="$('#tekst').summernote('code', this.data.value);"></textarea> 

but than in some different way since I can’t see the content.

[patrick]

That is the correct way, what does not work? Does it show the editor correctly, did you initialize the editor?

In my test I created a new page, added Bootstrap and App Connect as frameworks. Then in codeview added the stylesheet for summernote in the head and the js at the end of the body. Created a form with an textarea with the id summernote in it, then added a script block at the end of the body with:

<script>
  $(document).ready(function() {
    $('#summernote').summernote();
  });
</script>

I first tested with a static value, that worked fine. Then I tested to use a dynamic value with dmx-bind:value, this also worked fine if the value was directly available, it failed when the data was set after summernote was initialized. To get summernote to update the onupdated attribute was added, this updated the value in the editor.

[TomD]

onupdated="$('#summernote').summernote('code', this.data.value);"

Many thanks Patrick - this seems to have fixed it.

[web-works]

All working perfectly now, including summernote. Had it working with DMXZone HTML editor 3 as well some time ago, but it wouldn’t work with upload images. Now with summernote it garbles the image information after saving the page, and following text is garbled too.
Without adding images it’s working fine

[t11]

Great post. Nice to know that it is possible to use a more ‘common’ html-editor since, as @web-works already mentioned, many clients do want some features that medium editor does not provide.

[Marzio]

<script> $(document).ready(function() { $(’#summernote’).summernote(); }); </script>

I can not get Summernote to work on a Wappler page
I can not figure out where the error is
I copied the Summernote code in the head, but it is automatically changed by wappler with error

and then I finished with the code at the end of the body and in the text-area

Where is the problem?
Thanks

[TomD]

I’ve come across some problems pasting code into Wappler code editor - eg where, as in your example, Wappler flags errors which weren’t there before the code was copied. In this case, ‘dmxdomid=d79’ is injected into the code (breaking the reference to the javascript file). I’ve seen this too.

I think this happens when you paste text from a webpage. Try pasting the text into a text editor first (to remove formatting etc.) and then paste into Wappler.

I think I’ll create a new topic about this. I’ve been meaning to and your message has reminded me.

[Teodor]

I’ve come across some problems pasting code into Wappler code editor - eg where, as in your example, Wappler flags errors which weren’t there before the code was copied. In this case, ‘dmxdomid=d79’ is injected into the code (breaking the reference to the javascript file). I’ve seen this too.

Please create a new topic explaining what exactly breaks the code, so we can fix it

[TomD]

New topic created. As I said, I’ve been meaning to mention this but it’s erratic and I’m not quite sure of the circumstances.

[Marzio]

onupdated="$('#summernote').summernote('code', this.data.value);"

I can not get the SummerNote Editor to work on an update page
The attached code works, but if I insert Server Connect and Query Manager, an error is generated.
Does anyone know how to solve?

[TomD]

My Summernote textarea is also in an update form. This is what I have between the textarea tags:

<textarea id="summernote" name="poem_content" dmx-bind:value="sc_select_current.data.qry_current_record[0].poem_content" class="form-control" onupdated="$('#summernote').summernote('code', this.data.value);" rows="20"></textarea>

[Marzio]

My Summernote is similar but does not work

“”

[s.alpaslan]

It is not similar please check textarea tags

[Marzio]

[TomD]

Your IDs may not match. In your last message you have id="summernote" in the textarea; in your jQuery script, you have this:

[s.alpaslan]

Yeap wrong id …
…

[Marzio]

no I restarted from the beginning and I changed id
And I receive error:

ERROR

RESULT

[Marzio]

And another page with same code but without Server Connect and Query manager