JavaScript WYSIWYG Editor – TinyEditor

Javascript 392 responses so far

JavaScript WYSIWYG Editor

TinyEditor is a simple JavaScript WYSIWYG editor that is both lightweight (under 9KB) 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', '|', '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.

Click here for the demo.

Click to download Downloaded 55616 Times

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.

7/16/2012 – Multiple bug fixes including compatibility with IE9.

The following two tabs change content below.
Scriptiny is a web development blog featuring fresh articles on JavaScript, AJAX, CSS, XHTML, PHP, Photoshop and more.

Latest posts by Michael (see all)

  • 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&quot;;
    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.

  • George Gurrola

    doesn't work on IE9

  • Nm Hobby

    how can i insert text in editor ?
    for example insert "this is my text" into editor textarea. thanks GUYS ! :)

  • Vimalkumar

    am using the tiny editor in a dialog box, but when i try to open the dialog box second time tiny editor creates inside the previous tiny edtor.

    How can i clear or remove or destroy the TINY editor before i create an instance.. ?

  • Singhrajveer858

    this is very good websites..i need these types of editor..thanks for this good collection of scripts…

  • Y Cetiner07

    PLEASE HELP ME =(((((
    POST its null ???
    ———————————–form——————————–
         <form method="POST" action="includes/about_me_send.php"><textarea id="tiny_input" name="icerik"><?php echo $icerik2;?></textarea>                <script type="text/javascript" src="scripts/tinyeditor/tinyeditor.js"></script><script type="text/javascript">new TINY.editor.edit('icerik',{ id:'tiny_input', height:200, 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','image','hr','link','unlink','|','cut','copy','paste','print','|','font','size','style'], footer:false, fonts:['Arial','Verdana','Georgia','Trebuchet MS'], xhtml:true, cssfile:'style.css', bodyid:'editor', footerclass:'tefooter', toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggler'}, resize:{cssclass:'resize'} }); </script>    <div class="button_bar clearfix"> <button class="green" type="submit" onclick="icerik.post();" />
    ————————————————————————-
    ———————————-form————————————
      <?php include '../connect.php'?><?php

    $icerik = $_POST["icerik"];

    $sqlsorgu = "INSERT INTO hakkimda VALUES('','$icerik')";
    mysql_query($sqlsorgu);
    echo "<table align='center' width='98%' class='haberler' bgcolor='#F1FCDC'><tr><td align='center'><h4>ISLEM BASARIYLA GERÇEKLESTIRILDI</h4></td></tr></table>";

    ?>

  • reconka

    before you post, You should put the editor body value to input field

    var m =$("iframe").contents().find("EDITOR_DIV_ID").html()
     $("THE_TEXTFIEDL_ID").attr("value",m);

  • Y Cetiner07

    I could not. do you have mail adress. if i send my codes can you write for me ?

  • Y Cetiner07

    I could not. do you have mail adress. if i send my codes can you write for me ?

  • Thuy Duong

    Good!
    Simple is great!
    Thanks!

  • Thuy Duong

    @312c651c67e4f4aeba9b0fe4e1079ae4:disqus Call {editor}.post() before submit. {editor} is parameter on init

  • Y Cetiner07

     thuy my english is bad. if i send to you my code can you edit? please give your mail adress

  • Inf0

    I found on the demo that:
    The bold and other buttons have no action.
    Headings dont change, highlighted text can be resized , but nothing else to it and it will change the current line to be the same size or font.

  • Thuy Duong

    Remove: onclick="icerik.post();"

    Change: <form action="includes/about_me_send.php" method="POST">
    To: <form action="includes/about_me_send.php" method="POST" onsubmit="icerik.post()">

  • Fadfd

    fdafdsfadf

  • Sdfdsf

    sdfafdfadfaf

  • http://profile.yahoo.com/H6NT7XT2PERBY5FHCVK4RJ6HV4 Sirsendu

    There is no option to change the font color of the text?????

  • Y Cetiner07
  • http://profile.yahoo.com/EIOEQ4RGWZZNNQ7CIGIIZFOYHE anil

    how can we add special character like tinyMCE

  • Mblack

    Get content on POST

    I've tried using the other people's solutions for posting and I can get them to work. Please help.

  • Shiva

    Its really working thanks for it

  • Thuy Duong

    Missing text color button.

  • Yvan Braga

    Hello, to get content on POST, add in <form>  onsubmit="editor.post();"   :)

  • Voidlogic

    Nice editor, a couple of issues I have noticed:

    1. URLs are made all lower case when added, breaking case sensitive URLs
    2. Sometimes formatting, such as bold and italic get all mixed up!
     

  • Sebastian

    Hey!

    How can I create links that open in a new window (target=_blank)?

    Thanks for your help!

  • laishram

    Hi,
      i love this editor very much but i don't know how to save content of editor!can anyone help me?   Thanks!

  • fernando vasquez

    Hi,

    How can I insert content into the Editor, I mean I have content saved with the same TinyEditor but I want to edit that content, how can I load it into the editor?Thanks

  • genefer s

    Thank you for the thoughtful review. The main advantage of <a href="http://html5socket.com">html5 player</a> seems to be for embedding rich media such as audio and video in modern browsers. Although, the structure elements seem to be useful. CSS3 seems to be headed in the right direction, leaving many possibilities for implementation and creativity, 

  • http://twitter.com/DennisRawet Dennis Rawet

    Please add:
    onclick="texteditor.post();"

    To your submit button

  • Adhiveni

     before submit call instance.post() function….
    refer this site
    http://www.dominoguru.com/pages/02102010075536.html#comments

  • http://profile.yahoo.com/LBOZ5H3TSLK7RS2G4ZPNGHD4VI Light Vooz

    can anyone help me!
    i need to load existing content into editor area so i can edit. how can i do that? thanks

  • Nishuihanxing

    but how can I get the value in the php file,$_POST['??'],is it?but ?? is what?can you help me

  • Onlyserv

    thanks!!
    how can i add new controll ? i need <code> controll…

  • Onlyserv

    i mean code controll code /code

  • Dimanikifar40

    Use content property

  • Jbaker

    This is exactly want I needed! Thank you so much for your help!

  • Murray

    this works for me in FF and Chrome, but not IE..  i'm currently trying to figure out why:

    <script>editor.i.contentWindow.document.body.innerHTML="<?=$hiddencontent;?>";</script>

  • Murray

    could you perhaps give us some sample code?

  • Andy

    Firstly, this is a great, lightweight script. Thanks for writing and sharing.

    Now then, the onsubmit="editor.post()" will work with one very important tag: Name. 

    This script will NOT post your tinyeditor content without a name attribute on the textarea. ID alone is not enough. 

    Your Textarea MUST have name="myeditor" AND id="myeditor". Then it works beautifully!

  • Eoin H

    You may need to use PHP or other coding to do this.

    Something like <?php echo $mycontent; ?>

    Example: 

    <textarea id="description" name="description"><?php echo $mycontent; ?></textarea>

    Hope that helps

  • TheTrigger

    Hi, how i can use php tags whitout replace?
    <?php ?>
    <!–?php ?–>

  • Jdsantiagojr

    Work's great! Thank You. 

  • Daniel

    how to get the html of the text ????

  • MilkyJoe

    Darn it. I'd "fallen in love" with this little editor, only to discover it doesn't work in IE9. Ho hum :(

  • http://www.facebook.com/wilsonilo Wilson Muñoz

    Thank you soo much, this is awesome.
    And for the people wich are using $.ajax & jquery you just do the same:
    instance.post() (before seding data)
    and then get the value with var html = $("#idofyourTEXTAREA").val(); and then pas it on: data: "service="+service+"&html="+html,
    Sorry for my bad English.

  • MilkyJoe

    Great news – I emailed the dev about the IE9 problems, and he got back to me (promptly) to say that he's going to look at updating the editor this week! :) Such a great little editor.

  • James

    I hope this helps somone:

    Setting up.

    <head>

    <link rel="stylesheet" type="text/css" href="tinyeditor/style.css"/>
    <script type="text/javascript" src="tinyeditor/tinyeditor.js"></script>

    </head>

    Inside the body tags

    <body>

    <form method="post" onsubmit="MY_EDITOR.post()" action="action.php" >
    <textarea name="content" id="content" ></textarea>

    var instance = new TINY.editor.edit('MY_EDITOR',{
    id:'content', // (required) ID of the textarea
    blah blah blah….
    </form>

    </body>

    If you are struggling, take time to look through what I have put. It works for me and sends the data fine.

    - Make sure the 'onsubmit' is within the opening FORM tag.

    - Make sure you add 'var instance =' at the beginning of the script
    *** var instance = new TINY.editor.edit('MY_EDITOR',{ ***

    -

  • James

    I hope this helps somone…

    <HEAD TAG>

    <link href="tinyeditor/style.css" rel="stylesheet" type="text/css">
    <script src="tinyeditor/tinyeditor.js" type="text/javascript"></script></HEAD TAG>

    <BODY TAG>

    <form action="action.php" method="post" onsubmit="MY_EDITOR.post()">
    <textarea id="content" name="content"></textarea>

    var instance = new TINY.editor.edit('MY_EDITOR',{
    blah blah blah….</form>
    </BODY TAG>

    If you are struggling, take time to look through what I have put. It works for me and sends the data fine.

    - Make sure the 'onsubmit' is within the opening FORM tag.

    - Make sure you add 'var instance =' at the beginning of the script
    *** var instance = new TINY.editor.edit('MY_EDITOR',{ ***

    - Make sure this script is within the FORM tags…

    Great Editor. Lovely design

  • HackDE

    thanks

  • surendra

    data submit with javascript not working

  • este

    Why it's not working when I using it with dynamic elements (textarea added by js)?

  • este

    I mean… it work but iframe is not filled by text.

  • JavaScript

    For those that have a problem in Chrome (div tags), Firefox (br instead of p tags) or any other browser except IE. Please add the following code just above the place of the editor. Just change information to the id of your editor.

    if(document.getElementById('information').innerHTML==''){document.getElementById('information').innerHTML='<p><br></p>'}

  • mach

    Hi,

    I need a quick help. This editor is working great for me, all I need is to add a vertical scroll bar, so if I go beyond the height, then I want to be able to scroll down to continue editing etc. I tried adding "overflow: scroll;" to the tinyeditor.css and also tried to put that into the text area tag but it is not working. Can someone please help me with this? Much appreciated. Thanks.

  • mach

    Found it :)

  • http://www.facebook.com/people/Christian-Quispe-Huanca/100001359782156 Christian Quispe Huanca

    tengo el mismo problema, :(

  • http://twitter.com/james_ar_howell James Howell

    This is a great little editor, but it seems not to work in Firefox 15 at the moment…. Never changes the tags in the GUI, and changes text styles as you type on its own!

  • Guest

    Could you please share how you fixed this?

  • art

    There is something wrong with the current version. There are extra spaces in tiny.editor.js that result in errors (for instance "= =" instead of "=="). And adding a hyperlink doesn't seem to work, also not in your online demo.

  • http://www.scriptiny.com/ Michael Leigeber

    Thanks for letting me know, not sure how that made it through but should be resolved now.

  • Alex

    autoresize is missing here :(

  • nraddress

    Nice editor, thx!
    But editor has strange behavior when I paste some html or table data (~100 rows) in source mode and then submitting the form.
    part of text

    <div class="divcol3">-</div>
    </div>

    result
    <div classdivcol3<="" body=""></div></div>

    what happens?

  • http://www.facebook.com/wilson.chan.16100 Wilson Chan

    Hi,
    Why I am unable to pass the text enter?

    <form action="<?php echo $PREFIX; ?>/admin_site/product_func.php" onsubmit="editor.post()" enctype="multipart/form-data" name="myForm" id="myForm" method="post">
    <textarea id="tinyeditor" name="tinyeditor" rows="15" cols="80" style="width: 80%"></textarea>
    new TINY.editor.edit('editor', { id: 'tinyeditor', width: 584, height: 175, cssclass: 'tinyeditor', controlclass: 'tinyeditor-control', rowclass: 'tinyeditor-header', dividerclass: 'tinyeditor-divider', 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', '|', 'print'], footer: true, fonts: ['Verdana','Arial','Georgia','Trebuchet MS'], xhtml: true, cssfile: 'custom.css', bodyid: 'editor', footerclass: 'tinyeditor-footer', toggle: {text: 'source', activetext: 'wysiwyg', cssclass: 'toggle'}, resize: {cssclass: 'resize'}});

    can anyone help me solve this?
    Thank you.

  • Xyanua

    what is name of editor? I want use name to $_POST[name_of_editor]

  • Iftah

    Thank you!
    This is a really nice editor! and it is one of the very few who support old ie browsers, which some of us still need to support :(

    but it is missing some basic features…

    Why don't you put the code on github (or other social repo) and allow us to fork the code and submit changes?

  • http://tech.gtaero.net/ Navarr Barnier

    I don't believe this handles maxlength at all?

  • Emil

    Hi there, very nice Editor, thanks you for this, it's just what I needed! :D

  • Emil

    Then I say thanks, I totally mean thank, like in thank you!

  • Mark J

    Just noticed you fixed some IE9 stuff awhile back. Glad to see you're still touching base on this. I think it's an awesome light-weight option where light-weight really isn't heard of. I would love to see this take over where nicEdit (http://www.nicedit.com) left off (it's been discontinued). One needed feature is nicEdit's abilty to upload images and insert them into the body (which didn't work in IE9 either).

  • John

    Has anyone tried this with IE10?

  • http://www.facebook.com/mathias.lorenzen Mathias Lykkegaard Lorenzen

    This has not been resoled (that is, the thing with the extra spaces).

  • วีระ สงวนดี

    $(document).ready(function(){ $("#button").click(function(){ editor.post(); }); });—————————————————-
    form method="post" action="result.php?action=save" >Submit

    success

  • FlyingCapeTown

    Hi, I've got a problem where I would like to apply scroll bars inside of the text area. I've achieved this by placing overflow: scroll on the iframe and on the body tag inside of the iFrame. However, the solution hasn't worked for IE8 and IE7. Is there a possible solution for added scrollbars to text area that will work in all browsers?

  • Noah

    Really love this editor for my admin system…much more than others that are oversized and cluttered.

    The one problem I'm having is when I paste content from another site, all of the styles are pasted in, as well.

    Is there any simple way to set this editor to strip html on paste?

    I only want plain text if pasting from elsewhere.

    Again, though, really think this is the best editor I've seen so far.

    Thanks!

    Noah

  • roy

    how to add multiple editors in a single page ?????

  • neerajjoshi

    how can I use 2 editors in the same page.

  • Nathan

    Does this work with i-devices? I tried another WYSIWYG plugin and the buttons didn't function and wondering if this would do the same.

  • http://twitter.com/NathanJohnson13 Nathan Johnson

    Yeah, I had to go through and edit the JS file because it wasn't working, I kept getting an "unexpected string" error. But I still get this error after I fixed all of those JS operator errors:

    TypeError: Cannot read property 'parentNode' of null

  • varun

    how to get data from tinyeditor ??

  • http://www.iwebxpert.com/ Daisy Bono

    I have been looking for this for a long time already and thanks I have found it. Thanks for sharing this knowledgeable post. Good job!

  • fab

    When is fullscreen mode planned???!!! This editor is wicked!

  • Tom Ekberg

    Great editor! I've been able to get it work on IE9, FF, Chrome, Safari and Opera.

    I'd like to be able to insert one of a small set of special characters, like ° (degree), after the insertion point. innerHTML doesn't work because it doesn't know about the insertion point. I've tried reading the code but I don't see how to do that. Most of the functions wrap a tag around selected text using what looks like a TextRange object. The only way using existing tools (on Windows) is to use the built-in Character Map feature or to cut/paste from word. The hack I ended up doing was to put each special character in a

    <input type="text" class="charent" value="$e" readonly title="$n">

    Where $e is the special character and $n is some help text. One can select them, and copy/paste them into the edit box. I'd like to change them into buttons that insert the special characters directly.

    Any idea on how to do that?

  • tekberg

    What I ended up doing was to write an HTMLParser (I use Python, but Java has a class for this too) to strip off HTML cruft. MS Word adds a lot of style junk. Basically the HTMLParser has functions for start/end tags and entities to process them specially. I can send you the python code if you like.

  • Cristian ojeda

    mi solucion
    $(function() {
    $('#formu').submit(function(){
    editor.post();
    return true;
    })

  • Cristianojeda

    My solution was well, really works

    $(function() {
    $('#formu').submit(function(){
    editor.post();
    return true;
    })
    )}

  • jsteele54

    I like editor but have a question. I'm displaying the output of the form on a preview page before it is submitted to allow users to review the input before it is sent. The output of the editor is in ascii characters which won't display in html on the preview page. Does anyone know a way around this?

  • Mayka

    How to get data to jquery ? J want to send editor by jquery but my data is empty, can anyone help ?

  • theASPCasanova

    Nathan4321 :

    A cause for this is perhaps you're not selecting the textarea correctly. For me this occurred because my textarea was within an ASP.NET UpdatePanel, therefore the ID specified wasn't returning the textarea object when utilized by the TinyEditor script's object lookup. If you utilize jQuery, try this:

    var ta = $('[id$=theIDOfYourTextArea]'); //Lookup your textarea
    var editor = new TINY.editor.edit('editor', {
    id: ta.attr('id'), //Grab the ID
    //The rest of your options here
    });

    If you're unfamiliar, this will get your ID by matching the END of your ID string as its rendered, so despite the ID being modified by ASP, an appropriate match nonetheless will be made to your
    textarea object in the DOM. A good trick for other situations where object ID matching is an issue. Hope this helps.

  • Roy Méndez

    If you still unable to pass the data just do this, already posted down.

    At the beginning of the <form> add this attribute onsubmit="editor.post()"
    -
    "editor" would be the name of the object in the <script>
    -
    Hope you get work the editor with this

  • Truth

    use tinymce

  • Nathan4321

    Great plugin, I am using it on my Q&A site (coming soon). Is there a way to get placeholder text to show up in it though?

  • Nathan4321

    Is there a way to use my own modal box for the "add link" pop up instead of a basic prompt()?

  • Nathan4321

    Never mind I edited the JavaScript "insert" function to use my own modal box instead.

  • mustafa

    thank you james

  • diemer

    make sure the editors have different names. example: new TINY.editor.edit('editor1' and new TINY.editor.edit('editor2'

  • Chenifer Lopessss

    <script type="text/javascript">
    $(function () {
    alert("hola");
    )};
    </script>

  • DANA

    Awesome toolbar!

    But I've been wondering…when you submit and insert all the formatted texts in a database, would it retain its formatting once I retrieve and display it again? Sorry if my question is a bit silly:)) I'm quite new to programming. Would appreciate any answer. Thanks in advance!

  • DANA

    *format

  • tekberg

    I've only had trouble when cut/pasting from a word document. It adds a lot of extra cruft that I have to remove. I can send you the python code I use to remove it if you like.

  • Nikko

    Awesome editor, easy to implement and understand. But I'm having trouble about the editor when i implement it in my site. When i typed in the editor then delete it then go to the source, the editor makes an <br> tag in the textarea. Is there a option in the script to remove that tag? or any other approach on how to remove the tag i can't seem to find n solution. Hope you can help me :) thanks.. . btw good work ^_^

  • Tom

    How I can split html tags whan I pasting data from clipboard?

  • tekberg

    If I understand your question, search down for my answer (search for tekberg) for a post I made 11 months ago (2012/12/04 9:14 AM) regarding handling text pasted data from word.

  • Tom

    I want to remove all html tags when I pasting information copied from other web sites, I use jquery in my web site. How I can do this?

  • tekberg

    File Edit Options Buffers Tools IM-Python Python Help
    This the Python code I use to remove the HTML tags that pasting from word adds. It contains an inner class that does most of the work. Java has a class like Python's HTMLParser that works the same way. If you only want to allow certain tags, change the handle_starttag and handle_endtag methods.

    Unfortunately Pasting into the text box removed all of the formatting :-(.
    I included a screen dump of the function so you can see the formatting.

    def remove_word_cruft(s):
    """
    If you cut/paste from a word document, it adds a lot of extra trash. This
    function removes the trash and fixes up the boldface tags that contain
    double quotes (").
    """
    # Handle <b> and <span> tags -> <strong>bold</strong
    # <b style="mso-bidi-font-weight:normal">bold</b>
    # <span style="font-weight: bold;">bold</span>
    # Change <p> tags to <div> so users can get the proper spacing.
    # <p> adds unwanted above/below whitespace.
    class OltgHTMLParser(HTMLParser):
    def __init__(self):
    HTMLParser.__init__(self)
    self.tag_translate = dict(b = 'strong', p = 'div')
    self.html = []
    self.bold_span_stack = [] # stack for span tags
    def handle_starttag(self, tag, attrs):
    if tag == 'span':
    attrs = dict(attrs)
    if 'style' in attrs and dict(attrs)['style'] == 'font-weight: bold;':
    # Change <span…bold> to <strong>.
    self.bold_span_stack.append(True)
    tag = 'strong'
    else:
    # Ordinary <span>
    self.bold_span_stack.append(False)
    if tag in self.tag_translate:
    tag = self.tag_translate[tag]
    self.html.append('<%s>' % tag)
    def handle_endtag(self, tag):
    if tag == 'span':
    if self.bold_span_stack.pop():
    # Had a <span…bold> now <strong>. Need to end it with
    # </strong>.
    tag = 'strong'
    if tag in self.tag_translate:
    tag = self.tag_translate[tag]
    self.html.append('</%s>' % tag)
    def handle_data(self, data):
    self.html.append(data)
    def handle_entityref(self, name):
    self.html.append('&%s;' % (name,))
    def get_html(self):
    # Join the lines and convert back-to-back br tags to one.
    # Newlines cause trouble for Javascript. Change them to JS blanks.
    # Handle nr for windows, and n for Mac (I think).
    return (''.join(self.html)).replace('<br></br>', '<br/>').replace('n', 'r').replace('rr', 'r')
    p = OltgHTMLParser()
    p.feed(s)
    return p.get_html()

  • Ryan Naddy

    Could you make it so you click on an area of the document, the font/style/size dropdowns change to to show what you're on? Because if you change a part of the document to say an h2, then want to change another part to an h2 as well, you can not because the dropdown says h2. The only way to change it is to change the drop down to something else then back to h2.

    Also, you should make a Github repo.

  • braunsHizzle

    I second this GitHub repo!

  • braunsHizzle
  • braunsHizzle

    Check this out if your POST data is empty.

    https://gist.github.com/Braunson/7131415

  • braunsHizzle

    Alternatively you could do this…

    https://gist.github.com/Braunson/7131415

  • James

    I think this script is wonderful, but, when I try to grab the content (to save it in a database), it doesn't get hold of the latest updates to the text unless I have clicked "source" or "wysiwyg" first? This is the same for adding words or changing formats.

    Can anyone help??

  • tekberg

    My code uses a tag language called Cheetah since I needed to define multiple editors on the same page. If you only have one editor on a page, you can statically define the code you need. Some of the below code uses Cheetah's python-like language, HTML and Javascript. You should be able to determine which fragment uses which language. I left my code comments intact and added some extra comments for you to help with the context of each fragment.

    This variable is used to collect JS code to copy the values from the editor window into a hidden input item.
    ## Use this to collect all of the code needed to put the values from
    ## the editor into their corresponding <input> element.
    #set global $data_extractors = ""

    The next two code fragments come from the Cheetah function $detail_wysiwyg_editor I use to define a tinyEditor box. This fragment is used to define a place to store the content of a tinyEditor box, which is done prior to a submit. That way the server code can retrieve the value normally. I had trouble pulling the tinyEditor values from a form so I ended up copying the values from each tinyEditor object to here. $name is passed to the function (see example below).
    <input type="hidden" name="$name" value="" ID="$name">

    This fragment is part of the $detail_wysiwyg_editor function and defines JS code to copy the value from the tinyEditor window into the hidden input element.
    ## These are JS fragments invoked by <form onsubmit> to transfer
    ## the data from the textarea to the named input element.
    #set global $data_extractors = $data_extractors + "n document.getElementById('" + $name + "').value
    = " + $name + "_editor.i.contentWindow.document.body.innerHTML;"

    This is the <form> element with the onsubmit attribute.
    <form name="main" action="$home_page/#echo 'create' if $create else 'edit'#" method="post
    " onsubmit="extract_wysiwyg_values()">

    This is an example call to the $detail_wysiwyg_editor function.
    $detail_wysiwyg_editor("Collection", "collection", $collection)

    This is the JS function called by form.onsubmit to copy the values from all tinyEditor windows into their corresponding hidden input elements. I placed it after the </form> tag so that the Cheetah $data_extractors global variable would have all of the JS code to copy the values from the tinyEditor window into the corresponding hidden input element.
    function extract_wysiwyg_values() {
    $data_extractors
    }

  • Ucha

    Hi, I'm trying to use a specific dialog to select image. Take a look in the code:

    var editorHTML = null;

    on the insert prototype, i made this change:
    edit.prototype.insert = function (pro, msg, cmd) { editorHTML = this.e; DoSelectImage(); return; };

    and on the selectimage windows i call: editorHTML.execCommand('insertimage', 0, encodeURIComponent($('#hidImgFileName').val()));

    But nothing happens. No error, no image loaded into the content. Any idea on how to solve it?

    Thanks

  • Ucha

    just adding, it works fine with chrome…
    ps: i removed encodeURIComponent() but still doesn't work with IE

  • dhgosjdhg

    wtf?

  • John

    Excellent script by I am having the same problem as James posted below. I can't get anything to post to my sql database unless I use the source button. Is there an easy fix?

  • Saiprasad Narlawar

    Hello there,
    When I am copying & pesting the text data from MS word file & upload it,
    I am getting "nn" on each alternate line. Is there any thing i missed out? Please help me out ASAP.

  • Oliver Schwarz

    Hello,
    thank you very much for developing this tiny wonderful editor.
    I added a new selection for changing text colors, and it is working fine.
    If somebody needs the color-feature, I will send it, if I am allowed to.
    The names of the colors are in german, but easy to edit.

  • Oliver Schwarz

    Text out of MS Word is probably being formatted a lot. I guess even the linebreaks or soft-returns are characters like the "nn" you described. You can let these characters being shown in word.

    You could either generate a button which opens a textarea in a popup window and then pasting the content into the selected/ cursor position, or just paste and copy your text in the notepad/editor and afterwards into the tinyeditor.

    I did not test this, but I hope this will help you.

  • Soumya

    Hi, This is really a good api, however I would like to make a note.
    When Multiple instances are implemented on the same page, not all instances work correctly.

  • Lekan Olafaju

    nice Editor but i use editor.i.contentWindow.document.body.innerHTML="" to get content into the editor but i when i submit into database it will submit the default content not the one i get using the javascript please i need help asap

  • Aemilian

    Hello Oliver. Would you be so kind to upload color selection feature somewhere so i can download it?

  • mdlane

    As the docs said, you have to call the .post() function before you submit the form.

  • Khurram Sheikh

    HI
    i am having problem with responsive design can you help. How can i set width and height to 100% of container div and how to make toolbar and other buttons in editor responsive. and how can i make my own source button that can show the source

  • Peter Horvat

    This is so lightweight and super. Thank you for the efford. One feature that would make it perfect would be local image insertion. It would be limited to HTML5 supported browsers only, although, it would alow to read image file as data uri. This would embed image… no external links.

  • Don

    Can you plz tell me how you managed to have colors?
    Kannst Du mir bitte dazu mehr Infos zukommen lassen wie Du das gelöst hast?
    Danke Don

  • Don

    Hi Michael – Great Editor , thanks for sharing this
    Is there any progress on tj´his project?

    Especially i would love to have table-editing options and colors
    Thanks a lot
    Don

  • darryljackman

    No real picture insert? i have to copy and paste a stupid URL?? Wtf! What about an image i just worked on in Photoshop?? I have to go ftp it somewhere, then get the URL and paste it? I don't want users that are editing content to have FTP access, so this editor is automatically useless!

    Don't feel too bad, I've been going down a list of editors trying to find one, and even one that cost $300 had a major defect in the demo on the very first thing i tried, and others have other issues, so this at least wasn't "broken", but unfortunately still useless.

  • Justin Conway

    Hi Oliver, this what I am trying to accomplish. Do you have a jsfiddle for this? Thanks.

  • http://e-piwi.fr/ Piero Wbmstr

    Hi, and thank you for this work!
    You should really make a GitHub repo …

  • http://brad.raiche.com/ Brad Raiche

    Oliver, your enhancement is exactly what I have been working on. Would you be so kind as to share what you have done?

  • Oliver Schwarz

    Hello Brad,
    now I am at work and cannot look for this code. It is on my computer at home. This evening I will have a look and will post it, when I found it (it is a litle bit old, but I think I will find it).

  • Oliver Schwarz

    Hello Justin,
    now I am at work and cannot look for this code. It is on
    my computer at home. This evening I will have a look and will post it,
    when I found it (it is a litle bit old, but I think I will find it).

  • Oliver Schwarz

    Hallo Don,
    sorry, dass ich erst jetzt lese, dass jemand Interesse an meiner Lösung hat.
    Ich werde heute abend zuhause danach sehen und den Code posten, wenn ich ihn gefunden habe.

  • http://brad.raiche.com/ Brad Raiche

    That would truly be appreciated, Oliver. That will be very useful, and I am grateful for your efforts.

    Just an idea, but perhaps you have a URL to a page somewhere that uses it, and I could simply grab the js file there. (Just an idea).

    In any event, Thank You! :-)

  • Oliver Schwarz

    Hello Brad, I am very sorry,

    I tried it many many times to post you an answer with a link to a live-view and a link to download a zip-archive with the code. I have no chance, this replys are not shown here. Do you know if there is a possibility of a "private message" to send you my solution?
    I am very upset because of these moderators, blocking constructive discussions. :-(

    Kind regards from Stuttgart
    Oliver

  • Oliver Schwarz

    Hello Justin, I am very sorry,

    I tried it many many times to post
    you an answer with a link to a live-view and a link to download a
    zip-archive with the code. I have no chance, this replys are not shown
    here. Do you know if there is a possibility of a "private message" to
    send you my solution?
    I am very upset because of these moderators, blocking constructive discussions. :-(

    Kind regards from Stuttgart
    Oliver

  • Oliver Schwarz

    Hallo Don,

    ich habe es nun viele viele Male probiert, dir eine Antwort mit einem Link zu einem live-view und einem Download-Link mit der *.zip Datei mit dem von mir veränderten COde zu senden, aber jeder Versuch wurde vom Moderator geblockt. Weisst du, ob es eine Möglichkeit einer "Private message" hier gibt?

    Viele Grüße aus Stuttgart
    Oliver

  • Oliver Schwarz

    Hello,

    I tried to help people and send a link where they could download a modified *.js code with the possibility of changing text colours. Unfortunately I was not able to publish a reply containing a link. Could anybody please tell me how I can post links? Otherwise this is a bit useless, I certainly do not want to post complete javascript-codes into the forum.

    Thank you for any advice
    Oliver

  • Oliver Schwarz

    This is my last try in this forum. I modified the links. Please jsut replace the "[dot]" and "[slash]" :-)

    I luckily found an old link where I tested this online. This is on a contact form of a test-website, and you can see it live when you click on the icon for the message on the bottom left side. This site was only a test, but you can see how it works, I did not build in a "close"-Button to close the editor popup, yet:

    webschmiede-stuttgart[dot]de[slash]
    laboratory[slash]circular_menu[slash]
    kontakt[dot]php

    All in one line as a link. Go to "kontakt" and click on the icon.

    You can download the edited code "tiny.editor.js"
    and "tinyeditor.css" where I made the changes:

    webschmiede-stuttgart[dot]de[slash]
    laboratory[slash]
    editor_with_color_selection[dot]zip

    All in one line as a link.

    To change the language, I recommend just to "search and replace" the words ("Farbe", "schwarz", "blau", "rot", "grün", "violett")

    I hope I could help you. Just let me know if you need more information.

    Greetings from Stuttgart
    Oliver

  • http://brad.raiche.com/ Brad Raiche

    Oliver, I got it! Thank You!

    Excellent innovative use of the Disqus engine.

    Love the interface for your website too. The circular menu is creative and functional.

    Good Luck with your business!

    Thank You again for the useful code. It will go to good use on http[colon][slash][slash]dev[dot]expatinformationguide[dot]com[slash]en-us[slash]affordable-effective-on-line-advertising[slash]

    Cheers from West Palm Beach, Florida, USA

  • Kuldip

    hi
    The script tiny editor is gr8 .One of the problem I am facing is of HTML escape characters.When I edit the source and insert special chars like & copy ; (for ©) and view it it immidiately changes the escape to original. These special chars dont get stored properly in MYsql and appear wierd when retrieved

  • manoj

    is there have anyway to remove all html tags when we paste something into editor.

  • tekberg

    There are many ways to do this. Googling 'remove html tags' will find some of them. I have a Python script we use to remove the cruft that word adds, but keep things like boldfacing that we use a lot. I can send it to you if you like.

x
Loading...