If initOnClick: true is set ... intial value is not rendered

[adamgins]

Hi I am upgrading from v2 -> v4. Everything worked well with v2 but having some issues with v4

When I have initOnClick: true and I have already set _value but it does not render the initial content until I click, see below

I would like it to show the initial value before the user clicks on it (again this used to work fine on v2)

my current settings are

getFEContextTEXT() {
    const currentResourceID = Session.get('currentResourceID');
    const self = this;

    return {
      attribution: false,
      _value: self.content,

      // Set some FE options
      initOnClick: true,
      saveInterval: 0, // autosave interval - default 10000, 0 is off
      scrollableContainer: '#buzzContent',

      // zIndex:					3000,
      toolbarSticky: true,
      toolbarStickyOffset: 0,
      quickInsertButtons: ['ul', 'ol', 'hr'],
      spellcheck: false, // temporary fix for https://github.com/Buzzy-Buzz/buzzy7/issues/574
      // toolbarInline: 			true,
      // toolbarVisibleWithoutSelection: false,
      // disableRightClick:			true, //recommended if toolbarVisibleWithoutSelection used

      toolbarButtons: [
        'paragraphFormat',
        '|',
        'bold',
        'italic',
        'strikeThrough',
        'insertLink',
        '|',
        'align',
        'formatUL',
        'formatOL',
        'insertHR',
        'paragraphStyle',
        '|',
        'undo',
        'redo',
      ],
      toolbarButtonsMD: [
        'paragraphFormat',
        '|',
        'bold',
        'italic',
        'strikeThrough',
        'insertLink',
        '|',
        'align',
        'formatUL',
        'formatOL',
        'insertHR',
        'paragraphStyle',
        '|',
        'undo',
        'redo',
      ],
      toolbarButtonsSM: [
        'paragraphFormat',
        '|',
        'bold',
        'italic',
        'strikeThrough',
        'insertLink',
        '|',
        'align',
        'formatUL',
        'formatOL',
        'insertHR',
        'paragraphStyle',
        '|',
        'undo',
        'redo',
      ],
      toolbarButtonsXS: [
        'insertLink',
        'align',
        'formatUL',
        'formatOL',
        'undo',
        'redo',
      ],

      linkEditButtons: ['linkOpen', 'linkEdit', 'linkRemove'],
      // Include table options here in case a table does get added via paste
      tableEditButtons: [
        'tableHeader',
        'tableRemove',
        '|',
        'tableRows',
        'tableColumns',
        '-',
        'tableCells',
        'tableCellVerticalAlign',
        '|',
        'tableCellStyle',
      ],
      tableCellStyles: {
        '': 'Default',
        success: 'Green',
        warning: 'Orange',
        danger: 'Red',
        info: 'Blue',
      },
      tableCellMultipleStyles: false,
      tableResizer: true,
      tableResizerOffset: 10,
      tableResizingLimit: 50,
      // end table options
      paragraphFormat: {
        n: 'Normal',
        h1: 'Heading 1',
        h2: 'Heading 2',
        h3: 'Heading 3',
        code: 'Code',
      },
      paragraphStyles: {
        '': 'Default',
        'text-success': 'Green',
        'text-warning': 'Orange',
        'text-danger': 'Red',
        'text-info': 'Blue',
        'text-muted': 'Grey',
      },
      paragraphMultipleStyles: false,

      lineBreakerTags: ['hr', 'form'], // blank to disable it doesn't seem to work

      charCounterCount: false,
      pastePlain: true,
      imagePaste: false,

      theme: 'buzzy-froala',
      editorClass: 'needsclick',

      // Option functions

    

      _oninitialized(editor) {
        // make parent resource active
        $('.buzz-resource.editable.active').removeClass('active');
        const resourceItem = $(e.target).closest('.buzz-resource');
        resourceItem.addClass('active');
        // Let froala handle overflow scroll
        $(e.target)
          .closest('.buzzy-text, .ma-text')
          .addClass('froala-tweak-overflow');
        if (Meteor.isMobile) {
          editor
            .$el('[contenteditable], [contenteditable] *')
            .addClass('needsclick');
        }
        // Prevent drag and drop of image on editor as per https://github.com/Buzzy-Buzz/buzzy7/issues/1260
        editor.events.on(
          'drop',
          function(dropEvent) {
            // Check if we are dropping files.
            const dt = dropEvent.originalEvent.dataTransfer;

            if (dt && dt.files && dt.files.length) {
              const img = dt.files[0];

              if (img && img.type && img.type.indexOf('image') !== -1) {
                dropEvent.preventDefault();
                return false;
              }
            }
          },
          true,
        );
      },
      _ondestroy(editor) {
        const newHTML = editor.html.get(true);

        // Do something to update the edited value provided by the Froala-Editor plugin, if it has changed:
        if (!_.isEqual(newHTML, self.content)) {
          const changeList = Session.get('resourceChangeList');
          if (changeList.indexOf(self._id) === -1) {
            changeList.push(self._id);
            Session.set('resourceChangeList', changeList);
          }
          Session.set('savingResource', true);
          Meteor.setTimeout(function() {
            Session.set('savingResource', false);
          }, 1000);

          // editor.markers.insert();
          Resources.updateResourceField(self._id, 'content', newHTML);
          Resources.updateResourceField(
            currentResourceID,
            'updated',
            new Date().getTime(),
          );
        }

        // Resume our handling of overflow scroll
        $(e.target)
          .closest('.buzzy-text, .ma-text')
          .removeClass('froala-tweak-overflow');
        if (Meteor.isMobile) {
          editor
            .$el('[contenteditable], [contenteditable] *')
            .addClass('needsclick');
        }
        return false;
      },
      _onblur(editor) {
        // Get edited HTML from Froala-Editor
        // /editor.markers.insert();
        console.log('BLUR[2]', this);
        const newHTML = editor.html.get(true);
        // Do something to update the edited value provided by the Froala-Editor plugin, if it has changed:
        if (!_.isEqual(newHTML, self.content)) {
          const changeList = Session.get('resourceChangeList');
          if (changeList.indexOf(self._id) === -1) {
            changeList.push(self._id);
            Session.set('resourceChangeList', changeList);
          }
          Session.set('savingResource', true);
          Meteor.setTimeout(function() {
            Session.set('savingResource', false);
          }, 1000);

          // editor.markers.insert();
          Resources.updateResourceField(self._id, 'content', newHTML);
          Resources.updateResourceField(
            currentResourceID,
            'updated',
            new Date().getTime(),
          );
        }

        if (Meteor.isMobile) {
          editor
            .$el('[contenteditable], [contenteditable] *')
            .addClass('needsclick');
        }
        return false;
      },
    };
  }