2014-03-12 153 views
1

我想要做的是創建一個工具欄,其中一些默認按鈕與左側對齊,然後將自定義按鈕/下拉對齊到同一工具欄的右側。在tinyMCE工具欄上的右側浮動按鈕

這裏是我的HTML/JavaScript的/初始化:

<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 

正如你所看到的,我想從風格添加CSS(也是班級)選項,雖然它出現在元素上,元素沒有走到右側。任何幫助,將不勝感激。

回答

0

使用CSS:

.mce-toolbar .mce-last { float: right; } 

在一些布勞爾,最後一個項目可以下拉列表中,你可以先移動工具欄的最後項目及用途:

.mce-toolbar .mce-first { float: right; } 
2

你沒有指定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;

取出分離
0

剛去的Common.js文件初始化函數和編輯機能的研究

function InitTinyMCE() { 
    tinymce.init({ 
     mode: "specific_textareas", 
     editor_selector: "ub-textarea", 
     theme: "modern", 
     encoding: "xml", 
     plugins: [ 
      "advlist autolink lists link image charmap print preview hr anchor pagebreak", 
      "searchreplace wordcount visualblocks visualchars code fullscreen", 
      "insertdatetime media nonbreaking save table contextmenu directionality", 
      "emoticons template paste" 
     ], 
     toolbar1: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | emoticons", 
     image_advtab: true, 
     menubar: false, 

     statusbar: false 
    }); 
} 
相關問題