TinyMce 设置编辑器按钮的文本颜色
TinyMce set text color of editor button
我有许多自定义按钮,我想将每个按钮的文本设置为不同的样式。但是 'style' 选项设置 div 而非按钮的样式,因此它不起作用。
这是我生成按钮的代码
// Add a button for rank
editor.addButton('rank', {
text: 'Rank',
tooltip: 'Highlight Rank',
icon: false,
style:'color:red;',
onPostRender: function () {
var button = this;
editor.on('NodeChange', function (e) {
if (editor.formatter.match('rank')) {
button.active(true);
} else {
button.active(false);
}
});
},
这是输出的html
<div id="mceu_0" class="mce-widget mce-btn mce-btn-small mce-first mce-last" tabindex="-1" aria-labelledby="mceu_0" style="color: red;" role="button" aria-label="Highlight Rank" aria-pressed="false">
<button role="presentation" type="button" tabindex="-1" >Rank</button></div>
任何人都可以指出正确的选项以用于将样式应用于按钮吗?我需要为每个按钮设置不同的样式。
你可以用 classes
的 descendant or child selector on buttons and apply it with TinyMCE's button setting 制作 CSS class:
tinymce.init({
selector: "textarea",
toolbar: "rank",
setup: function (editor) {
editor.addButton('rank', {
text: 'Rank',
tooltip: 'Highlight Rank',
icon: false,
classes: 'rank-button'
});
}
});
.mce-rank-button button {
color: red !important;
}
<script src="http://tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<form method="post" action="somepage">
<textarea name="content" style="width:100%"></textarea>
</form>
我有许多自定义按钮,我想将每个按钮的文本设置为不同的样式。但是 'style' 选项设置 div 而非按钮的样式,因此它不起作用。
这是我生成按钮的代码
// Add a button for rank
editor.addButton('rank', {
text: 'Rank',
tooltip: 'Highlight Rank',
icon: false,
style:'color:red;',
onPostRender: function () {
var button = this;
editor.on('NodeChange', function (e) {
if (editor.formatter.match('rank')) {
button.active(true);
} else {
button.active(false);
}
});
},
这是输出的html
<div id="mceu_0" class="mce-widget mce-btn mce-btn-small mce-first mce-last" tabindex="-1" aria-labelledby="mceu_0" style="color: red;" role="button" aria-label="Highlight Rank" aria-pressed="false">
<button role="presentation" type="button" tabindex="-1" >Rank</button></div>
任何人都可以指出正确的选项以用于将样式应用于按钮吗?我需要为每个按钮设置不同的样式。
你可以用 classes
的 descendant or child selector on buttons and apply it with TinyMCE's button setting 制作 CSS class:
tinymce.init({
selector: "textarea",
toolbar: "rank",
setup: function (editor) {
editor.addButton('rank', {
text: 'Rank',
tooltip: 'Highlight Rank',
icon: false,
classes: 'rank-button'
});
}
});
.mce-rank-button button {
color: red !important;
}
<script src="http://tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<form method="post" action="somepage">
<textarea name="content" style="width:100%"></textarea>
</form>