Jump to content

Smart Editor


[dx]
 Share

Recommended Posts

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

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

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.

Edited by Deirdre's Dad
Link to comment
Share on other sites

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?

Edited by Haris S
Link to comment
Share on other sites

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

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

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 :)

Edited by Haris S
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...