Creating a text Editor using Javascript, HTML

Question

1.44/5 (2 votes)

See more:

AoA,
I have made a simple text editor using javascript and html, it is same as the text editor of codeproject, which shows preview and a textarea,
Is it possible to make a text editor which changes the text in the textarea i.e if I write 'something' it bold the text automatically within the texteditor or is there any other thing I can do?

In short, i want to make something like a document or word processor!

Is it possible or not?

Any help?

Posted 21-Sep-13 6:27am

saad_lah

Add a Solution

Comments

[no name] 21-Sep-13 13:12pm

Yes it is possible thanks for asking though.

saad_lah 21-Sep-13 13:25pm

hehehe....
tell me should I update the question with "how can I do this" or you are telling me?

ZurdoDev 21-Sep-13 13:23pm

There is lots of help here but for specific questions. I would recommend getting a control that already does this. You'll find this is a big project.

saad_lah 21-Sep-13 13:26pm

how? Any help?

ZurdoDev 21-Sep-13 13:27pm

Search google for 3rd party controls that already do this.

saad_lah 21-Sep-13 13:47pm

http://www.webresourcesdepot.com/category/goodies/wysiwyg-html-edit/

I have found this, but I have to buy them to check the code....isn't there any starter advice you can give me...any idea or concept how can I start?

ZurdoDev 21-Sep-13 13:50pm

Just search for free ones.

saad_lah 21-Sep-13 14:03pm

ok thanx :)
got some idea

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

saad_lah · Accepted Answer · 2013-09-23T04:16:00

For others, who want the solution to this problem

Quote:

<html>
<head>
<script type="text/javascript">
function design(){
document.designMode = arguments[0];
}
</script>
</head>
<body>
<button onclick="design('on');">Enable Design Mode</button>
<button onclick="design('off');">Disable Design Mode</button>

I am a heading... edit me

I am a paragraph... edit me

List item

List item

List item

</body>
</html>

P.S: Copied & Paste

use the document.designMode or element.designMode to change the text of paragraph or body.
If you want user to change the text inside the textarea, alternatively you can use iframe tag with designMode Enabled

Sergey Alexandrovich Kryukov · Accepted Answer · 2013-09-21T15:41:00

Solution 1

You can get a good idea on how to do it if you learn how one of existing editors work. Try to look at such a good one as TinyMCE, for example:
http://en.wikipedia.org/wiki/TinyMCE[^],
http://www.tinymce.com/[^].

On the title page of the product you can try it out immediately.

—SA

Posted 21-Sep-13 15:41pm

Sergey Alexandrovich Kryukov

Comments

saad_lah 23-Sep-13 10:12am

thanks for the reply, but I have found another way(I just wanted the starter idea) :)

Sergey Alexandrovich Kryukov 23-Sep-13 10:18am

You are welcome. Found or not, will you accept this answer formally? I think it was a good idea.
—SA

saad_lah 23-Sep-13 10:41am

done :)

Sergey Alexandrovich Kryukov 23-Sep-13 11:07am

Great, thank you.
Good luck, call again.
—SA