Click to display and edit in redactor js wysiwyg html editor

Question

I have three different divs with contenteditable="true". And I have set the redactor wysiwyg toolbar to be fixed.

html:

<div id="toolbar_wrapper">
  <div id="toolbar">
  </div>
</div>

<div id="content">
  <div class="redactor redactor1" contenteditable="true">
    <h1>I am a Header</h1>
    <p>I am a paragraph.</p>
  </div>
  <div class="redactor redactor2" contenteditable="true">
    <h1>I am a Header</h1>
    <p>I am a paragraph.</p>
  </div>
  <div class="redactor redactor3" contenteditable="true">
    <h1>I am a Header</h1>
    <p>I am a paragraph.</p>
  </div>

css:

#toolbar {
  position: fixed;
  z-index: 10;
}

Now I when any on divs (redactor1 or redactor2 or redactor3) is clicked, display the redactor toolbar for that clicked div. And hide when clicked outside that div. How do I do that? Thank you.

Sample code in code.io

Answer 1

add this code to your js file

$(function()
{
    $('.redactor1').redactor({
        focus: true,
        toolbarExternal: '#toolbar'
    });

});

$(document).click(function(){
    $("#toolbar_wrapper").hide();
});
$("#toolbar_wrapper").click(function(e){
    e.stopPropagation();
  $("#toolbar_wrapper").css('display','block');
});
$(".redactor").click(function(e){
  e.stopPropagation();
    $("#toolbar_wrapper").css('display','block');
});