I have a website (still develop), on which a profile page contains multiple fields (div) that are contenteditable and shows a small ckeditor as inline. On almost every browser this is working perfectly, but on chrome this doesn't work (the div remains contenteditable false and the toolbar remains greyedout), when I refresh the page it suddenly works.
Before I had the page as display none, but changed that so the page is now showing by default.
The code is been called as followed:
$display .= '<textarea ' . $disabled . ' style="display:none!important;" class="upme-input ' . $required_class . ' '.$custom_editor_styles.'" name="' . $meta . '-' . $id . '" id="' . $meta . '-' . $id . '" placeholder="' . $prefilled_text . '">' . htmlspecialchars_decode(get_the_author_meta($meta, $id)) . '</textarea>';
$display .= '<div contenteditable="true" style="height:150px;width:358px;overflow-y:scroll;background:#4c4c4c;color:#FFF;font-family:Helvetica!important;font-size:14px!important;font-weight:normal!important;" class="upme-input ' . $required_class . ' '.$custom_editor_styles.'" name="' . $meta . '' . $id . '" id="' . $meta . '-' . $meta . '" placeholder="' . $prefilled_text . '">' . htmlspecialchars_decode(get_the_author_meta($meta, $id)) . '</div>';
$display .= "<script>CKEDITOR.disableAutoInline=true;CKEDITOR.inline( '".$meta."-".$meta."', { toolbar : 'MyToolbar', removePlugins: 'elementspath,magicline'});</script>";
$display .= "<script>jQuery('#".$meta."-".$meta."').focusout(function(){var htmlString = jQuery(this).html();jQuery('#".$meta."-".$id."').val(htmlString);});</script>";
In the code you also see a textarea, but that isn't linked to the ckeditor, only is there to make sure it get saved, (the code is from a plugin on a wordpress site).
Does anyone has the same issue and know how to solve it.