定制微型MCE块

Question

大家都知道，在默认情况下，微型MCE的区块引号会生成以下内容

<blockquote> content here </blockquote>

我是通过CSS来设计这个的：

css im使用：

blockquote { border: none; font-family: 'Georgia', serif; color: #444; font-size: 1.2em;
           font-weight: bold; font-style: italic; font-weight: normal;
           padding: 0; text-indent: 1.2em; color: #222;
           border-bottom: 1px solid #888; 
           position: relative; bottom: 12px;  }

.no-js blockquote { position: static; bottom: auto; border: none; }

blockquote span { position: relative; top: 12px; background-color: white; padding: 0 15px; }

为了在不添加非相关的非语义标记的情况下出现尾随行，我需要在块引号内生成一个span：

<blockquote>
     <span>
        content here
    </span>
</blockquote>

最好不要为此制作单独的短代码，只需使用本机块引用按钮即可。

有人能帮忙吗？

Answer 1

如果它是为了造型目的，我能想到的最快的解决方案就是使用Javascript。据我所知，修改TinyMCE标记的输出需要编辑Wordpress核心文件，因此在<span>中添加Javascript更实用。像这样的事情可以做到：

<script type="text/javascript>
   $('.post blockquote').wrapInner('<span />');
</script>

其中.post是单个post容器的类。

Answer 2

多亏了死锁：

// unwrap inner
var blockquotes = $('.post blockquote');
blockquotes.html(blockquotes.find('p').text());

// rewrap with span
blockquotes.wrapInner('<span />');