{"action":"created","issue":{"url":"https://api.github.com/repos/liferay/alloy-editor/issues/567","repository_url":"https://api.github.com/repos/liferay/alloy-editor","labels_url":"https://api.github.com/repos/liferay/alloy-editor/issues/567/labels{/name}","comments_url":"https://api.github.com/repos/liferay/alloy-editor/issues/567/comments","events_url":"https://api.github.com/repos/liferay/alloy-editor/issues/567/events","html_url":"https://github.com/liferay/alloy-editor/issues/567","id":165345984,"number":567,"title":"Chrome+Bootstrap tabs : U, I & B toolbar actions not working","user":{"login":"Tzaphkiel","id":644489,"avatar_url":"https://avatars.githubusercontent.com/u/644489?v=3","gravatar_id":"","url":"https://api.github.com/users/Tzaphkiel","html_url":"https://github.com/Tzaphkiel","followers_url":"https://api.github.com/users/Tzaphkiel/followers","following_url":"https://api.github.com/users/Tzaphkiel/following{/other_user}","gists_url":"https://api.github.com/users/Tzaphkiel/gists{/gist_id}","starred_url":"https://api.github.com/users/Tzaphkiel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Tzaphkiel/subscriptions","organizations_url":"https://api.github.com/users/Tzaphkiel/orgs","repos_url":"https://api.github.com/users/Tzaphkiel/repos","events_url":"https://api.github.com/users/Tzaphkiel/events{/privacy}","received_events_url":"https://api.github.com/users/Tzaphkiel/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/liferay/alloy-editor/labels/help%20wanted","name":"help wanted","color":"159818"}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2016-07-13T15:10:56Z","updated_at":"2016-07-14T13:17:10Z","closed_at":null,"body":"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.\r\n\r\nThe rest of the actions such as heading (inline or otherwise), the twitter and link action do work...\r\n\r\nThe whole toolbar also works on the first tab (the displayed one).\r\n\r\n_The fix proposed by #499 is not enough._\r\n\r\nThere are no errors in the console and the DOM does not change...\r\n\r\nMy editors are initialized on componentDidMount and their content are set by a bound this.children property.\r\n\r\nThe tabs change (show event) activates the editor using the following code set on the parent containing the tabs element (also setup on componentDidMount):\r\n\r\n```coffee\r\ncomponentDidMount: ->\r\n    console.debug \"NodeDescriptor did mount\"\r\n    # FIXME Hack for chrome to set editable for initialized editors that were hidden\r\n    $('a[data-toggle=\"tab\"]').on 'shown.bs.tab', (e) ->\r\n      editorId = $(e.target).attr('aria-controls') + 'Editor'\r\n      $('#'+editorId).attr('contentEditable', true);\r\n```\r\n\r\n- Chrome: fails\r\n- Firefox: works\r\n-  dependencies:\r\n  -     \"alloyeditor\": \"1.2.3\",\r\n  -     \"bootstrap\": \"3.3.6\",\r\n  -     \"react\": \"15.2.1\",\r\n  -     \"react-dom\": \"15.0.1\",\r\n  -     \"react-redux\": \"4.4.5\",\r\n  -     \"react-router\": \"2.5.2\",\r\n  -     \"redux\": \"3.5.2\",\r\n  -     \"redux-action\": \"1.0.0\",\r\n  -     \"redux-thunk\": \"2.1.0\"\r\n\r\n```html\r\n<div>\r\n  <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\">\r\n    <p><strong></strong>Node <strong>2158</strong> <u>header</u></p>\r\n  </div>\r\n  <div id=\"tabsEditors\" class=\"editorSection\">\r\n    <ul class=\"nav nav-pills\" role=\"tablist\">\r\n      <li role=\"presentation\" class=\"\"><a href=\"#overviewTab\" aria-controls=\"overviewTab\" role=\"tab\" data-toggle=\"tab\" aria-expanded=\"false\">Overview</a></li>\r\n      <li role=\"presentation\" class=\"active\"><a href=\"#mpsTab\" aria-controls=\"mpsTab\" role=\"tab\" data-toggle=\"tab\" aria-expanded=\"true\">Most popular series</a></li>\r\n      <li role=\"presentation\" class=\"\"><a href=\"#dsTab\" aria-controls=\"dsTab\" role=\"tab\" data-toggle=\"tab\" aria-expanded=\"false\">Datasets</a></li>\r\n      <li role=\"presentation\" class=\"\"><a href=\"#padTab\" aria-controls=\"padTab\" role=\"tab\" data-toggle=\"tab\" aria-expanded=\"false\">Publications and Dashboards</a></li>\r\n      <li role=\"presentation\" class=\"\"><a href=\"#tabMth\" aria-controls=\"tabMth\" role=\"tab\" data-toggle=\"tab\" aria-expanded=\"false\">Methodology</a></li>\r\n    </ul>\r\n    <div class=\"tab-content\">\r\n      <div role=\"tabPanel\" class=\"tab-pane fade\" id=\"overviewTab\">\r\n        <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>\r\n      </div>\r\n      <div role=\"tabPanel\" class=\"tab-pane fade active in\" id=\"mpsTab\">\r\n        <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>\r\n      </div>\r\n      <div role=\"tabPanel\" class=\"tab-pane fade\" id=\"dsTab\">\r\n        <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\">\r\n          <p><strong>Datasets</strong> tab content</p>\r\n        </div>\r\n      </div>\r\n      <div role=\"tabPanel\" class=\"tab-pane fade\" id=\"padTab\">\r\n        <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>\r\n      </div>\r\n      <div role=\"tabPanel\" class=\"tab-pane fade\" id=\"tabMth\">\r\n        <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>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <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>\r\n</div>\r\n```\r\n\r\nI can provide some more precision but not the code as it is part of a much bigger application..."},"comment":{"url":"https://api.github.com/repos/liferay/alloy-editor/issues/comments/232662291","html_url":"https://github.com/liferay/alloy-editor/issues/567#issuecomment-232662291","issue_url":"https://api.github.com/repos/liferay/alloy-editor/issues/567","id":232662291,"user":{"login":"Tzaphkiel","id":644489,"avatar_url":"https://avatars.githubusercontent.com/u/644489?v=3","gravatar_id":"","url":"https://api.github.com/users/Tzaphkiel","html_url":"https://github.com/Tzaphkiel","followers_url":"https://api.github.com/users/Tzaphkiel/followers","following_url":"https://api.github.com/users/Tzaphkiel/following{/other_user}","gists_url":"https://api.github.com/users/Tzaphkiel/gists{/gist_id}","starred_url":"https://api.github.com/users/Tzaphkiel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Tzaphkiel/subscriptions","organizations_url":"https://api.github.com/users/Tzaphkiel/orgs","repos_url":"https://api.github.com/users/Tzaphkiel/repos","events_url":"https://api.github.com/users/Tzaphkiel/events{/privacy}","received_events_url":"https://api.github.com/users/Tzaphkiel/received_events","type":"User","site_admin":false},"created_at":"2016-07-14T13:17:10Z","updated_at":"2016-07-14T13:17:10Z","body":"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...\r\nI'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... \r\n\r\nThe component looks like this:\r\n```coffee\r\n  componentDidMount: ->\r\n    @editor = AlloyEditor.editable @props.containerId\r\n    #@ckEditor = @editor.get('nativeEditor')\r\n\r\n  componentWillUnmount: ->\r\n    @editor.destroy()\r\n\r\n  renter: ->\r\n    <div\r\n          id={@props.containerId}\r\n          className={@props.className}\r\n          dangerouslySetInnerHTML={{__html: @props.content}}\r\n        />\r\n```\r\nThe parent component has the `show.bs.tab` code.\r\n\r\nI 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...\r\n"}}
{"actor":{"display_login":"Tzaphkiel"}}