Redactor – Fantastic WYSIWYG-editor on jQuery

Redactor is written using the library jQuery . Tested on Mac OS and Windows, web browsers:

  • Firefox 3 +
  • Safari 4 +
  • Chrome 4 +
  • Opera 10 +
  • IE 7 +

How does the editor

Redactor replaces the <textarea> edited by <iframe> , thus creating a toolbar with a set of control buttons.

License

Redactor is free to the MIT License, or GPL, your choice.

jquery code

<!DOCTYPE html>
<html>
	<head>
		<title>Redactor</title>
		<meta charset="utf-8">

		<script src="/js/jquery-1.7.min.js"></script>

		<link rel="stylesheet" href="/js/redactor/css/redactor.css" />
		<script src="/js/redactor/redactor.js"></script>

		<script type="text/javascript">
		$(document).ready(
			function()
			{
				$('#redactor_content').redactor();
			}
		);
		</script>
	</head>
	<body>
		<textarea id="redactor_content" name="content" style="height: 560px;"></textarea>
	</body>
</html>

Settings

  • lang
  • toolbar
  • load
  • path
  • css
  • focus
  • resize
  • autoresize
  • fixed
  • autoformat
  • cleanUp
  • convertDivs
  • removeClasses
  • removeStyles
  • convertLinks
  • autosave
  • interval
  • imageGetJson
  • imageUpload
  • linkFileUpload
  • fileUpload
  • overlay

Toolbar Option

The editor comes with two toolbars: normal and minimal. All toolbars are stored as separate files in the Editor Toolbars .

You can create multiple sets of toolbars on different occasions. To do so, by analogy with existing sets of buttons to edit toolbars.

After this, when you call Redactor, you must specify exactly which toolbar will be displayed like this:

<script type="text/javascript">
$(document).ready(
	function()
	{ 		$('#redactor_content').redactor({ toolbar: 'custom' });
	}
);
</script>

Images upload

Javascript not allows for downloading of images, so this feature is implemented using server-side programming languages, for example, PHP.

First of all, make sure that the editor is set the path to boot, it can be done by changing the setting imageUpload redactor.js editor in the file, or setting when you start like this:

<script type="text/javascript">
$(document).ready(
	function()
	{ 		$('#redactor_content').redactor({ imageUpload: '/modules/upload.php' });
	}
);</script>

Files upload

Javascript not allows for file uploads, so this feature is implemented using server-side programming languages, for example, PHP.

First of all, make sure that the editor is set the path to boot, it can be done by changing the setting fileUpload redactor.js editor in the file, or setting when you start like this:

<script type="text/javascript">
$(document).ready(
	function()
	{ 		$('#redactor_content').redactor({ fileUpload: '/file_upload.php' });
	}
);</script>

Autosave

If you want the text editor is automatically maintained, for example, every two minutes. To do this, specify the address to a script that will handle the incoming data.

<script type="text/javascript">
$(function()
{ 	$('#redactor_content').redactor({ autosave: '/save.php', interval: 120 });
});
</script>

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

View Demo Download

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2012/05/new-jquery-wysiwyg-editor1.pnghttp://w3lessons.info/wp-content/uploads/2012/05/new-jquery-wysiwyg-editor1-150x150.pngKarthikeyan KFreebiesjqueryJquery,jquery plugin,wysiwyg editor
Redactor - Fantastic WYSIWYG-editor on jQuery Redactor is written using the library jQuery . Tested on Mac OS and Windows, web browsers:Firefox 3 + Safari 4 + Chrome 4 + Opera 10 + IE 7 +How does the editor Redactor replaces the <textarea> edited by <iframe> , thus creating a toolbar with a set of control buttons. License Redactor is free to the MIT License,...