Chrome+Bootstrap tabs : U, I & B toolbar actions not working

[Tzaphkiel]

Having the editor initialized within a 'hidden' bootstrap tab indeed sets the contentEditable to false but setting it to true only restores the toolbar display, only B, U & I do not work.

The rest of the actions such as heading (inline or otherwise), the twitter and link action do work...

The whole toolbar also works on the first tab (the displayed one).

The fix proposed by #499 is not enough.

There are no errors in the console and the DOM does not change...

My editors are initialized on componentDidMount and their content are set by a bound this.children property.

The tabs change (show event) activates the editor using the following code set on the parent containing the tabs element (also setup on componentDidMount):

componentDidMount: ->
    console.debug "NodeDescriptor did mount"
    # FIXME Hack for chrome to set editable for initialized editors that were hidden
    $('a[data-toggle="tab"]').on 'shown.bs.tab', (e) ->
      editorId = $(e.target).attr('aria-controls') + 'Editor'
      $('#'+editorId).attr('contentEditable', true);

• Chrome: fails
• Firefox: works
• dependencies:

• "alloyeditor": "1.2.3",
  

• "bootstrap": "3.3.6",
  

• "react": "15.2.1",
  

• "react-dom": "15.0.1",
  

• "react-redux": "4.4.5",
  

• "react-router": "2.5.2",
  

• "redux": "3.5.2",
  

• "redux-action": "1.0.0",
  

• "redux-thunk": "2.1.0"
  

<div>
  <div id="headerEditor" class="editorSection cke_editable cke_editable_inline cke_contents_ltr ae-editable ae-placeholder" contenteditable="true" tabindex="0" spellcheck="true" role="textbox" aria-label="Rich Text Editor, headerEditor" title="Rich Text Editor, headerEditor">
    <p><strong></strong>Node <strong>2158</strong> <u>header</u></p>
  </div>
  <div id="tabsEditors" class="editorSection">
    <ul class="nav nav-pills" role="tablist">
      <li role="presentation" class=""><a href="#overviewTab" aria-controls="overviewTab" role="tab" data-toggle="tab" aria-expanded="false">Overview</a></li>
      <li role="presentation" class="active"><a href="#mpsTab" aria-controls="mpsTab" role="tab" data-toggle="tab" aria-expanded="true">Most popular series</a></li>
      <li role="presentation" class=""><a href="#dsTab" aria-controls="dsTab" role="tab" data-toggle="tab" aria-expanded="false">Datasets</a></li>
      <li role="presentation" class=""><a href="#padTab" aria-controls="padTab" role="tab" data-toggle="tab" aria-expanded="false">Publications and Dashboards</a></li>
      <li role="presentation" class=""><a href="#tabMth" aria-controls="tabMth" role="tab" data-toggle="tab" aria-expanded="false">Methodology</a></li>
    </ul>
    <div class="tab-content">
      <div role="tabPanel" class="tab-pane fade" id="overviewTab">
        <div id="overviewTabEditor" class="editorContent cke_editable cke_editable_inline cke_contents_ltr ae-editable ae-placeholder" contenteditable="true" tabindex="0" spellcheck="true" role="textbox" aria-label="Rich Text Editor, overviewTabEditor" title="Rich Text Editor, overviewTabEditor">overview tab content</div>
      </div>
      <div role="tabPanel" class="tab-pane fade active in" id="mpsTab">
        <div id="mpsTabEditor" class="editorContent cke_editable cke_editable_inline cke_contents_ltr ae-editable ae-placeholder" contenteditable="true" tabindex="0" spellcheck="true" role="textbox" aria-label="Rich Text Editor, mpsTabEditor" title="Rich Text Editor, mpsTabEditor">Most Popular Series content</div>
      </div>
      <div role="tabPanel" class="tab-pane fade" id="dsTab">
        <div id="dsTabEditor" class="editorContent cke_editable cke_editable_inline cke_contents_ltr ae-editable ae-placeholder" contenteditable="true" tabindex="0" spellcheck="true" role="textbox" aria-label="Rich Text Editor, dsTabEditor" title="Rich Text Editor, dsTabEditor">
          <p><strong>Datasets</strong> tab content</p>
        </div>
      </div>
      <div role="tabPanel" class="tab-pane fade" id="padTab">
        <div id="padTabEditor" class="editorContent cke_editable cke_editable_inline cke_contents_ltr ae-editable ae-placeholder" contenteditable="true" tabindex="0" spellcheck="true" role="textbox" aria-label="Rich Text Editor, padTabEditor" title="Rich Text Editor, padTabEditor">Publications and Dashboards tab content</div>
      </div>
      <div role="tabPanel" class="tab-pane fade" id="tabMth">
        <div id="tabMthEditor" class="editorContent cke_editable cke_editable_inline cke_contents_ltr ae-editable ae-placeholder" contenteditable="true" tabindex="0" spellcheck="true" role="textbox" aria-label="Rich Text Editor, tabMthEditor" title="Rich Text Editor, tabMthEditor"><u>Methodology</u> tab content</div>
      </div>
    </div>
  </div>
  <div id="footerEditor" class="editorSection cke_editable cke_editable_inline cke_contents_ltr ae-editable ae-placeholder" contenteditable="true" tabindex="0" spellcheck="true" role="textbox" aria-label="Rich Text Editor, footerEditor" title="Rich Text Editor, footerEditor">Node 2158 footer</div>
</div>

I can provide some more precision but not the code as it is part of a much bigger application...

[Tzaphkiel]

Normal (in the style dropdown) also does not execute.

[ipeychev]

Hello,

Thanks for the report. Would it be possible to create a very simple HTML page which we can use to reproduce the issue and attach it to the ticket? The described scenario and the above explanations are too broad for reproducing it by ourselves.

Thanks,

[Tzaphkiel]

Would this do?
I could not get the AlloyEditor to load properly from JSFiddle using rawgit but this might be a base for debugging.
https://jsfiddle.net/Tzaphkiel/1dfv4cp5/5/

The #headerEditor, #overviewTabEditor and #footerEditor should work straight away, the other tabs not like explained above.

[jbalsas]

Hey @Tzaphkiel, as noted in #499, CKEditor does not work properly if initialized over an element that is not visible.

Instead of trying to initialize them all at once and then changing the contenteditable property, could you please try to initialize every particular editor in the the show.bs.tab method when they become visible? You should only need to do this once per editor.

[Tzaphkiel]

Yes that would work had the editor not being a React component that is instantiated once and to which the data only is passed through props from the state...
I've actually already tried to destroy the editor on componentWillReceiveProps and re-create it after the data property or content has been set but the editor does not show the new text then...

The component looks like this:

  componentDidMount: ->
    @editor = AlloyEditor.editable @props.containerId
    #@ckEditor = @editor.get('nativeEditor')

  componentWillUnmount: ->
    @editor.destroy()

  renter: ->
    <div
          id={@props.containerId}
          className={@props.className}
          dangerouslySetInnerHTML={{__html: @props.content}}
        />

The parent component has the show.bs.tab code.

I would need to find a way to initialize the CKEditor everytime the content changes... which seems rather heavy... Is there no update that could be called to refresh the properties of the CKEditor? I even tried via the nativeEditor.setData(...) and .updateElement(...) to no avail...

[ipeychev]

Hey @Tzaphkiel,

I'm attaching a working example here which is a fork of your JSFiddle code. Please check the changes:

1. AlloyEditor.editable expects an id, not a selector.
2. The editor's instance is created once when the tab is made visible. Not only that CKEditor doesn't work well if instantiated on a node with display:none, but it is a good practice to create an instance only when user actually displays a tab.

I don't see what would be the difference if you were using React components. The basic rules are: if the component is unmounted, remove the editor as in your code above. If not, just create it once, as we do it on tab click. If you are passing a new content, update the existing editor by using: nativeEditor.setData(...).

Hope that helps, if not, create a zip and attach it to this thread, as I did.

Thanks,

test-alloyeditor.zip

[Tzaphkiel]

Hi @ipeychev,

Thank you for the code, this does indeed work.

In the end I was trying with React to have the editor activate and deactivate on component mount and unmount respectively...

This was not happening because the RichEditor component did not have a direct parent chain of React components. The RichEditor React component within the tabs were mounted once at the show of the tabbed editor container component and thus never unmounted, especially not when a tab selection changed.

The trick was just having the tab 'panel' mount the editor every time it is selected and unmount it everytime it is not anymore selected.

To do this, I used the react-tabs library to make sure I had no html for the tabs but pure React components:

#[...]
{Tab, Tabs, TabList, TabPanel} = require 'react-tabs'
#[...]
 handleSelect: (index, last) ->
    console.debug "Select tab: ", index, " last: ", last

  render: ->
    headerRE = <RichEditor containerId="headerEditor" className="editorSection" content={@props.nodeData?.header} />
    ovvTabRE = <RichEditor containerId="overviewTabEditor" className="editorContent" content={@props.nodeData?.t_ovv} />
    mpsTabRE = <RichEditor containerId="mpsTabEditor" className="editorContent" content={@props.nodeData?.t_mps} />
    dsTabRE  = <RichEditor containerId="dsTabEditor" className="editorContent" content={@props.nodeData?.t_dss} />
    padTabRE = <RichEditor containerId="padTabEditor" className="editorContent" content={@props.nodeData?.t_pad} />
    mthTabRE = <RichEditor containerId="mthTabEditor" className="editorContent" content={@props.nodeData?.t_mth} />
    footerRE = <RichEditor containerId="footerEditor" className="editorSection" content={@props.nodeData?.footer} />
    <Tabs
        onSelect={this.handleSelect}
        selectedIndex={2}
      >
      <TabList>
        <Tab>Overview</Tab>
        <Tab>Most popular series</Tab>
        <Tab>Datasets</Tab>
        <Tab>DatPublications and Dashboardsasets</Tab>
        <Tab>Methodology</Tab>
      </TabList>
      <TabPanel>{ovvTabRE}</TabPanel>
      <TabPanel>{mpsTabRE}</TabPanel>
      <TabPanel>{dsTabRE}</TabPanel>
      <TabPanel>{padTabRE}</TabPanel>
      <TabPanel>{mthTabRE}</TabPanel>
    </Tabs>

[ipeychev]

Great, glad it worked!