Customizing TinyMce Editor 4, also using with Ruby on Rails.

Adding Menu button

Copy the complete contents from TinyMce-4 development package have it in your assets or public folder, it includes tinymce's classes, langs, plugins and other files, scripts and everything you need.

Name a button, here I will name as R.design, on click drop down menu with a single item named "menu1" appears, onclick, the content is appended in the editor, don't forget to include tinymce.min.js

tinymce.init({
   selector: "textarea",
   setup: function(editor) {
       editor.addButton('report_design', {
           type: 'menubutton',
           text: 'R.Design',
           icon: false,
           menu: [
           {text: 'menu1 ', onclick: function() {editor.insertContent('menu1');}}
           ]
       });
   },

   plugins: [
   "advlist autolink lists link image charmap print preview anchor",
   "searchreplace visualblocks code fullscreen",
   "insertdatetime media table contextmenu paste moxiemanager",
   "emoticons print textcolor"
   ],
   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | emoticons | forecolor backcolor | print | menu  "
});

selector: "textarea"

indicates editor will be placed for input type textarea.

Using with Rails

menu: [
 <% @array.each do |value| %>
  {text: '<%= value %>', onclick: function() {editor.insertContent('<%= value %>');}
 <% end %>
 ]

Re-order tool-bar icons, coloring text and background.

toolbar: "insertfile undo redo"
toolbar: "undo insertfile redo"

If the text color icon and background coloring is missing, all you need is to add the textcolor into your plugins;[...] first, then use the forecolor and backcolor in the toolbar, so the icon does appear in the editor toolbar.

All of the things you include/defined in tinymce/plugins/* folder can be used in the tinymce editor.

toolbar: "forecolor backcolor"

Changing table border

File: tinymce/skins/lightgray/content.min.css

That has style applied for table.

border: 1px dashed #BBBBBB;

Override the default styling, simple and comparatively better than default.

.mce-item-table, .mce-item-table td, .mce-item-table th, .mce-item-table caption {    
  border: 1px solid black;   
  border-collapse: collapse;
  font-size: 14px;
}

Sub-Menu items

menu: [
 {
 text:'Menu item', menu:[ {text:'sub1',value:'val1'},{text:'sub2',value:'val2'}], 
 onclick: function() {editor.insertContent('<%= "submenu" %>');} 
 }
]

Using along with rails, onclick of a submenu item, item insertion into editor's textarea space.

menu: [
 { 
   text:'Student Basic Data', menu:[<% @object.each do |data| %>{text:'<%= data %>', 
   onclick: function() {editor.insertContent('<%= data %>');}},<% end %>] 
 }
]

Window Manager

{
    text:'Name', onclick: function()
{
    editor.windowManager.open({
        title: 'Paper Margins',
        body: [
            {type: 'textbox', name: 'first', label: 'first name',value: ''},
            {type: 'textbox', name: 'last', label: 'last name', value: ''}
        ],
        onsubmit: function(e) {
            // Insert content when the window form is submitted
            editor.insertContent('First Name' + e.data.first);
            editor.insertContent('Last Name' + e.data.last);
        }
    });
}
}

Using along rails

{text:'Margins', onclick: function()
{
    editor.windowManager.open({
        title: 'Paper Margins',
        body: [
            {
             type: 'textbox', name: 'top', label: 'Margin top (cm)',
             value: '<%=@report.top if @custom_report.top.present? %>'
            }
        ],
        onsubmit: function(e) {

            <%= remote_function(
            :url => {:controller=>"controller",:action => "action"},
            :with => "'margin_top=' + e.data.top " )
            %>

        }
    });
}
}

Enjoy Customizing tinymce - code.