Tag: wysiwyg

how to add buttons to wordpress wysiwyg editor

You can add buttons to wordpress wysiwyg editor using following code. For changing wordpress wysiwyg editor, we need to use the quick_tags.js file using hook.

how to add buttons to wordpress wysiwyg editor

But from wordpress 3.1 version we can customize the wordpress editor by using wordpress filter.

Adding more buttons to the editor is really easy. Simply paste this snippet into your theme’s functions.php file.

function enable_more_buttons($buttons) {
 $buttons[] = 'hr';
 $buttons[] = 'sub';
 $buttons[] = 'sup';
 $buttons[] = 'fontselect';
 $buttons[] = 'fontsizeselect';
 $buttons[] = 'cleanup';
 $buttons[] = 'styleselect';
 return $buttons;
}
add_filter("mce_buttons_3", "enable_more_buttons");
how to add buttons to wordpress wysiwyg editor
how to add buttons to wordpress wysiwyg editor

Note: If you are not wordpress developer then do not use above code. Ask your developers to do this for you.

Rich Text Editor in Rails Application

Many times you need normal CMS for your application. You want to need some pages data need to handle through CMS.

It is really very easy to Install any RTE in the Rails. There are many open source RTE available.

I used the Cross-Browser Rich Text Editor for my project.
I downloaded files from there and uploaded to my public folder. I added required CSS and JS file to my layout.

You need to add following lines to your application.html.erb file.(you will find this file in view/layout/ folder)

1. You can add that files on conditional base also. Means for that particular page.
2. Add following lines to your form
:html => { :name => ‘BlogRTE’, :onsubmit => “submitForm();”}

In to add following lines to your form;

<script language=”JavaScript” type=”text/javascript”>
<!–
function submitForm() {
updateRTEs();
return false;
}
initRTE(“/cbrte/images/”, “/cbrte/”, “”, true);
//–>
</script>
<noscript><p><b>Javascript must be enabled to use this form.</b></p></noscript>
<script language=”JavaScript” type=”text/javascript”>
<!–
//build new richTextEditor
var rte1 = new richTextEditor(‘text_content’);
rte1.html = ‘Write your thoughts here.’;
rte1.toggleSrc = true;
rte1.width = 500;
rte1.build();
//–>
</script>

You will get the text_content params in Rails.

For Edit page functionality i got error in form. So you need to this default code for all languages.
rte1.html =””;

When i used this i got an error.

But i solved this issue after some R&D and modification in code.

Use following code for Rails(Edit functionality)
rte1.html =”<%=text_content.gsub(/”/, “‘”).gsub(/\n/, ”).gsub(/\r/, ”) %>”;

this will solve your problem.

Full code: (IF YOUR CODE NOT WORKS THAN USE MY FULL CODE)

<script language=”JavaScript” type=”text/javascript”>
<!–
function submitForm() {
updateRTEs();
return false;
}
initRTE(“/cbrte/images/”, “/cbrte/”, “”, true);
//–>
</script>
<noscript><p><b>Javascript must be enabled to use this form.</b></p></noscript>
<script language=”JavaScript” type=”text/javascript”>
<!–
//build new richTextEditor
var rte1 = new richTextEditor(‘text_content’);
rte1.html = ‘Write your thoughts here.’;
rte1.toggleSrc = true;
rte1.width = 500;
rte1.build();
//–>
</script>