所見即所得多輸入（jQuery插件）

我有一個頁面，需要兩個富文本編輯器，所以我去了所見即所得（你看到的是你得到的）。他們工作得很好，除了一點惱人的細節。當我點擊按鈕以粗體，斜體或縮進時，它適用於兩個RTE，並側重於第二個輸入。我無法弄清楚如何將工具欄彼此分開。所見即所得多輸入（jQuery插件）

HTML：

<div class="form-group"> 
    <label for="definition" class="col-lg-3 control-label">Definition:</label> 
    <div class="col-lg-3"> 
     <div class="btn-toolbar" data-role="editor-toolbar" data-target="##definition"> 
      <div class="btn-group"> 
       <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a> 
       <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a> 
      </div> 
      <div class="btn-group"> 
       <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a> 
       <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a> 
       <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a> 
       <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a> 
      </div> 
     </div> 
     <div id="definition"></div> 
    </div> 
</div> 
<div class="form-group"> 
    <label for="consent" class="col-lg-3 control-label">Consent:</label> 
    <div class="col-lg-3"> 
     <div class="btn-toolbar" data-role="editor-toolbar" data-target="##consent"> 
      <div class="btn-group"> 
       <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a> 
       <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a> 
      </div> 
      <div class="btn-group"> 
       <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a> 
       <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a> 
       <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a> 
       <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a> 
      </div> 
     </div> 
     <div id="consent"></div> 
    </div> 
</div>

JS（不是真的需要，但以防萬一...）

$(function() { 
    $("#definition, #consent").wysiwyg(); 
})

來源

2014-01-24 Sterling Archer

經過一段時間的研究，答案很簡單。讀入的源代碼，你會看到它有一個工具欄選擇：

toolbarSelector: '[data-role=editor-toolbar]',

所以你必須重寫了一個獨特的data-role像這樣：

$("#consent").wysiwyg({ toolbarSelector: '[data-role=editor2-toolbar]'});

確保更改data-role以匹配新的選擇器。

來源

2014-01-24 21:18:41

-1

還沒有嘗試過，但沒有嘗試分離所見即所得的初始化。

$(function() { 
    $("#definition").wysiwyg(); 
    $("#consent").wysiwyg(); 
})

來源

2014-01-24 20:33:11

是的，沒有工作 –

剛剛發表評論，但它跑了很長時間。

如果它與我的所見即所得編輯器類似，那是因爲系統設置爲與一個容器一起工作。即使你添加了2個項目，它也會對兩個項目執行相同的操作。解決這個問題的唯一方法是創建兩個單獨的頁面並將它們放置在同一頁面上（通過無縫的iframe，可能是AJAX）。

請注意，我並不確定這個特定的編輯器是如何工作的，但它看起來像後端工作非常相似（即那些數據屬性像我的一樣，是相關的execCommand()參數）。

來源

2014-01-24 21:04:03

所見即所得多輸入（jQuery插件）

回答

相關問題