单击以在redactor js wysiwyg html编辑器中显示和编辑

Question

我有三个不同的div contenteditable="true"。我已经设置了redactor所见即所得的工具栏。

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;
}

现在，当点击任何div（redactor1或redactor2或redactor3）时，显示该点击的div的redactor工具栏。在div外面点击时隐藏。我怎么做？谢谢。

中的示例代码

Answer 1

将此代码添加到您的js文件

include Elasticsearch::Model

mappings _ttl: { enabled: true, default: '7d' }

Answer 2

您需要为每个redactor实例创建一个工具栏：

  <div id="toolbar_wrapper">
    <div class='toolbar' id="toolbar_for_1"></div>
    <div class='toolbar' id="toolbar_for_2"></div>
    <div class='toolbar' id="toolbar_for_3"></div>
  </div>

然后每次关注特定的编辑器时打开相应的工具栏：

$(function() {
  $.each($('.redactor'), function(i){
    var toolbar_id = '#toolbar_for_' + (i + 1);
    $(this).redactor({
      focus: true,
      toolbarExternal: toolbar_id,
      focusCallback: function(e){
        $(".toolbar").hide();
        $(toolbar_id).show();
      }
    });
  });
})

参见工作示例here