JavaScript WYSIWYG Editor

TinyEditor is a simple JavaScript WYSIWYG editor that is both lightweight (8KB) and standalone. It can easily be customized to integrate with any website through CSS and the multitude of parameters. It handles most of the basic formatting needs and has some functionality built in to help keep the rendered markup as clean as possible. The icons are courtesy of famfamfam and have been combined into a sprite so there are only a few HTTP requests for the editor. I plan on adding some updates in the future to support font color, a full-screen mode, and a paste from Word option.

To initialize the script use the following:

new TINY.editor.edit('editor',{
	id:'input', // (required) ID of the textarea
	width:584, // (optional) width of the editor
	height:175, // (optional) heightof the editor
	cssclass:'te', // (optional) CSS class of the editor
	controlclass:'tecontrol', // (optional) CSS class of the buttons
	rowclass:'teheader', // (optional) CSS class of the button rows
	dividerclass:'tedivider', // (optional) CSS class of the button diviers
	controls:['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'orderedlist', 'unorderedlist', '|' ,'outdent' ,'indent', '|', 'leftalign', 'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n', 'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'cut', 'copy', 'paste', 'print'], // (required) options you want available, a '|' represents a divider and an 'n' represents a new row
	footer:true, // (optional) show the footer
	fonts:['Verdana','Arial','Georgia','Trebuchet MS'],  // (optional) array of fonts to display
	xhtml:true, // (optional) generate XHTML vs HTML
	cssfile:'style.css', // (optional) attach an external CSS file to the editor
	content:'starting content', // (optional) set the starting content else it will default to the textarea content
	css:'body{background-color:#ccc}', // (optional) attach CSS to the editor
	bodyid:'editor', // (optional) attach an ID to the editor body
	footerclass:'tefooter', // (optional) CSS class of the footer
	toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'}, // (optional) toggle to markup view options
	resize:{cssclass:'resize'} // (optional) display options for the editor resize
});

The first parameter taken by TINY.editor.edit is the variable name used for the object instance. Keep in mind that before posting you will need to call the instance.post() function to ensure that the latest changes in the WYSIWYG translate into the text area. This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source code.

1/8/2010 – Resolved a couple IE and Chrome issues and added some cleanup for Safari/Chrome. Thanks for the reports.

1/12/2010 – Resolved issue with conversion to lower case and the header row class.

Posted by in JavaScript on February 8, 2010
  • http://www.zeroz.cn ZeroZ

    In the chrome has bug when click on the source.

  • http://cssglobe.com Alen

    Nice work, thanks for the effort! Any chance of generating P tags when user hits enter?

  • http://www.bernardteske.de Bernard Teske

    Nice Work! I'm looking forward to use it somewhre ;-)

  • Pingback: CSS Brigit | JavaScript WYSIWYG Editor – TinyEditor

  • Pingback: JavaScript WYSIWYG Editor – TinyEditor – Web Development Blog « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

  • http://www.creolab.hr Boris Strahija

    Automatic <p> tags are a must for me.
    I also found a bug, when I try to make a word bold, then go into source view, and back again, the word disappears.

  • Pingback: TinyEditor Безплатен JavaScript WYSIWYG Реадктор за Web 2.0 Приложения | Web 2.0 Blog

  • http://www.graphicrating.com Andy Gongea

    You did it again. I really like the bottom button where you can switch between Source and WYSIWYG. Good looking and it can fit easily in any design.

    Great work, Michael.

  • Pingback: Free JavaScript WYSIWYG Editor: TinyEditor | Free Web Resources

  • http://www.jordanwalker.net/index.php Jordan Walker

    I have heard such great things about this library, I am sure it will get more attention.

  • http://www.leigeber.com/ Michael

    @Alen and Boris – Absolutely, will work on adding that functionality today. Thanks for the suggestion.

    @Boris – Thanks for the report, working on a resolution now. May be an IE only issue.

  • http://www.virtuosimedia.com/ Benjamin @ Virtuosi Media

    Great job! I'll definitely be keeping an eye on this as an alternative for TinyMCE and CKEditor. Bookmarked.

  • http://www.yugada.com Ryan Haugh

    Finally a small WYSIWYG editor that works!

    My one suggestion would be to give the focus back to the same spot in the editor when the user clicks something like the ol or ul buttons. Right now you have to do the extra click of putting the cursor back to the editor.

  • http://www.leigeber.com/ Michael

    @Ryan – Great suggestion, will add it to my short list. Thanks.

  • CZ_nette

    Hi, thanks for your great work. I have one little note, it would be best if i show it to you on simple example: let's assert that i am writing a text. Now, i want to make some text bold – i click bold button, but i have to click into textarea – the focus is destroyed when i click bold. Could you fix that?

    Thanks.

  • CZ_nette

    Oh, sorry, now i see that @Ryan have already written that.

  • Luglio7

    Wow, i really like the look of this editor…. you rock man !

  • Pingback: JavaScript WYSIWYG Editor – TinyEditor – Web Development Blog | 007Nova Articles

  • John B

    Michael,

    I really like the simplicity of this script. Of all of the WYSIWYG editors I've seen, this is the cleanest. I'm having an issue implementing it in a custom PHP CMS, but when I post the form, the changes don't commit. However, if I press the source button, or press it and go back to the WYSIWYG editor, the changes commit. It's almost like there needs to be a save button, because something is going on behind the scenes when I switch over to the source that makes it work. Thanks if you can be of any help, and if not, thanks for the great script anyway.

  • Pingback: TinyEditor – Un RTE de 8Ko | Miary RABEHASY

  • Ryan

    Am I missing something here? I threw this in a form and submitted and nothing posts from the text area… Yes I know I can traverse and grab the value, but why won't it post normally? Is there a method to commit the data from the iframe back into the text area?

  • Pingback: TinyEditor, editor WYSIWYG basado en JavaScript

  • http://www.leigeber.com/ Michael

    @John B and Ryan – Per the post… "Keep in mind that before posting you will need to call the instance.post() function to ensure that the latest changes in the WYSIWYG translate into the text area." Hope that answers your questions.

  • Ryan

    lol, I got excited by how clean it all looks, I didn't bother to read the rest of your post… my bad!

  • Pingback: TinyEditor: Simple JavaScript WYSIWYG Editor « Free & Open Source Web Resources

  • Pingback: Daily Digest for February 8th

  • http://www.virvo.com Web Development

    looks nice, I specially like the design – will be trying it out soon.

  • Pingback: TinyEditor – simple JavaScript WYSIWYG Editor | blogfreakz.com

  • Pingback: とっても！　ちゅどん（雑記帳） » Blog Archive » JavaScript WYSIWYG Editor – TinyEditor – Web Development Blog

  • http://www.leigeber.com/ Michael

    @Waqas – You would need to set it on the css property (i.e. css:'body{font-face:Georgia;Verdana} or user the cssfile property.

  • http://www.informatclic.com Djolhan

    Nice one, i will follow the evolution of your wysiwyg. If you need help for french traduction of your editor, i can do that.

  • Mahdi Yousefi

    Nice,
    But can you add Direction button that add style="direction:rtl" or style="direction:ltr" for right-to-left languages?

  • http://www.dev-net.fr liandri

    Helo ! Good Job !
    However , if you list more 1 tinyeditor (with her 'id…') the resize bug ! Only the last tinyeditor resize take effect !

    Help please ? ! :(

  • Pingback: links for 2010-02-09 « 個人的な雑記

  • Pingback: TinyEditor: Lightweight, Customizable & Standalone WYSIWYG editor

  • simon

    great script once again – I see the word pasting hasn't been figured out yet, I have been battling this myself. It is actually pretty important due to 90% of web users not realising that pasting from word etc is a killer on these editors…
    I look forward to an elegant solution as always

  • http://www.leigeber.com/ Michael

    @liandri – Not sure if I understand what you are trying to say. Please take it to the forum.

    @simon – Thanks, hope to have it available soon.

  • bob

    Very nice.
    Very fast and easy to integrate.
    I wrote to file for quick submit testing.

    One issue: In IE7, 'insert hyperlink' gives prompt to allow scripted windows. Once allowed the URL window appears, but clicking OK does not result in a hyperlink appearing in the textarea.

    Same thing in FF3, (without scripted windows prompt)

    Works fine in Chrome.

  • http://www.numantis.com Randy Comeau

    Are you planning any build for Joomla or Drupal? Would love to substitute the one Joomla comes pre-packaged with. Thx for all the hard work in this WYSIWYG editor.

  • Murray

    Very NICE!
    any chance of an image browser instead of the simple image link insert method?

  • http://www.leigeber.com/ Michael

    @bob – Odd, I am not seeing that, perhaps locally but are you testing from a server?

    @Randy – Not planning on it but I welcome anyone else to integrate the two.

    @Murray – Perhaps a tutorial in the future. That would be a server-side deal, preferably AJAX based, since you would be uploading files.

  • bob

    Yes, I'm testing from a server, and not a localhost.

    Insert image works fine.

    But insert link does not work in IE7 or FF3.
    I'm not using any custom security browser settings.

    Using Vista, but doubt if that's germane.

    Can provide testing url if you like.

  • http://www.leigeber.com/ Michael

    @bob – Yes, a test link would be great. You can use the contact page linked to in the footer.

  • http://www.accesinterzis.ro AccesInterzis

    Great job. I looked so much a cross-browser WYSIWYG editor. Thanks that you share it with us.

  • jdigital

    I guess no one is really using the forum yet? http://forum.leigeber.com/topic/124-tolowercase-rewrite/

  • Pingback: Editor completo en un tamaño récord: TinyEditor | Recursos para Diseñadores Gráficos y Web | Creativos Online

  • http://www.yugada.com Ryan Haugh

    I found an issue when you want to use a different rowclass. The default is "teheader". If I change it something else then it doesn't change in all locations. The fix is really simple though: change the following:
    h.className='teheader';
    to
    h.className=obj.rowclass||'teheader'
    on line 40.

  • jdigital

    Ok there's more to the problem than it just lowercasing some things it shouldn't. http://forum.leigeber.com/topic/124-tolowercase-rewrite/

  • http://www.leigeber.com/ Michael

    @jdigital – Fixing the issue now, thanks for reporting.

    @Ryan – Thanks for letting me know, also fixing to upload the fix.

  • jdigital

    Ryan i posted a new lowercase fix that seems to be working…still the other issues.

  • http://www.igiblog.cz Luke

    I like this editor a lot. But I cannot use it in my projects because of one main missing feature – maybe a bug. If you type some text without any formating it should be a paragraph by default. If I render typed text inside <div></div> there should be a paragraph inside. It is really hard to learn clients to select text everytime when they type something and assign a paragraph style to it. They do not understand this stuff. Anyway many other editors do this by default (TinyMCE, KCEditor etc.). Is it planned to add this to TinyEditor or is it possible to set this up in the settings somewhere?
    Thanks for answer.
    Luke

  • Garbor

    This works great for my easy little input form.
    So i found out to get the current content if have to call editor.post();
    The i get it like alert($("#input").val()); (with jquery)

    But how can i update the content dynamicaly?
    $("#input").val("Test"); will not change the displayed content.

  • Pingback: TinyEditor : Lightweight JavaScript WYSIWYG Editor | TechnoGadge

  • http://www.dosspirit.net bakkelun

    This script crashes TINY accordion if used on the same page, Leigeber…

  • http://umeshchand.wordpress.com umesh

    I like this editor very much can i use in asp.net
    because i tired to access the value from this editor server side but it returns nothing

  • Eman

    I tinyeditor.js, line 36 : l=obj.controls.length
    and then in line 40: for(i;i<l;i++){

    Hence the Question:
    How to use it with an array of textarea WITHOUT repeating the
    <script type="text/javascript">
    new TINY.editor.edit('editeur<?php echo $i ?>',{
    id:'editeur<?php echo $i ?>',
    width:480,
    height:160,
    cssclass:'te',
    controlclass:'tecontrol',
    rowclass:'teheader',
    dividerclass:'tedivider',
    controls:['bold','italic','underline','strikethrough','|','subscript','superscript','|',
    'orderedlist','unorderedlist','|','outdent','indent','|','leftalign',
    'centeralign','rightalign','blockjustify','|','unformat','|','undo','redo','n',
    'font','size','style','|','image','hr','link','unlink','|','cut','copy','paste','print'],
    footer:true,
    fonts:['Verdana','Arial','Georgia','Trebuchet MS'],
    xhtml:true,
    cssfile:'style.css',
    bodyid:'editeur<?php echo $i ?>',
    footerclass:'tefooter',
    toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'},
    resize:{cssclass:'resize'}
    });
    </script>
    section ?

  • Pingback: Editor WYSIWYG javascript | Kabytes

  • http://www.digilister.com Robbe C.

    Thank you very much. This is just what I needed. Lightweight, functional and fast! Excellent work!

  • http://noneyet web

    This is a great editor!!! I cannot get, nor do I understand, the instance.post(). Can someone please help me? On my form I have <input name="Update" type="submit" value="Update and Close" OnClick="instance.post();"> but I get an error saying "operation not allowed when the object is closed" but my close statement is the very last thing in my code.

    Thanks!!!

  • http://split-visionz.net Mike

    @web – the last reply

    On your form tag itself add the instance.post();

    <form onsubmit="instance.post();" action="">
    ^instance should be the actual instance of the object and not just instance… So you need to store the editor object in a variable when you create it first.

    var instance = new TINY.editor.edit()

  • Pingback: Heti események | I build websites

  • http://www.coderea.com/ Web Development

    Hi, this is Robert. I have tried this editor in Chrome and is working fine but not tried in IE or Firefox. However will check to see if it can be done in asp.net

  • http://none web

    Thanks Mike, that helps. I am obviously missing something though because the error went away but once I submit the form it is not updating my database. Here is my code:

    <!–#include virtual="/_inc/connections.asp"–>

    <html>
    <head>
    <title>Edit Page</title>
    <style type="text/css">
    .te {border:1px solid #bbb; padding:0 1px 1px; font:12px Verdana,Arial; margin:25px}
    .te iframe {border:none}
    .teheader {height:31px; border-bottom:1px solid #bbb; background:url{_media/images/header-bg.gif) repeat-x; padding-top:1px}
    .teheader select {float:left; margin-top:5px}
    .tefont {margin-left:12px}
    .tesize {margin:0 3px}
    .testyle {margin-right:12px}
    .tedivider {float:left; width:1px; height:30px; background:#ccc}
    .tecontrol {float:left; width:34px; height:30px; cursor:pointer; background-image:url(_media/images/icons.png)}
    .tecontrol:hover {background-color:#fff; background-position:30px 0}
    .tefooter {height:32px; border-top:1px solid #bbb; background:#f5f5f5}
    .toggle {float:left; background:url(_media/images/icons.png) -34px 2px no-repeat; padding:9px 13px 0 31px; height:23px; border-right:1px solid #ccc; cursor:pointer; color:#666}
    .toggle:hover {background-color:#fff}
    .resize {float:right; height:32px; width:32px; background:url(_media/images/resize.gif) 15px 15px no-repeat; cursor:s-resize}
    #editor {cursor:text; margin:10px}
    </style>
    <script type="text/javascript" src="_inc/tinyeditor.js"></script>
    </head>
    <body bgcolor="#666666" margin="0" marginheight="0" marginwidth="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
    <table width="99%" border="1" bordercolor="#000000" bgcolor="#FFFFFF" cellpadding="20" cellspacing="5" align="center">
    <tr>
    <td>
    <%
    If Request.Form <> "" Then
    SQL = "UPDATE TABLE SET FIELD = '" & Request.Form("Content") & "', Effective = '" & Now() & "' WHERE Page_ID = " & Page
    cmd.CommandText = SQL
    cmd.Execute
    Response.Write "<div style=""background:#e2f9e3; border:1px solid #6fa152; padding:10px; border-color:#7eb45c; height:40;"">  <img src=""_media/images/saved.gif"" align=""middle""> <font color=""#6fa152"" face=""Trebuchet MS"" font-size=""11px"">Your changes have been saved.</font></div>"
    End If
    SQL = "SELECT * FROM TABLE WHERE Page_ID = " & Page
    rs.Open SQL, Conn
    %>
    <form action="pages.asp?page=<%=Request.QueryString("page")%>" method="post" name="Edit" target="_self" onSubmit="instance.post();">
    <span class="effective">Last Modified: <% Response.Write rs.Fields("Effective") %></span>
    <textarea id="input" name="Content" style="width:450px; height:200px" class="content"><% Response.Write rs.Fields("Content") %></textarea>
    <script type="text/javascript">
    new TINY.editor.edit('editor',{
    id:'input',
    width:650,
    height:325,
    cssclass:'te',
    controlclass:'tecontrol',
    rowclass:'teheader',
    dividerclass:'tedivider',
    controls:['bold','italic','underline','strikethrough','|','subscript','superscript','|',
    'orderedlist','unorderedlist','|','outdent','indent','|','leftalign',
    'centeralign','rightalign','blockjustify','|','unformat','|','undo','redo','n',
    'style','|','image','hr','link','unlink','|','cut','copy','paste','print'],
    footer:true,
    fonts:['Verdana','Arial','Georgia','Trebuchet MS'],
    xhtml:true,
    cssfile:'style.css',
    css:'body{font-family:Trebuchet MS; font-size:12px; color:000000;}',
    bodyid:'editor',
    footerclass:'tefooter',
    toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'},
    resize:{cssclass:'resize'} });
    </script>
    <div align="center">
    <input name="Update" type="submit" value="Update">
    <input name="Close" type="button" value="Close" OnClick="javascript:window.close();">
    </div>
    </form>
    <%
    rs.Close
    %>
    </td>
    </tr>
    </table>
    </body>
    </html>

  • Mauro

    Hi Michael,

    I have a problem using this control in asp.net. I use it with a textarea control and everything works fine. The problem comes when I add the attribute runat="server" to the textarea because I want to take the value from that control in the code behind.

    Did you try this in the past?

    Thanks,
    Mauro

  • http://byme.se Tommie Hansen

    Always lightweight and "no fuss" however it doesn't matter if the editor can't handle hard and massive abuse from ORDINARY users. Coders and web site designers doesn't really have problem with markup but the ordinary users do.

    It's the same people that keep on insisting to copy + paste directly from Microsoft Word and they'll keep doing it no matter what so any editor that can't handle that sort of abuse a 100% is doomed to fail.

    And what's up with all the <div></div>? 100% semantic + 100% idiot-safe = 100% win. :)

    I'll keep this editor in mind though since we're looking to test some new editors anyway.

  • Paul

    Hi,

    Could you please add focus and blur events when you click on the textarea and click away from it.

    I've tried a few lightweight javascript and jquery textareas but I cant seem to find or incorporate this functionality. Would be great if you could add this for me:)

    Thanks

  • http://ytg.kr/t Yang Taegyu

    Hi,
    Thank you for a Excellent editor.
    I'm not good at English so please understand me.

    There is a bug without IEs.
    Do style Italic and then switch source view and wysiwyg view.
    Where is the Italic style…?

    And then switch source view again.
    What is "font-weight:italic;"?

    Please fix it… Thanks.

  • Justin

    ok, so, there is a bug when submitting the form and using tinyedit. if i type stuff in wysiwyg mode and just submit, it will NOT $_POST, but, if i switch it to html mode and submit, it will, or if i swith to html and back to wysiwyg, it will submit, unless i start typing more, and if i submit after typing more, it will only submit what was las typed before switching back to wysiwyg mode. i really like your editor and would love to use this, but, that is a HUGE problem. please let me know when this is fixed.

  • Liz

    @web

    as Mike pointed out, you need to name your instance of the object:

    <script type="text/javascript">
    var instance = new TINY.editor.edit('editor',{ …

    that should get it if you haven't already figured it out …

  • http://stacmv.net Stac

    While testing demo I made random keypresses and clicks on tollbar.

    The result code surprised me: "<h1><font size="3"><strong>jnkjbnkxcvbvbvcbbvvvb</span></strong>bbvcxv</font></h1>"

    Open SPAN is missed.

    Button on toolbar seems not to be indicating their state (pressed or not). Looks like usability issue.

  • Ernesto

    Amigos, he estado biendo el editor y esta genial facil de implementar, pero se me ha presentado el siguiente problema:
    Tengo un problema con este editor cuando hago un submit a un formulario y el campo textarea donde esta el editor me lo envia vacio.
    He agregado en la linea del form
    <form method="post" name="temas" onSubmit="instance.post();"> pero aun sigue sin funcionar, la unica manera es hacerle view code y asi si manda el texto.
    Me gustaria me dieran un ejemplo de como implementarlo con un formulario y un textarea

    Gracias

  • http://benjamingaw.com Ben

    I like all the scripts you have on your site, they are all very functional, cross-browser compatible and very lightweight! Thanks for sharing the code . . . we need more developers like you

  • Pingback: Editor visual para Java | CMSTECNO

  • Pingback: Editor visual para Java | Dinero 2.0

  • http://www.purencool.com/Blog Purencool

    Thanks

    I have a small project I was going to create something similar but this will work just fine.

  • http://www.tentonaxe.com Kevin

    How do i add custom buttons to this editor? i want to be able to select a block of text and click a button to wrap that block of text with a tag(such as <pre class="code-js"></pre>)

  • Pingback: Lightweight JavaScript WYSIWYG Editor | Tristan's Blog

  • Kin

    Hi nice work ! Simple, nice speed perfect BUT lol
    Would be perfect if to add upload of photos to add to in the text.
    It is possible?

    Another suggest, add entitles change ISO-8859-1, UTF-8 : )

    Ty dude !!! Congratulations

  • http://www.photogabble.co.uk Simon

    I am going to work out how to integrate this into a few projects I have been working on. I have searched for days, looking for a WYSIWYG editor this simple and easy to use!!

    Congrats!

  • dimitris

    very nice work, thanks for sharing once again

    would be helpful and much appreciated if you could share source with full variable names (at a cost?)

  • Pingback: TinyEditor, Editeur WYSIWYG javascript| Webmaster – Ressources et outils gratuits pour votre site internet – Free Tools| Free Tools, Le meilleur des outils gratuits pour webmaster

  • JoeyV

    hi guys, How can I get the content using javascript?

  • Pingback: Tiny Javascript WYSIWYG Editor | Photogabble

  • http://www.them.pro Web development Beijing

    Nice work ! Personally, I'm using FCKEditor because it's integrate with Drupal and you can plugins allow you to upload photo. But i will try TinyEditor. Good post !

  • http://none me

    A W E S O M E , easy, tiny, perfect

  • Peter

    Great work! I have tried to add a "paste from Word" function with no luck, any ideas? A button would work fine, but even better a automatic cleaning on paste. Reading keystrokes ctrl-v will not work, since right click + paste will not trigger the event. Also, there are more and more mac users out there.

    So – any ideas? Thanks

  • markiz

    Hi,
    Great app, thanks.

    Please add <p> wrapping for all browsers.
    This is needed .

  • Pingback: La méga sélection de bookmarks #33, les plus belles découvertes Web du moment ! | Jean-Marie Gall.com

  • Tahola

    Easy, tiny, thanks a lot for this great work !!!

    Is it possible to add custom button like <!– more –> ?

  • BenC

    great job. i wanna konw how to put the toolbar on the foot? thanks

  • http://geekcom.org Noah Rainey

    hey thanks so much for the source code. One quick question though, am I allowed to take this source code and add to it and use it on my site?

  • Basz

    Thanks for this script. I was looking for this for a while now.

    Anyway just something for the Noobs (like me). Not only should you not forget to use the instance.post(), but also do not forget to give your textarea a name…

    I don't know why I forgot this, but I just spend 2 hours trying to find out why the script didn't post my data… {feeling kinda stupid right now…}

  • Pingback: Free WYSIWYG gpl editors

  • Pingback: sitescode » Blog Archive » Free WYSIWYG Editors

  • http://www.comnez.com prateek

    thanks so much for the source code.

    <a href="http://www.comnez.com">Website Design & Development</a>

  • http://www.simairforce.org Hector Rojas

    Hello, this is a very useful WYSIWYG editor and it is much appreciaqted, but it does not work under Firefox 3.5+, I have tested it under IE7-IE8, Chrome and Opera and it does work, not on Firefox however, any ideas?

  • Lars

    Hi there!

    Great editor.. The size and functionality makes me very happy. 2 questions though, in the beginning people talked about the not automatic re-focus after clicking a button. How are things with that? And the second one, people also recommended earlier to enter automatic paragraphs.

    Could you give me a status?

    Greetz,
    Lars

  • Rudi

    Guys I read all of your comments. If you want a kick ass editor get the CKEditor. It has everything you need. Copy from word and easy to use.

    Micheal your Editor is nice and lightweight, but there are better things out there.

  • Lars

    @Rudi – CKEditor is too heavy. This a great editor and I prefer this above any of the others I have seen until now. Was just wondering if he was still working on it. :)

  • http://www.folienfaq.de Schutzfolie

    This is awesome. Great Job ! It is a good alternative to other solutions.

  • http://www.halalit.net Usman

    Nice. Can be a good alternative to TinyMCE, its much heavy.

  • http://www.abaxsoft.com varun jain

    Thanks For The Useful Info

    Cheers
    Abaxis Software

  • http://jf.eti.br Jonas Ferreira

    Perfect!!!

    To save enough to do so:

    1. <form onsubmit="instance.post();" action="">

    2. and the creation of the object leave as follows:

    var instance = new TINY.editor.edit('editor',{

    Tks!!!

  • http://www.decksandfencesbyryan.com ryan

    I just started using this last week and seem to have a hang of it. finally something with a easy learning curve.

  • André

    I like this tool very much.
    When can we expect the option "paste from Word"?

  • http://www.kinggoddard.com Goddard

    Thanks, I like this design.

    One thing I was curious about was how do I take out or disable the part that adds a background color?

    Also I use this editor on a black background and between the text editor and the bottom of the "source" button is a black line. How do I fix this?

  • FORUS

    Hello! Very nice work. Add please choose the text color. Thanks.

  • http://johnfraney.ca John

    Thanks for this excellent script! One thing I noticed is that if you give a TinyEditor instance a hyphenated name (like "new TINY.editor.edit('edi-tor',{"), toggling between wysiwyg and source doesn't work. Keep up the good work!

  • http://www.mimrankhan.com Imran Khan

    It's a very useful editor when compared other text editors. light weight, quick load, easy customization.

    Many thanks to Michael

  • http://sxdev.be/ Styxxy

    Hi,
    It looks great, but one minor thing. Can you make the text field being focused again after clicking one of the mark up buttons?

  • jeff

    This is a really great little script. Exactly what I have been looking for. Clean, simple, has everything you need and nothing more.

    The ONLY thing that could possible make this any better is if it had some kind of image uploader. Then ckeditor and tinymce would see some real competition.

    Thanks so much for this!

  • http://smartosc.com paolo

    it doesn't seem to work on IE6, the iframe is not shown

  • Pingback: TinyEditor: Free JavaScript WYSIWYG Editor « Rajaish | Web developer, Internet Market Research and Marketing

  • http://codemyconcept.com CodeMyConcept

    I also seemed to have an issue with Firefox.
    However this is a great tut overall. Thanks for sharing.

  • http://www.mimrankhan.com Imran Khan

    I need the font color change facility in this text editor dear admin please help me thanks anyway

  • http://99ko.org/ Jonathan

    TinyEditor a été choisi par le CMS 99KO ;)

  • http://www.edgeneering.com Arizona Web Developers

    The only problem I have with TinyMCE is that the default feature set is so broad that you spend a huge amount of time turning off most of the buttons you don't want to offer your end users.

  • http://myboodesign.com boo

    great works guy!!!
    but I have a problem with this tinyeditor, when I try to get the textarea value, the value is null, here is my code:

    <?php
    if( !isset($_POST['button']) ){
    ?>
    <form name="form" method="post" action="<?php $_SERVER['PHP_SELF']?>">
    <textarea id="input" name="textarea" style="width:400px; height:200px"></textarea>
    <input type="submit" name="button" value="Submit" />
    </form>
    <?php
    }else{
    echo $_POST['textarea'];
    }
    ?>
    <script type="text/javascript">
    new TINY.editor.edit('editor',{
    id:'input',
    width:584,
    height:175,
    cssclass:'te',
    controlclass:'tecontrol',
    rowclass:'teheader',
    dividerclass:'tedivider',
    controls:['bold','italic','underline','strikethrough','|','subscript','superscript','|',
    'orderedlist','unorderedlist','|','outdent','indent','|','leftalign',
    'centeralign','rightalign','blockjustify','|','unformat','|','undo','redo','n',
    'font','size','style','|','image','hr','link','unlink','|','cut','copy','paste','print'],
    footer:true,
    fonts:['Verdana','Arial','Georgia','Trebuchet MS'],
    xhtml:true,
    cssfile:'style.css',
    bodyid:'editor',
    footerclass:'tefooter',
    toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'},
    resize:{cssclass:'resize'}
    });
    </script>

    the value of textarea is null, but when I delete this(id="input"), the textarea has a value,
    anyone can help me please?

    thanks
    boo

  • Pingback: TinyEditor开源项目 - Ajax代码大全 - Java开源项目 - 编辑器 - Java免费软件 - TinyEditor - WYSIWYG-Editor - 开源网

  • rico

    Hello guys, how can I add font color picker/chooser into editor toolbox? Or what are the other control options? Help would be appreciated. Thank you.

  • Oleg

    Everything is great, but I have one question.
    I'm trying to control the event onChange in the textarea but it does not do anything.
    Thanks for this simple and efective tool.

  • http://www.magento-developer.net/ junemarkm

    Thanks for sharing and posting. I know this would helped to everyone.

  • http://none mike

    great little script. unfortunately is not working if you call it in a modal. cannot use it :(

  • http://www.cremecode.com website development in kildare

    This is a great post showing a lightweight js editor. I will love to use it in my new websites that i create in kildare. i have a website development in kildare. my clients sometimes ask for such editors for posting messages. i will use it for them.

  • Thomas

    i have problem using the tiny editor
    when it is in wysiwyg mode i dont get the value but as change it text mode i can get the value
    i m using mozilla 3.6
    please help

    Thanks in advance

    regards
    Thomas

  • Thomas

    i have problem using the tiny editor
    when it is in wysiwyg mode i dont get the value but as change it text mode i can get the value
    i m using mozilla 3.6

    when i toggle the source to wysiwyg then it accept the value

    please help

    Thanks in advance

    regards
    Thomas

  • http://www.technewsblog.co.uk Steve

    I also tend to use TinyMCE when integrating WYSIWYG editors; but I'll give this one a try due to the small file-size and easy integration.

    Thanks :)

  • Pingback: Kostenloser JavaScript WYSIWYG Editor- Designer-Planet

  • http://noneyet Carsten A Pedersen

    Hi

    Is there a way to have the editor look in a specific folder, looking for images to use?

    So that I could write most of the path in the form, and then simply add the name of the image file?

    Hope you know what I mean

    //Carsten – Denmark

  • http://www.simransoftwaresolutions.com Ashish

    Nice editor tool, I was really looking for an alternative lightweight WYSIWYG editor. I usualy use tinyMCE but that's quite heavy.

  • kolin

    Hi,
    what with all generated dirty_moz attributes? Is it possible to clean it?

  • http://www.addonsolutions.com anditucker

    thanks it help me so much. i really thank full to you. Do you have this kind of editor example in jquery?

  • http://www.gravityparade.com Jesse

    this is the best editor I've found for XHTML free or otherwise. So Kudos to you for making such a great wysiwyg. I'm having trouble with the <embed> tag in this editor, embed doesn't seem to want to close itself. Other than that, wonderful and kudos.

  • http://www.michaelrroberts.com/blog/photos/ Michael Roberts

    This looks interesting. Must be checked out, but thumbs up!

  • http://php-mysql-guide.blogspot.com/ Sandip Das

    Thank you very much, it will help everyone who are using and stuck in old editors.

  • http://www.soniktechnologies.com/ Software Development India

    Hi,
    Thanks for sharing this wonderful information.
    Website designing and redesigning as per the UK accessibility conformance and W3C A / AA / AAA accessibility standards. Web Design Price starts at as low as £200.

  • http://scuttlebuttantiques.zzl.org/index.php?node=home Dylan

    As always your work is incredibly coded and has a very nice look to it. This is especially incredible, i am using it on my websites i build for clients. It's just the perfect simple easy to use html text editor. Very well done. Would like to see photo uploads though rather than just links, but can live without :) Did take me a little bit to figure out the problems i was having but read this and surely enough got the quick simple solution, the onsubmit="instance.post();".

  • Fighterlegend

    I love it! Thank you for the script.
    I use it for submitting WYSIWYG announcements (easy edit) from a webpage.

  • arzu

    Hi Michael,

    I would like to ask something about your script in http://www.leigeber.com/2008/05/ajax-image-gallery-slideshow/. first af all thank you for your sharing. but i got some trouble because i am not so expert:( When i have more photos than 6 it does not work :( could you please help me about that.
    thanks.

  • http://ktek.ie KTek IT Solutions

    At KTek IT <a href="http://ktek.ie">Website Design in Kildare</a> we use FCKEditor all of the time with our Drupal sites…its very flexible

  • http://ktek.ie Website Design in Kildare

    At KTek IT Website Design in Kildare we use FCKEditor all of the time with our Drupal sites…its very flexible

  • Pingback: [Web] 連結分享 | Geek is a Lift-Style.

  • Faouzi

    Hi Michael,

    Thank you for this excellent text editor.
    I tried to integrate Tinyeditor in a form that allows me to fill a data base, but unfortunately it did not work.

    Any help would be greatly appreciated.

    Thanks

    Faouzi

  • http://www.magstudio.bg/bg/services/view/1 Web Design Mag Studio

    This is an awesome contribution.

    Hope you will continue its development!

  • jhonny

    Hola
    El usuario que tenía problemas porque el textarea le mandaba vacío es porque en su codigo pone:
    <textarea id="input" name="textarea" style="width:400px; height:200px">
    El id debe ser igual que name.
    <textarea id="input" name="input" style="width:400px; height:200px">

  • zilveer

    Hi,
    first of all thx for a such tiny wysiwyg editor:)
    only problem is that i want the textarea to be focused after clicking at for example italic, bold, change font size e.t.c…

    Another suggestion is that i want a color palette for the font color, that would be great.

    When will the new version arrive?
    B est regards

  • Caleb

    So I found a nasty regex bug that deals with multiple strong tags. i.e.:

    <strong>a</strong>
    <strong>b</strong>

    When you switch between code and wysiwyg, it ends up grabbing and replacing the very first <strong> and the very last </strong> and not handling the ones in between.

    For the sake of time, I've forked the project on github and posted a fix:
    http://github.com/c0/tinyeditor.js/

    The fix:
    http://github.com/c0/tinyeditor.js/commit/6006c45df301f1bf45c490b2cf09e983fd697c83

  • arun

    form is not working in tiny editor using php code

  • Jonathan Goodman

    Has anyone any advice, source code to how I could at in image uploading in php. I've messed around with some php & used ajax to make an uploader but I cant seem to get images into the textarea nicely. numerous problems really. Anyone had much joy?

  • http://none jv

    Just a suggestion: remove the "px" from the js file. They make it impossible to set the width to a "%". Not only would it make the js files smaller by a couple of bytes, it makes it more flexible to users.

  • http://www.onlineincomefloods.net Justin D.

    Great share. I'd like to see if you could change the font color but I think this is an excellent editor.

  • http://www.webdesigningservices.net/ website design company delhi

    Wonderful Work, Very impressive. Thanks for sharing this Editor.

  • http://webpaul.altervista.org Webpaul

    I have a form with 4 fields. The editor works great but when i submit the form, the content of the editor is always empty. I added instance.post() (tried editor.post()) and wrote in the script: var instance = new TINY.editor.edit('editor',{id:'input',…

    what's wrong?
    could it work in a form with more fields than the textarea?
    Thank You

  • Isaac

    Hola tengo un problema,
    Cuando envio el "textarea" en vista "wysiwyg" la variable llega vacia. Pero Si lo envio en vista "source" entonces si llega la variable. Que debo hacer para que llegue la variable?
    Programo en php…

    In english (I'll try)

    Hi I have a problem,
    When I send the "textarea" in sight "wysiwyg" variable (the text) comes empty. But if you send in view "source" variable (the text) goes well. What should I do to get the variable in view "wysiwyg"?
    programming in php

  • Isaac

    por cierto, el codigo lo tengo asi:
    by the way, the code is:

    <textarea id="input" name="input" style="width:500px; height:350px;">

  • Armen

    Hi Michael,
    Please help … I need to when you click on Enter in the TinyEditor insertion <br /> instead <p>

  • Rei

    Look very nice! Coming a table and icons(smilies) buttons too? :)

  • http://post.zernbox.com/ Zern

    Can you add the function of

    add color ?

    please

  • http://www.datatrust.pe/ Helthon

    Excelente herramienta, pero cuando trato de grabar en mi B.Datos no lo guarda, pero si antes de guardarlo le doy click en <source> graba perfectamente.

    Alguien le sucede lo mismo..??

  • http://www.ndic.com/ santa barbara web design

    Thanks for this very informative post! This is a very useful tool that we can be employ in web designing.

  • Bas

    Hi,

    I am using this with pleasure! Only one big keeps coming up. When I make a word bold, the output (on the landing page) makes it like: (strong)the word(/span), offcourse in regular HTML tags, not with ( )…

    Is this only with my firefox 3.6.8 or have more people this problem?

    You can mail me for more info if you need it…

    Thnx,
    Bas

  • Bas

    By the way, it only happens if I also add style (for example 'italic') to another word somewehre further along in the text.

  • Victor

    Hi. This is a grea liteweight script. I personally love it, but i have one problem. I dont want to keep adding id's to every text area. How can i set it for every textarea without using id's something like TinyMCE?

  • Nobody

    The only thing which I would remake right now, even before making any custom pasting (MS Word, etc) is image handling. There should be option to upload file which "insert image" links to automatically.

    But in general, this is GREAT editor. It's really tiny, and really works, best for small projects, and maybe even more.

    Keep up the good work.

  • Anonymous

    Vim Editor, the most mature editor!!

  • http://www.itsolusenz.com darwinjalen

    Very Thanks for sharing this script, It's very useful to me…..

  • http://mobile-web-developer.com/ Mobileweb developer

    These are very useful, thanks a lot for sharing them. I found another tool which has helped me a great deal while editing my pages. It’s a tool which helps to mark-up the page as you’re seeing it on your screen. markup dot io.

  • Dwayne Smith

    Good stuff. I learnt more about this at Futuretrend Training Academy. Website is http://www.futuretrend.co.uk You should go and see what more they offer in relation to what you have just talked about

  • http://www.facebook.com/tiagonicastro Tiago Nicastro

    I have the same problem.
    Anyone knows the answer?

  • http://twitter.com/imadork Butch Ewing

    Great work! One question though…I would like to submit onChange. I've got something like this:

    $( ".liveChangeSubmit" ).live( "change", function()
    {
    $( this ).closest( "form" ).submit();
    });

    This works perfectly on any textbox or textarea without TinyEditor on it. Any Idea how to make it work with TinyEditor?

  • http://www.facebook.com/profile.php?id=548450969 Mert Yazıcıoğlu

    Those who are experiencing empty submission problem:

    You should call the post function using your editor instance. The easiest way to do so is calling it from the onsubmit attribute of the form tag.

    So when you're initializing the editor, if you wrote this:

    new TINY.editor.edit('myEditor',{ …

    You should add the following inside your form tag:

    onsubmit="myEditor.post()"

    Hope this helps :)

  • Mo Dashti

    So thanks for this great script .

  • http://www.facebook.com/profile.php?id=1180540351 Brenden Scott Ellingboe

    I love how this was posted over a year ago, and there have been none of the promised updates :P

  • Diii

    I need your help. I need to insert a <p> instead <br /> when I press Enter in the TinyEditor. How can I do that?

  • Diii

    a <p> instead <br />…

  • Hanan Ali Shaikh

    Thanks @Jonas Ferreira

    It works for me

  • Hanan Ali Shaikh

    MUST READ THE LINE BELOW TO AVOID ISSUES WHILE POSTING DATA

    "Keep in mind that before posting you will need to call the instance.post() function to ensure that the latest changes in the WYSIWYG translate into the text area."

    You must use an instance for your editor like this:

    var my_instance = new TINY.editor.edit('editor',{

    And when you are going to submit the form use this line:

    onsubmit="my_instance.post();"

    This will surely help.

  • 21-mkchoi

    it will work well at IE but dont work at firefox just send null.
    ofc i dont know why it happen and i want solution about this.

  • http://www.just-webdesign.co.uk/ Just Web Design

    Great editor, like you say it needs a full screen mode and paste from word.

    Something else i'd also like is tables, any plans to add them?

    Any ideas when you plan to update the above?

    Thanks in advance! :)

  • ILGIT YILDIRIM

    @Mert Yazicioglu;
    Your way is shorter than Hanan Ali's way, in that matter, I like it but therefore it is not that useful.

    While trying to submit the form, if you get empty $_POST for textarea try these ways;

    1. If you have a single form page add following;

    $('form').submit(function () {
    editor.post();
    });

    2. If you have more than 2 forms in the page, give ID and try it with ID;

    $('form#your-id').submit(function () {
    editor.post();
    });

    If you want to use something else onSubmit="", I would recommend one of the ways above (such as LiveValidation), if you don't need to use anything else use Mert Yazicioglu's way.

  • http://twitter.com/webcms Klaus-M. Schremser

    Very nice, tiny editor. But when it comes to real WYSIWYG you should have a look at the HTML5-based, WYSIWYG Aloha Editor which is relatively new and wants to give editors the feeling of a realistic What You See Is You Really Get.

    http://www.aloha-editor.org

  • Pingback: 30+ jQuery Plugins and Scripts for Web Designers 2011 | Web Design Zo

  • http://twitter.com/CookieCreativ James Knight

    Hey all, this is exactly what I've been looking for so thank you!
    I've tweaked it a little and styled it to look and act how I want. I've hit a snag though…
    When testing as a html file everything runs smoothly, text within the 'textarea' styles as it should with the font/ colours I've selected. However, once I drop it into a php file on my local test server it drops all input styling and reverts back to basic styling: Black text, blue links.
    I've tried to adjust it, also within the body tag but nothing makes any change. The rest of the page styles exactly how it should be, but the text within the iframe defaults.
    Any ideas on a fix? :D

  • Anonymous

    goold

  • Rparvin

    The onkeypress event of the textarea does not fire when I use the TinyEditor. Has anyone worked on this?

  • at

    For some reason, when I copy@paste into TinyEditor from Word, I can't view the resulting HTML code. Any feedback from experienced users?
    Thanks.

  • Jjackosiris

     What browser are you using? I have the same issue when using IE9, the editor will not format any text you input for some reason…??

  • Carmen

    This would be such a great product if only the documentation supported a fully functional demo demonstrating and an actual form implementation. There are a number of previous comments relating to emty post values and how to get a form submit to work properly. Having to go work through all the comments just to try and string together an answer that will (hopefully) work is really time consuming and somewhat  detracts from the excellent efforts you made in providing an alternative to other open-source Editors.

  • http://richardwillia.ms/ Richard Williams

    Thanks for this editor, it's exactly what I've been looking for!

    Just one question, I'm struggling to set the default font. Whatever I do it's set to Georgia. Can you help?

    Thanks
    Richard

  • pankaj

    How to make this editor readonly ?

  • Voiet2009

    test

  • CrADiC3143

    Muchas gracias.

  • http://www.facebook.com/artemiypavlov Artemiy Pavlov

    Hey all, I'd like to know how to insert an existing image into the editor body with JavaScript (at the current cursor position, obviously). Tried to invoke instance.insert and instance.action but couldn't get them to paste anything into the body. In essence, I need something like this:

    address = "http://www.mysite.com/images/picture.jpg";
    instance.insertImage(address);

    Can anyone please help?

    Thanks a lot!

  • Colin McKinnon

    I'm a new scriptiny convert :)

    If you're maintaining a wish list, then it would be really cool to be able to invoke a custom dialog for inserting images. Which of course I'd use tinybox for! Of course, this implies some sort of callback for the dialog to send the URL back to the editor.

    I had a quick look at the code myself – but I'm not good enough at javascript to implement it myself :(

    (is this what Artemiy is trying to do?)

  • matik

    Hi,

    I need help, when I insert to <textarea> attribute name='text' and then I write 'text' and send to MySql all do but field where must be 'text' is empty.

    Thanks a lot.

  • matik

    OK i have it. I reed all comments :)

  • MedicX

    Hello,

    Great script and thank you for sharing it.

    I would like to report that it's broken in IE9.1. Shows scrollbars on side and bottom in ie, they don't show up in FF for example.
    2. Selecting in part or all of text and clicking any of the bar buttons (link, bold, underline etc) de-selects the text, and the button click has no effect on the text.

    Thank you

  • MedicX

    Gah, formatting lost for some reason! Hope this works and is easier to read.

    1. Shows scrollbars on side and bottom in ie, they don't show up in FF for example.

    2. Selecting in part or all of text and clicking any of the bar buttons (link, bold, underline etc) de-selects the text, and the button click has no effect on the text.

  • http://twitter.com/atroche Alistair Roche

    Clicking any of the formatting options in the toolbar takes the focus away from the area where you input text. Is there any easy way around this? It's definitely not desirable.

  • Tsivasankari

    Hi all,
      i have included the coding bt all icon control is not visible.please clarify

  • http://www.cramie.net Refly

    Great plugin. I'm looking for a nice WYSIWYG editor, and this one looks neat. I have one question though, does it have the option to allow user to upload image when they want to include image in their post? I need it. I could just create it myself, but I'm looking for a ready made solution as it will save a lot of my time.

  • 7you7you

    Pls. Show line, whe i need past it line?
    "$('form').submit(function () { editor.post();  });"

  • MedicX

    It does not.

  • Dogan_sezgin

     http://www.youtube.com/watch?v=VwMSsicKRYI&feature=topvideos_entertainment

  • Dogan_sezgin

    <iframe width="560" height="349" src="http://www.youtube.com/embed/VwMSsicKRYI&quot; frameborder="0" allowfullscreen></iframe>

  • Colin McKinnon

    Further to my comment below, I've had a go at implementing this myself. Details will follow, but in the meantime, there is a problem with implementing more than one TINY widget on the same page. To fix this, change the line at the beginning of the each script from:

        TINY = {};

    to…

        if(typeof TINY === "undefined") {
            TINY = {};
        }

     

  • Colin McKinnon

    Solved it. First, change the tinybox.js and tinyeditor.js files as described in my post below. Then add a new javascript file:

    var extendedEditor = {
       editorCW: null,
       cmd: null,
       urls: new Array(),
       bindTo: function(editor)
       {
           editor.insert=function(pro,msg,cmd) {
               extendedEditor.invoke(this.e,pro,msg,cmd);
           }
       },
       invoke: function (editorContentWindow,pro, msg, cmd)
       {
          // keep command and editor for later…
          extendedEditor.cmd=cmd;
          extendedEditor.editorCW=editorContentWindow;
          if (extendedEditor.urls[cmd] && extendedEditor.urls[cmd].length && TINY.box) {
             // open a litebox (using iframe) to get input
             // should call parent.extendedEditor.writeback(val) to complete
             TINY.box.show({iframe:extendedEditor.urls[cmd],width:500,height:350});
          } else {
             // use prompt to get a hyperlink and writeback
             extendedEditor.writeback(prompt(pro,msg));
          }
       },
       writeback: function (val)
       {
          if (val==null||val=='') {
             TINY.box.hide();
             return true;
          }
          try {
             extendedEditor.editorCW.execCommand(extendedEditor.cmd, 0, val);
          } catch (e) {
             alert("writeback failed")
          }
          TINY.box.hide();
       }
    }

    –

    Then in your code initialize the tinyEditor assigning the object to a variable, initialize the URLs and bind the tinyEditor to the singleton extendedEditor….

    var myEditor=new TINY.editor.edit(…);
    extendedEditor.urls["createlink"]="/test/linkeditor.html";
    extendedEditor.urls["insertImage"]="";
    extendedEditor.urls["insertHTML"]=""; // not yet implemented!
    extendedEditor.bindTo(myEditor);

    In the generated page, when the user selects a value, call parent.extendedEditor.writeback(value);

    This will insert the image/link and close the tinybox.
    Note that a blank value for the URL causes it to fallback to using a prompt

  • Shahbazahmedbhatti

    it great and godo and making correct html,
    can u please tell me how to add color bar like nicEditor. i was usng nicEditor, but after found this one on your webise i add it, i want add color change ot some text please can u help me

  • Ali

    how can i get this editor's value in javascript ?

  • Mr Perron

    Excellent work on this little editor. But Im unable to retreive the user data after a post when the editor is on the wysywyg pane. Is it possible to update the textarea on a submit?

    Thank you.

  • http://kott.fm/tomek Tomek

    There seems to be an error in the tinyeditor.js: edit.prototype.toggle function. The first part of the if statement has this bit for replacing "em"s with a style attribute, but it should be:

    style="font-style: italic;"

    not

    style="font-weight: italic;"

  • http://kott.fm/tomek Tomek

    Make sure you call the appropriate "post()" function. So if your editor is named "editor" as in the above example, then you need to call editor.post() before you hit the "submit" button. You can put it in the 'onclick' function there.

  • Griston

    how can I do to submit the data sent or rather how do I use editor.post ().

    Thank you for your help

  • http://www.redinquest.com Ricardo

    Thanks so much for this!!

  • Jayvzolazo

    this happens to me too..i tested the demo in IE9, the toolbars does not work.

  • JaYvZ

    the demo is not working properly in IE9..

  • JaYvZ

    1. Toolbars are not working properly. Like when you select 'B' for making the texts bolds, it just deselect the texts and nothing happen.

  • http://www.facebook.com/ThisIsRuta Michael Ruta

    What do you change the "editor" to? Is it the 'name' or the 'id' of the textarea? Or is it the 'id' or something else?

    I've tried both and they don't seem to work. I tried to call the function as an "onclick()" on the submit button.

  • http://kott.fm/tomek Tomek

    If you look at the js:

    new TINY.editor.edit('object',{
        id:'input', // (required) ID of the textarea

    the first line, where it has 'object', is the name of the js object used to reference the TinyEditor. The next line holds the ID (not the name) of the textarea to be changed into a TinyEditor. So, for the js code above, you should be able to do:onclick( object.post(); )The 'object' is then tied to the 'input' textarea. If you had two text areas, you would need different js objects for each. Hope that helps.

  • Brugneca

    se modifico con contentEditable, possono esserci problemi??

  • Brugneca

    if I change with contentEditable, there can be problems?

  • Habaaja

    is there any button for creating tables?

  • Tom

    I've added a fix for IE9 to restore the selection after an action, it's probably not perfect, but might do the trick for people…

    http://pastebin.com/WTtC7pz2

  • VANI sharma

    how to destroy editor as i have to create new editor on button click ? so how can i destroy old one
    ?

  • Michael Delaney

    Any chance of putting this up on github??? its a gr8 place for open source… you'll probably get some contributors etc…

  • Desi

    When you add color change?

  • http://www.facebook.com/people/Alex-Rosinsky/1298443842 Alex Rosinsky

    hello, i would like to know how send message use "onkeypress"

    I do this so:
    <textarea name="contenttext" id="input" onkeypress="if(event.ctrlKey&&((event.keyCode==10)||(event.keyCode==13))){document.getElementById('testform').submit()}"><?php if ($contenttext) echo $contenttext; ?></textarea>
    <script type="text/javascript">
    var my_instance = new TINY.editor.edit('editor',{
    id:'input',
    width:373,
    ….

    but it does not give me the desired effect, where is my mistake?
    Please help me

  • http://twitter.com/raybesiga Raymond Besiga

    does tinyeditor have markdown support?

  • Eric

    Hello,
    Nice job.
    How can I force the 'link' to have the target blank property ?
    Thank you
    Eric

  • polish_web

    Can I add by myself some button to editor? I neeed <quote>

  • Genru06

    can we add font colors in this editor

  • Lu66067716

    How can I limit the length of the content ?

  • http://www.webdesignerdevelopers.com/ Web Designer Developers

    Good sharing ,
     Nice one post .

  • adumpaul

    Nice information.Thank you for sharinmg.

  • Grom Srg

    doesn't work in ie 9. cannot add any formating.

  • Shafiul Alam

    Overall it looks like the editor i am looking for. But It's not working in IE 9.

  • Grom Srg

    why there is no method to update associated textarea with the editor? this is really weird that i need to use this:

    $('form .tiny_editor_update').click(function(){
    $('#Page_content').val(tinyEdit.i.contentWindow.document.body.innerHTML);
    });

  • Grom Srg

    I found the way:

    new TINY.editor.edit('tinyEdit',{…}); 

    var content = tinyEdit.i.contentWindow.document.body.innerHTML;

  • adumpaul

    Nice article.Tiny Editor looks nice.

  • Sunny

    Tiny Editor is esy to use …nice article …It is working properly but i want to insert font color button in that …how can i achieve it ….?

  • Rey

    Hi, I am unable to pass data, I am using php and I tried the content.post()

    Heres my code, please tell me what is wrong with it and how I can pass data in php:

    <form method="post" action="submit.php"> <textarea name="content" id="content"><?php if (isset($content_content)) { echo $content_content; } ?></textarea> <script type="text/javascript"> new TINY.editor.edit('content',{ id:'content', width:650, height:175, cssclass:'te', controlclass:'tecontrol', rowclass:'teheader', dividerclass:'tedivider', controls:['bold','italic','underline','strikethrough','|','subscript','superscript','|',  'orderedlist','unorderedlist','|','outdent','indent','|','leftalign',  'centeralign','rightalign','blockjustify','|','unformat','|','undo','redo','n',  'font','size','style','|','image','hr','link','unlink','|','cut','copy','paste','print'], footer:true, fonts:['Arial','Verdana','Georgia','Trebuchet MS'], xhtml:true, cssfile:'style.css', bodyid:'content', footerclass:'tefooter', toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'}, resize:{cssclass:'resize'} }); </script> <input type="hidden" name="btn_update_cms" value="submit" /> <input type="image" src="./images/btn_submit.png" onclick="content.post();" />          <a href="<?php echo $_SERVER['PHP_SELF']?>"><img src="./images/btn_cancel.png" border="0" /></a> </form>

  • Shravan1993

    hey, this doesnt work in IE9

  • Rey

    Wow this is a wonderful editor, but how do you pass data on php? If the name of the <textarea> is "content" do I use 
    content.post() and where do I place the 
    content.post() ?  Do I place it as the <input> submit button and use an onlclick?

    Hope someone can help thanks!

  • Sandeepbhardwaj01

    Thanks your solution works.

  • Andrkaa

    Sorry for my bad English.
    For posting your data you need insert data from Tiny Editor to text area.

    Initializations Editor.

    var my_inst = new TINY.editor.edit('editor',{………….

    This code insert data from your editor to textarea
    my_inst.post(); (javascript)

    in <body>

    <a href="#" onClick = "my_inst.post(); var rrr = document.getElementById('input').value; alert(rrr); ">333333</a>

  • Andrkaa

    How can I clear the form after sending the message?

  • http://twitter.com/kerrodhall Kerrod Hall

    This may have already been covered, but just in case…
    I found that there was a small problem when using the TinyEditor and TinyBox2 'packed.js' files.

    THE PROBLEM:

    When loaded in that order (TinyEditor then TinyBox2), TinyBox2 will work but TinyEditor wont. When it was the other way around (TinyBox2 then TinyEditor), TinyEditor would work but TinyBox2 wouldn't.

    THE SOLUTION:

    In tinyeditor/packed.js, the first two functions (T$(i)… and T$$$()…) are missing an ";" after their closing "}". Fix that and it will work.

    It works fine when calling from the 'tinyeditor.js' file however; just the packed.js file needs to be changed.

  • Jegs1

    TinyEditor is just what I needed for a tutorial on HTML. Works great in Chrome 16 and Firefox 9, but it is glitching in IE9. Enlarging the width of the text area solved some issues (like the cursor not showing up). But the toggle button to show the source is not working in IE9. I really need that functionality for what my lesson is trying to show. Any ideas on fixing this?

  • Madman

    Hi, nice Editor, thanks for this!
    Works in FF 9.0.1 and IE 7
    I extended the Script by one function:

        edit.prototype.getEditorContent=function(){
            return this.e.body.innerHTML;
        };

    So you can send the Editor-Content with a simple form-submit:
    <form method="post" action="…" onsubmit="transferbox();">
    <input type="text" name="xyz" [..] />
    <!– Editor –>
    </form>
    <script>
                // Editor create
                var infoeditor = new TINY.editor.edit('editor',{ [...]

                function transferbox() {
                    // Yes, its jQuery :-) But i'm sure you can use it your own way ;-)
                    $("#kursinfos").text(infoeditor.getEditorContent());
                }
    </script>

    I'm sorry for my english, but i hope its ok ;-)

    Greetings from Germany,
    Daniel M. (Softnet-Studio GbR)

  • http://www.derekmartin.ca/ Derek Martin

    I am having the same problem. I cannot see the controls. I have tried using the default controls, and a shorter custom list. When I use the defaults, all I see is font, size, & style. When I use the custom control, I don't see any at all. I don't know why.