[FIX] web_editor: don't lose modified code view content

The intended scenario when using the code view is the following:

1) click on code view button to use code view
2) make changes
3) click on code view button to get back to wysiwyg view
4) save from the wysiwyg view

If the 3rd step was not done:

- for the inline editor, we lose the changes that have been done in
  code view,
- for the iframe editor, we lose the entirety of the content.

At one time the user was forced to go back to wysiwyg before being able
to save, but this have been removed hence the present usability issue.

With this fix, when the editor content is saved, if the user is in code
view he is automatically set back to wysiwyg view.

fixes #14648
closes #14475
opw-678677
opw-693052
This commit is contained in:
Nicolas Lempereur
2017-01-09 16:04:42 +01:00
parent d40edd7052
commit 98ed53ce3a
2 changed files with 27 additions and 1 deletions
@@ -161,6 +161,11 @@ var FieldTextHtmlSimple = widget.extend({
return !this.get('value') || this.get('value') === "<p><br/></p>" || !this.get('value').match(/\S/);
},
commit_value: function() {
/* Switch to WYSIWYG mode if currently in code view */
if (session.debug) {
var layoutInfo = this.$textarea.data('layoutInfo');
$.summernote.pluginEvents.codeview(undefined, undefined, layoutInfo, false);
}
if (this.options['style-inline']) {
transcoder.class_to_style(this.$content);
transcoder.font_to_img(this.$content);
@@ -374,6 +379,12 @@ var FieldTextHtml = widget.extend({
this._dirty_flag = false;
return this.editor.save();
} else if (this._dirty_flag && this.editor && this.editor.buildingBlock) {
/* Switch to WYSIWYG mode if currently in code view */
if (session.debug) {
var editable = this.editor.rte.editable()
var layoutInfo = editable.data('layoutInfo');
$.summernote.pluginEvents.codeview(undefined, undefined, layoutInfo, false);
}
this.editor.buildingBlock.clean_for_save();
this.internal_set_value( this.$content.html() );
}
@@ -485,12 +485,27 @@ function prettify_html(html) {
}
return result;
}
$.summernote.pluginEvents.codeview = function (event, editor, layoutInfo) {
/*
* This override when clicking on the 'Code View' button has two aims:
*
* - have our own code view implementation for FieldTextHtml
* - add an 'enable' paramater to call the function directly and allow us to
* disable (false) or enable (true) the code view mode.
*/
$.summernote.pluginEvents.codeview = function (event, editor, layoutInfo, enable) {
if (layoutInfo.toolbar) {
var is_activated = $.summernote.eventHandler.modules.codeview.isActivated(layoutInfo);
if (is_activated === enable) {
return;
}
return eventHandler.modules.codeview.toggle(layoutInfo);
} else {
var $editor = layoutInfo.editor();
var $textarea = $editor.prev('textarea');
if ($textarea.is('textarea') === enable) {
return;
}
if (!$textarea.length) {
// init and create texarea