customize tiny MCE blockqute

时间:2012-09-23 作者:George Ananda Eman

大家好,我们都知道默认情况下tiny MCE的blockquote会生成

<blockquote> content here </blockquote>
我正在通过CSS设置此样式:

enter image description here

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; }
要在不添加不必要的非语义标记的情况下显示尾随行,我需要在blockquote内生成一个span:

<blockquote>
     <span>
        content here
    </span>
</blockquote>
最好不要为此单独编写短代码,只使用本机blockquote按钮。

有人能帮忙吗?

3 个回复
最合适的回答,由SO网友:deathlock 整理而成

如果是为了设计样式,我能想到的最快的解决方案就是使用Javascript。据我所知,修改TinyMCE标记的输出需要编辑Wordpress核心文件,因此添加一个<span> 使用Javascript。这样做可以:

<script type="text/javascript>
   $(\'.post blockquote\').wrapInner(\'<span />\');
</script>
在哪里.post 是单邮件容器的类。

SO网友:kaiser

Please 使用WordPress的默认处理:Editor styles - read in Codex about it. 这意味着,您也可以将附加到主站点的任何样式添加到编辑器中。

// functions.php » hooked to `after_setup_theme`
add_editor_style( \'style.css\' );

SO网友:George Ananda Eman

多亏了Deathlock:

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

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

结束

相关推荐

不同POST类型的TinyMCE定制样式表

我通过将自定义样式放置在editor-style.css 在我的主题目录中。我正试图找出如何根据我们正在编辑的帖子类型使用不同的样式表。在TinyMCE中获得不同样式的一种方法是在TinyMCE iFrame中切换一个类<body> 标签我在《纽约时报》上看到过ICE editor plugin, 可与TinyMCE一起使用的Microsoft Word“跟踪更改”功能的javascript版本。这就是它在不更改帖子HTML的情况下切换编辑可见性的方式。下面是一个独立的示例:var toggl