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 to download Downloaded 39547 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.
February 24, 2013
February 3, 2013
In the chrome has bug when click on the source.
Nice work, thanks for the effort! Any chance of generating P tags when user hits enter?
Nice Work! I'm looking forward to use it somewhre
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.
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.
I have heard such great things about this library, I am sure it will get more attention.
@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.
Great job! I'll definitely be keeping an eye on this as an alternative for TinyMCE and CKEditor. Bookmarked.
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.
@Ryan – Great suggestion, will add it to my short list. Thanks.
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.
Oh, sorry, now i see that @Ryan have already written that.
Wow, i really like the look of this editor…. you rock man !
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.
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?
@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.
lol, I got excited by how clean it all looks, I didn't bother to read the rest of your post… my bad!
looks nice, I specially like the design – will be trying it out soon.
@Waqas – You would need to set it on the css property (i.e. css:'body{font-face:Georgia;Verdana} or user the cssfile property.
Nice one, i will follow the evolution of your wysiwyg. If you need help for french traduction of your editor, i can do that.
Nice,
But can you add Direction button that add style="direction:rtl" or style="direction:ltr" for right-to-left languages?
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 ? !
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
@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.
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.
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.
Very NICE!
any chance of an image browser instead of the simple image link insert method?
@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.
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.
@bob – Yes, a test link would be great. You can use the contact page linked to in the footer.
Great job. I looked so much a cross-browser WYSIWYG editor. Thanks that you share it with us.
I guess no one is really using the forum yet? http://forum.leigeber.com/topic/124-tolowercase-rewrite/
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.
Ok there's more to the problem than it just lowercasing some things it shouldn't. http://forum.leigeber.com/topic/124-tolowercase-rewrite/
@jdigital – Fixing the issue now, thanks for reporting.
@Ryan – Thanks for letting me know, also fixing to upload the fix.
Ryan i posted a new lowercase fix that seems to be working…still the other issues.
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
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.
This script crashes TINY accordion if used on the same page, Leigeber…
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
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 ?
Thank you very much. This is just what I needed. Lightweight, functional and fast! Excellent work!
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!!!
@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()
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
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>
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
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.
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
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.
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.
@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 …
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.
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
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
Thanks
I have a small project I was going to create something similar but this will work just fine.
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>)
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
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!
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?)
hi guys, How can I get the content using javascript?
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 !
A W E S O M E , easy, tiny, perfect
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
Hi,
Great app, thanks.
Please add <p> wrapping for all browsers.
This is needed .
Easy, tiny, thanks a lot for this great work !!!
Is it possible to add custom button like <!– more –> ?
great job. i wanna konw how to put the toolbar on the foot? thanks
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?
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…}
thanks so much for the source code.
<a href="http://www.comnez.com">Website Design & Development</a>
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?
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
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.
@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.
This is awesome. Great Job ! It is a good alternative to other solutions.
Nice. Can be a good alternative to TinyMCE, its much heavy.
Thanks For The Useful Info
Cheers
Abaxis Software
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!!!
I just started using this last week and seem to have a hang of it. finally something with a easy learning curve.
I like this tool very much.
When can we expect the option "paste from Word"?
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?
Hello! Very nice work. Add please choose the text color. Thanks.
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!
It's a very useful editor when compared other text editors. light weight, quick load, easy customization.
Many thanks to Michael
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?
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!
it doesn't seem to work on IE6, the iframe is not shown
I also seemed to have an issue with Firefox.
However this is a great tut overall. Thanks for sharing.
I need the font color change facility in this text editor dear admin please help me thanks anyway
TinyEditor a été choisi par le CMS 99KO
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.
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
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.
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.
Thanks for sharing and posting. I know this would helped to everyone.
great little script. unfortunately is not working if you call it in a modal. cannot use it
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.
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
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
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
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
Nice editor tool, I was really looking for an alternative lightweight WYSIWYG editor. I usualy use tinyMCE but that's quite heavy.
Hi,
what with all generated dirty_moz attributes? Is it possible to clean it?
thanks it help me so much. i really thank full to you. Do you have this kind of editor example in jquery?
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.
This looks interesting. Must be checked out, but thumbs up!
Thank you very much, it will help everyone who are using and stuck in old editors.
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.
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();".
I love it! Thank you for the script.
I use it for submitting WYSIWYG announcements (easy edit) from a webpage.
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.
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
At KTek IT Website Design in Kildare we use FCKEditor all of the time with our Drupal sites…its very flexible
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
This is an awesome contribution.
Hope you will continue its development!
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">
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
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
form is not working in tiny editor using php code
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?
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.
Great share. I'd like to see if you could change the font color but I think this is an excellent editor.
Wonderful Work, Very impressive. Thanks for sharing this Editor.
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
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
por cierto, el codigo lo tengo asi:
by the way, the code is:
<textarea id="input" name="input" style="width:500px; height:350px;">
Hi Michael,
Please help … I need to when you click on Enter in the TinyEditor insertion <br /> instead <p>
Look very nice! Coming a table and icons(smilies) buttons too?
Can you add the function of
add color ?
please
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..??
Thanks for this very informative post! This is a very useful tool that we can be employ in web designing.
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
By the way, it only happens if I also add style (for example 'italic') to another word somewehre further along in the text.
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?
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.
Vim Editor, the most mature editor!!
Very Thanks for sharing this script, It's very useful to me…..
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.
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
I have the same problem.
Anyone knows the answer?
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?
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
So thanks for this great script .
I love how this was posted over a year ago, and there have been none of the promised updates
I need your help. I need to insert a <p> instead <br /> when I press Enter in the TinyEditor. How can I do that?
a <p> instead <br />…
Thanks @Jonas Ferreira
It works for me
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.
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.
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!
@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.
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
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?
goold
The onkeypress event of the textarea does not fire when I use the TinyEditor. Has anyone worked on this?
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.
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…??
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.
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
How to make this editor readonly ?
test
Muchas gracias.
Hey all, I'd like to know how to insert an existing image into the editor body with JavaScript (at the current cursor position, obviously). Tried to invoke instance.insert and instance.action but couldn't get them to paste anything into the body. In essence, I need something like this:
address = "http://www.mysite.com/images/picture.jpg";
instance.insertImage(address);
Can anyone please help?
Thanks a lot!
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?)
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.
OK i have it. I reed all comments
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
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.
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.
Hi all,
i have included the coding bt all icon control is not visible.please clarify
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.
Pls. Show line, whe i need past it line?
"$('form').submit(function () { editor.post(); });"
It does not.
http://www.youtube.com/watch?v=VwMSsicKRYI&feature=topvideos_entertainment
<iframe width="560" height="349" src="http://www.youtube.com/embed/VwMSsicKRYI" frameborder="0" allowfullscreen></iframe>
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 = {};
}
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
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
how can i get this editor's value in javascript ?
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.
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;"
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.
how can I do to submit the data sent or rather how do I use editor.post ().
Thank you for your help
Thanks so much for this!!
this happens to me too..i tested the demo in IE9, the toolbars does not work.
the demo is not working properly in IE9..
1. Toolbars are not working properly. Like when you select 'B' for making the texts bolds, it just deselect the texts and nothing happen.
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.
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.
se modifico con contentEditable, possono esserci problemi??
if I change with contentEditable, there can be problems?
is there any button for creating tables?
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
how to destroy editor as i have to create new editor on button click ? so how can i destroy old one
?
Any chance of putting this up on github??? its a gr8 place for open source… you'll probably get some contributors etc…
When you add color change?
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
does tinyeditor have markdown support?
Hello,
Nice job.
How can I force the 'link' to have the target blank property ?
Thank you
Eric
Can I add by myself some button to editor? I neeed <quote>
can we add font colors in this editor
How can I limit the length of the content ?
Good sharing ,
Nice one post .
Nice information.Thank you for sharinmg.
doesn't work in ie 9. cannot add any formating.
Overall it looks like the editor i am looking for. But It's not working in IE 9.
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);
});
I found the way:
new TINY.editor.edit('tinyEdit',{…});
var content = tinyEdit.i.contentWindow.document.body.innerHTML;
Nice article.Tiny Editor looks nice.
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 ….?
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>
hey, this doesnt work in IE9
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!
Thanks your solution works.
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>
How can I clear the form after sending the message?
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.
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?
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() {
But i'm sure you can use it your own way 
// Yes, its jQuery
$("#kursinfos").text(infoeditor.getEditorContent());
}
</script>
I'm sorry for my english, but i hope its ok
Greetings from Germany,
Daniel M. (Softnet-Studio GbR)
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.
doesn't work on IE9
how can i insert text in editor ?
for example insert "this is my text" into editor textarea. thanks GUYS !
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.. ?
this is very good websites..i need these types of editor..thanks for this good collection of scripts…
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>";
?>
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);
I could not. do you have mail adress. if i send my codes can you write for me ?
I could not. do you have mail adress. if i send my codes can you write for me ?
Good!
Simple is great!
Thanks!
@312c651c67e4f4aeba9b0fe4e1079ae4:disqus Call {editor}.post() before submit. {editor} is parameter on init
thuy my english is bad. if i send to you my code can you edit? please give your mail adress
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.
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()">
fdafdsfadf
sdfafdfadfaf
There is no option to change the font color of the text?????
can you help me
http://www.scriptiny.com/qa/2489/null-post-please-help
how can we add special character like tinyMCE
Get content on POST
I've tried using the other people's solutions for posting and I can get them to work. Please help.
Its really working thanks for it
Missing text color button.
Hello, to get content on POST, add in <form> onsubmit="editor.post();"
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!
Hey!
How can I create links that open in a new window (target=_blank)?
Thanks for your help!
Hi,
i love this editor very much but i don't know how to save content of editor!can anyone help me? Thanks!
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
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,
Please add:
onclick="texteditor.post();"
To your submit button
before submit call instance.post() function….
refer this site
http://www.dominoguru.com/pages/02102010075536.html#comments
can anyone help me!
i need to load existing content into editor area so i can edit. how can i do that? thanks
but how can I get the value in the php file,$_POST['??'],is it?but ?? is what?can you help me
thanks!!
how can i add new controll ? i need <code> controll…
i mean code controll code /code
Use content property
This is exactly want I needed! Thank you so much for your help!
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>
could you perhaps give us some sample code?
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!
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
Hi, how i can use php tags whitout replace?
<?php ?>
<!–?php ?–>
Work's great! Thank You.
how to get the html of the text ????
Darn it. I'd "fallen in love" with this little editor, only to discover it doesn't work in IE9. Ho hum
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.
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.
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',{ ***
-
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
thanks
data submit with javascript not working
Why it's not working when I using it with dynamic elements (textarea added by js)?
I mean… it work but iframe is not filled by text.
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>'}
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.
Found it
tengo el mismo problema,
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!
Could you please share how you fixed this?
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.
Thanks for letting me know, not sure how that made it through but should be resolved now.
autoresize is missing here
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?
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.
what is name of editor? I want use name to $_POST[name_of_editor]
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?
I don't believe this handles maxlength at all?
Hi there, very nice Editor, thanks you for this, it's just what I needed!
Then I say thanks, I totally mean thank, like in thank you!
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).
Has anyone tried this with IE10?
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
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?
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
how to add multiple editors in a single page ?????
how can I use 2 editors in the same page.
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.
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
how to get data from tinyeditor ??
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!
When is fullscreen mode planned???!!! This editor is wicked!
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?
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.
mi solucion
$(function() {
$('#formu').submit(function(){
editor.post();
return true;
})
My solution was well, really works
$(function() {
$('#formu').submit(function(){
editor.post();
return true;
})
)}
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?
How to get data to jquery ? J want to send editor by jquery but my data is empty, can anyone help ?
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.
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
use tinymce
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?
Is there a way to use my own modal box for the "add link" pop up instead of a basic prompt()?
Never mind I edited the JavaScript "insert" function to use my own modal box instead.