TinyMCE is an excellent platform-independent web-based Javascript/HTML editor control, which is highly useful for those who want to allow their users to edit HTML documents online. It is mainly designed to integrate with Content management systems, including WordPress, Drupal etc easily. It is a rich text editor that outputs HTML, making it really easy to add rich content using rails application.
TinyMCE has the ability to convert HTML text area fields or any other HTML elements to editor instances. It offers various HTML formatting tools for text as well as for images/videos(in terms of alignment). Configurations can happen during the integration with a project which results in flexibility of the project.
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: ‘<%[email protected] if @custom_report.top.present? %>’
}
],
onsubmit: function(e) {<%= remote_function(
:url => {:controller=>”controller”,:action => “action”},
:with => “‘margin_top=’ + e.data.top ” )
%>}
});
}
}
Having gained the prowess in providing RoR solutions all over the world in development, deployment, management, monitoring, supporting your apps, RailsCarma gives you efficient and simplified business solutions.
Read more :