1

我正在尝试使用 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>

有什么想法吗？！

4

1 回答 1

1

所以我不得不回答我自己的问题，因为我很快就需要一个答案。看来我所经历的行为是故意的？当然不是在最新版本的 TinyMCE（测试后的 3.x 和 4.x）中删除的东西。

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

我从他在这里发表的一篇文章中借用了 Peter Wilson 的大量代码：http ://www.tinymce.com/forum/viewtopic.php?id= 20319 非常感谢这个 Peter！

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

我的 Peter 代码版本对原始代码进行了非常轻微的修改，以便向 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);

})();

于 2013-09-27T02:52:39.973 回答