Changes made in code view of Froala not saving

[Benpxpx]

If any changes are made in code view of Froala(Was present in previous editor as well) we have to swap back to design view and then save to make sure the changes have taken effect.

[gabsource]

Expected behavior

Submitting while the RichEditor is source mode should take the latest value present in the source mode editor instead of the latest from the WYSIWYG mode.

Actual behavior

Submitting while the RichEditor is in source mode does not send the actual value. We need to switch to WYSIWYG mode to persist it.

Reproduce steps

• Install Rainlab.Pages plugin
• Create a new Page using the Pages plugin
• Set a title and url
• Switch the content editor to source mode
• Type something like <p>Hellow World!</p>
• Save either using the Save button or keyboard shortcut
• Reload the browser
• Open the test page
• The content is empty

October build

345

Plugins version

Rainlab.Pages 1.2.6

[FelixINX]

@Benpxpx with Redactor, the editor was adding some HTML stuff (div, p), is it the same issue here? I am unable to test the new editor from here.

[Benpxpx]

@FelixINX When I've been switching between code view and design view, I've not noticed any extra HTML added to the code when I switch back to code view.

@gabsource Thank you for doing that, very much appreciated. I didn't have time to do the full one until today, but you beat me too it.

[claudchan]

I have the same issue. Any fixes?

[LukeTowers]

+1, same issue for me

[DanielHitchen]

This is still an issue/bug as of build 361

[daftspunk]

Thanks, it is labelled medium priority and will be looked at soon.

[daftspunk]

Fixed as part of https://github.com/rainlab/pages-plugin/issues/193, available in October Build 370+.

[agm1984]

We just solved this error in a Vue JS project by using the vanilla JS FroalaEditor.

We studied the commit from back on October 12 2016 and saw what it was doing:

if (this.content_editor.codeView && this.content_editor.codeView.isActive()) {
    this.content_editor.html.set(this.content_editor.codeView.get());
}

this.content = this.content_editor.html.get();

this.content_editor is the Froala editor:

import FroalaEditor from 'froala-editor';

this.content_editor = new FroalaEditor('div#text_editor1', this.configContent);

In the above code, the part that fixes the error is, onSave if the editor is in codeView, set html to codeView.get(). This works because codeView.get() returns a string.

For us, the final piece was to do

this.content = this.content_editor.html.get();

because you can't use v-model with the vanilla editor, so this.content is the value sent to the server when you press save. Before you do that, you just have to check if the editor is in codeView. If so, perform the above action first.