Blog is moved http://imnithin.github.io/tinymce4-customization.html
Customizing Tinymce 4
RichText TinyMCE Editor download here .
Assuming you have copied tinymce folder into public directory of rails that contains all the tinymce's classes, langs, plugins and other folders, files, scripts and everything.
Name the button anything you want, i'm naming here as R.design, on click drop down menu with a single item named menu1 appears, onclick, the content is appended in the editor.
Name the button anything you want, i'm naming here as R.design, on click drop down menu with a single item named menu1 appears, onclick, the content is appended in the editor.
<script src="../tinymce/tinymce.min.js"></script>
<!-- tinymce 4 development package -->
<script >
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 "
});
</script>
Editor will be placed for text area type.
<%= text_area :column_name %>
<%= text_area :column_name %>
Appended content can be changed, {text: 'menu1 ', onclick: function() {editor.insertContent('insert anything');}
and using along with rails.
and using along with rails.
menu: [
<% @object.each do |value| %>
{text: '<%= value %>', onclick: function() {editor.insertContent('<%= value %>');},
<% end %>
]
Re-Order tool-Bar icons and 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 in tinymce/plugins/.. folder can be used in the tinymce editor.
All of the things you include in tinymce/plugins/.. folder can be used in the tinymce editor.
toolbar: "forecolor backcolor"
Changing table border
tinymce/skins/lightgray/content.min.css
That has style applied for table.
That has style applied for table.
border: 1px dashed #BBBBBB;
simple styling and comparatively better than provided one above.
.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:'abc'},{text:'sub2',value:'def'}],
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: '<%[email protected] if @custom_report.top.present? %>'}
],
onsubmit: function(e) {
<%= remote_function(
:url => {:controller=>"controller",:action => "action"},
:with => "'margin_top=' + e.data.top " )
%>
}
});
}
},