TinyMCE - 將樣式應用於子彈和多個段落將樣式應用於每個子彈＆para - 我如何避免？

Question

我正在嘗試在TinyMCE中使用theme_advanced_styles命令將類添加到TinyMCE編輯器中的文本選擇中。問題是如果段落包含項目符號，那麼風格適用於整個項目（以及每個段落）。

我想要的只是我所做的所有選擇都將樣式類添加到它的開頭。也就是說，如果我的風格類是「expandCollapse」我想：

<p class="expandCollapse">some content... some content... some content... some content... som content... some content... some content...&nbsp; 
<ul> 
<li>asdsadsadsadsasda</li> 
<li>asdsadsa</li> 
<li>sada</li> 
</ul> 
asome content... some content... some content... some content... some content... some content... some content... some content...&nbsp;</p> 

但我得到的是：

<p class="expandCollapse">some content... some content... some content... some content... some content... some content... some content...&nbsp; 
<ul> 
<li class="expandCollapse">asdsadsadsadsasda</li> 
<li class="expandCollapse">asdsadsa</li> 
<li class="expandCollapse">sada</li> 
</ul> 
</p> 
<p class="expandCollapse">asome content... some content... some content... some content... some content... some content... some content... some content...&nbsp;</p> 

任何想法嗎？

Answer 1

所以我不得不回答我自己的問題，因爲我很快就需要一個答案。看來我所經歷的行爲是故意的？當然不是在TinyMCE的最新版本中已經被刪除的東西（在測試之後都是3.x和4.x）。

考慮到這一點，我最終不得不做一個插件來做我想做的事情。

我借用了Peter Wilson在他發表的一篇文章中借用的大量代碼：http://www.tinymce.com/forum/viewtopic.php?id=20319非常感謝這位彼得！

我最終稍微改變了我的原始問題的規則，因爲我的解決方案在我要選擇的所有內容周圍添加了外部包裝div。這個方法還讓我可以可靠地在前端網站中用jQuery獲取所需的html區域。

我的彼得代碼版本只是從原來的以一類添加到DIV，重命名，使用不同的按鈕，非常輕微的修改等

插件完美的作品，並允許一個div來被創建包裝在TinyMCE內的任何數量的內容。插入的div有我需要的類名也適用於它。

將'customDiv'添加到您的插件和按鈕欄以使其顯示。

(function() { 

    tinymce.create("tinymce.plugins.Div", { 

    init : function(editor, url) { 

    editor.addCommand("mceWrapDiv", function() { 
    var ed = this, s = ed.selection, dom = ed.dom, sb, eb, n, div, bm, r, i; 

    // Get start/end block 
    sb = dom.getParent(s.getStart(), dom.isBlock); 
    eb = dom.getParent(s.getEnd(), dom.isBlock); 

    // If the document is empty then there can't be anything to wrap. 
    if (!sb && !eb) { 
     return; 
    } 

    // If empty paragraph node then do not use bookmark 
    if (sb != eb || sb.childNodes.length > 1 || (sb.childNodes.length == 1 && sb.firstChild.nodeName != 'BR')) 
     bm = s.getBookmark(); 

    // Move selected block elements into a new DIV - positioned before the first block 
    tinymce.each(s.getSelectedBlocks(s.getStart(), s.getEnd()), function(e) { 
     // If this is the first node then we need to create the DIV along with the following dummy paragraph. 
     if (!div) { 
     div = dom.create('div',{'class' : 'expandCollapse'}); 
     e.parentNode.insertBefore(div, e); 

     // Insert an empty dummy paragraph to prevent people getting stuck in a nested block. The dummy has a '-' 
     // in it to prevent it being removed as an empty paragraph. 
     var dummy = dom.create('p'); 
     e.parentNode.insertBefore(dummy, e); 
     //dummy.innerHTML = '-'; 
     } 

     // Move this node to the new DIV 
     if (div!=null) 
     div.appendChild(dom.remove(e)); 
    }); 

    if (!bm) { 
     // Move caret inside empty block element 
     if (!tinymce.isIE) { 
     r = ed.getDoc().createRange(); 
     r.setStart(sb, 0); 
     r.setEnd(sb, 0); 
     s.setRng(r); 
     } else { 
     s.select(sb); 
     s.collapse(1); 
     } 
    } else 
     s.moveToBookmark(bm); 
     }); 

     editor.addButton("customDiv", { 
      //title: "<div>", 
      image: url + '/customdiv.gif', 
      cmd: "mceWrapDiv", 
      title : 'Wrap content in expand/collapse element' 
     }); 

    } 
}); 

tinymce.PluginManager.add("customDiv", tinymce.plugins.Div); 

}）（）;