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）。

考虑到这一点，我最终不得不制作一个插件来做我想做的事情。

我从彼得·威尔逊那里借来了大量的代码，他在这里发了一篇文章：http://www.tinymce.com/forum/viewtopic.php?id=20319非常感谢彼得！

我最后稍微改变了原始问题的规则，因为我的解决方案在我想要选择的所有内容周围添加了一个外包装div。这个方法也让我可靠地在我的前端站点中使用jQuery获取所需的html区域。

我的Peter版本的代码只是稍微修改了一下，以便为DIV添加一个类，重命名它，使用不同的按钮等。

该插件工作正常，允许创建包含TinyMCE内任意数量内容的div。插入的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);

}）（）;

TinyMCE - 将样式应用于项目符号和多个段落将样式应用于每个项目符号和我怎么避免？

1 个答案: