tinyMCE工具栏上右侧的浮动按钮
tinyMCE工具栏上右侧的浮动按钮
提问于 2014-03-13 07:29:18
我想要做的是创建一个工具栏，将一些默认按钮左对齐，然后让一个自定义按钮/下拉菜单与同一工具栏的右对齐。
下面是我的html/javascript/init：
<h3>
Behold: Magic
</h3>
<div>
<%= text_area_tag :content, "", id: "magic", rows: 20 %>
</div>
<script type="text/javascript">
tinymce.init({
selector: "#magic",
plugins: "link image",
menubar: false,
toolbar: "bold italic underline strikethrough | styleselect | bullist numlist | undo redo | link image | insertField",
setup: function(editor) {
editor.addButton("insertField", {
type: "menubutton",
text: "Insert Field",
style: "float: right",
menu: [
{ text: "First Name", onclick: function() { editor.insertContent("tom"); } },
{ text: "Last Name", onclick: function() { editor.insertContent("prats"); } }
]
});
}
});
</script>到目前为止，这段代码的工作原理是，包含所有元素的tinyMCE工具栏存在，但仍然靠左对齐。下面是它的外观/应该是这样的：
错误：
These | Count | As | Buttons | Floated | Left | Floated Right右图：
These | Count | As | Buttons | Floated | Left Floated Right正如您所看到的，我尝试通过style (但也是css )选项添加css，虽然它出现在元素上，但元素并没有出现在右侧。任何帮助都将不胜感激。
回答 6
Stack Overflow用户
发布于 2015-07-18 13:54:49
您没有指定您的TinyMCE版本，所以我假设您正在谈论TinyMCE 4。
首先，您需要确保要向右对齐的按钮属于一个组。在下面的示例工具栏中，我们将右对齐fullscreen按钮。我们将该按钮放在它自己的组中，方法是在它前面加上一个管道：|。
toolbar: 'h2 bold italic | bullist numlist | link unlink | fullscreen'现在，使用CSS伪元素，我们将针对工具栏中的最后一组，如下所示：
.mce-btn-group:last-child {
float:right;
border-left: none;
}我们使用float:right将其右对齐，并使用border-left: none;删除分隔符
Stack Overflow用户
发布于 2020-12-04 18:59:19
大多数最新的版本使用了flexbox，所以float不能工作。
.tox-toolbar__group:last-child' {
marginLeft: 'auto',
borderLeft: 'none',
}Stack Overflow用户
发布于 2014-08-08 17:35:11
使用css：
.mce-toolbar .mce-last { float: right; }在某些浏览器中，最后一项可能会下拉，您可以将最后一项工具栏移动到第一项，然后使用：
.mce-toolbar .mce-first { float: right; }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22366033
复制相关文章
相似问题