[dx] Posted February 11, 2010 Share Posted February 11, 2010 Hi,I'm trying make some smart editor, something like tinyMCE editor which works as microsoft office word. There's no [ b ] tags, etc.It converts text in bold when you click on buttonSo i hope you know about which editor I'm talking.Here is Demo: http://tinymce.moxiecode.com/examples/full.phpThanks Link to comment Share on other sites More sharing options...
jeffman Posted February 11, 2010 Share Posted February 11, 2010 Do you have a question? Link to comment Share on other sites More sharing options...
[dx] Posted February 11, 2010 Author Share Posted February 11, 2010 Heh, sorry.Which is easiest way to do this?Well, I've made textarea and onkeyup with it.Now, problem is how to make it works.I know get data from textarea via id and then what?Which function to use to change valuesWhen using document.getElementById("someid").value it just outputs tags, not bolded, italic etc. text Link to comment Share on other sites More sharing options...
jeffman Posted February 11, 2010 Share Posted February 11, 2010 This is actually a pretty difficult thing to do. A textarea is not the solution.In modern browsers, you can enter text in other elements if you set the contentEditable property. Google that. You will also want to investigate the execCommand() method. This is NON-STANDARD, invented by microsoft, but all the big browsers support it. The following, for example, will bold any text that is selected.document.execCommand("Bold", false, 1);The result is usually the addition of a span element with some sort of style attribute. Link to comment Share on other sites More sharing options...
[dx] Posted February 11, 2010 Author Share Posted February 11, 2010 Err, I'm afraid that I really don't understand.Do you have some example? :)Thanks in advance Link to comment Share on other sites More sharing options...
jeffman Posted February 11, 2010 Share Posted February 11, 2010 Link to comment Share on other sites More sharing options...
[dx] Posted February 11, 2010 Author Share Posted February 11, 2010 Ok, thanks Link to comment Share on other sites More sharing options...
[dx] Posted February 12, 2010 Author Share Posted February 12, 2010 Hi, me again :)I've made some thing with this and works fine. Now what I need is how to get value from div.I'm using div instead of textarea, and works fine. I know that I must use getContent() function, but I didn't found explanation of usage.I found on tinyMCE's wiki page that for this editor you must use:tinyMCE.get('elm1').getContent(); and that's OK. But what tinyMCE represents in this function? Link to comment Share on other sites More sharing options...
jeffman Posted February 12, 2010 Share Posted February 12, 2010 If your div only contains the text your users have been editing, then use .innerHTML Link to comment Share on other sites More sharing options...
[dx] Posted February 12, 2010 Author Share Posted February 12, 2010 Just one thing more:In this editor, I've used this function: function biusa(sta) { document.execCommand(sta, false, 1); document.getElementById("textbody").focus();} Then, theres a link called bold with onclick="biusa('bold');" property.And so on for italic, underline, etc.That all works great, but there's mismatch with other browsers.When using:Firefox: Works fine, when type text, then click on bold, and type again, new text is bolded (works), focus is after text, and I can continue, no matter how many time click on some button. When select text and press bold button it get bolded (works) -> (Firefox solved).Opera: When click on some button it makes focuses to front of text. When select text, it changes text and focuses indicator after text.Safari: When click on button it select text by itself, and when type something again it overwrites it. When select text, it change style but not focus.IE 6: (I guess) contenteditable="true" doesn't works and can't even type in div area.Google Chrome: works same as Safari----------I guess it's problem with focus function with different browsers, but I didn't found anything. So it's a solution to solve this?Thanks Link to comment Share on other sites More sharing options...
jeffman Posted February 12, 2010 Share Posted February 12, 2010 You are correct that contentEditable cannot be used in IE6. This is an HTML5 property that has been added to newer browsers. But all the new ones do support it, in some cases going back several versions. .execCommand has also been widely supported for much longer than most people realize..focus() is implemented differently by browsers. That's just the way it is. For consistent results, you might not want to use it at all.I may remember incorrectly, but I believe that all/most browsers will leave the highlighted text highlighted after using .execCommand. I think users like it that way, so they can perform multiple transformations without highlighting the same text multiple times.To position a cursor programmatically actually takes a lot of code, and you need a different solution for IE. If you can avoid it, I would. Maybe there is a library for that. Last time I looked (6 months ago) I could not find one. Link to comment Share on other sites More sharing options...
[dx] Posted February 12, 2010 Author Share Posted February 12, 2010 So you suggest me to not use this type of editor? And use it in normal way as other?Well, if so, thanks in advance. :)Maybe this is nice solution but can't be used yet :-)I've tried tinyMCE on all browsers, and seems to works fine, so I'll use it Link to comment Share on other sites More sharing options...
jeffman Posted February 12, 2010 Share Posted February 12, 2010 I've had a lot of success with this type of editor, and the code can be very small, so it loads quickly and responds quickly.You get a lot more features with tinyMCE.You choose. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.