Just like this one.

Now this text editor I am typing this in is not a textarea. I suspect it's a div with contenteditable="true" and displaymode="on".

I can make a div like this one and all, but my problem comes when I try to create buttons that do things to selected text in the box.

For example, if I select the words 'For example', and go up and click the B button, it will make the text bold. All it's doing is putting <b> tags around the selected text. Easy as that.

Or is it?

I've tried a bunch of scripts, and I've managed to get the contents of my selection, but I can't actually do anything to it, like set 'selTxt.style.font-weight='700';' or anything :\.

I'm not great at JS, and I am wondering if somebody could point me in the right direction into making something like this happen.


I've thought about this a fair bit and have tried the JS replace() method, but grabbing the selected text and replacing it with <b>selTxt</b> but for some strange reason it doesn't decide to work. Anyway here's the code:

<script language="javascript">
function getSelText()
{
    var editor = document.getElementById('editor');
    var txt = '';
     if (window.getSelection)
    {
        txt = window.getSelection();
             }
    else if (document.getSelection)
    {
        txt = document.getSelection();
            }
    else if (document.selection)
    {
        txt = document.selection.createRange().text;
            }
    else return;
    editor.innerHTML = "<b>"+txt+"</b>";
}
</script>
<input type="button" value="Make Bold" onmousedown="getSelText()"> 

<div id='editor' onclick="javascript:this.designMode='on';" designmode="on" contenteditable="true">Editor Box</div>

As you can see, I'm grabbing any text that is selected and setting the editor's innerHTML to that text that is selected, and making it bold. (All I'm focusing on is bold right now). But it deletes everthing currently in the editor, and sets it to my selection; bold.

Long story short, how do I make just the text I selected bold. Just bold, no other fancy stuff.

Thanks

-PG

I suspect it's a div with contenteditable="true" and displaymode="on".

Internet Exploder ONLY "features", so probably not.

BTW are you refering to the "Quick Reply" or the "Advanced reply" at this very forum?

Never mind, I found something out, and now it works

Here's the code:

<script language="javascript">
function format()
{
    var editor = document.getElementById('editor');
    var txt = '';
    var output = document.getElementById('tbYEAH');
     if (window.getSelection)
    {
        txt = window.getSelection();
             }
    else if (document.getSelection)
    {
        txt = document.getSelection();
            }
    else if (document.selection)
    {
        txt = document.selection.createRange().text;
            }
    else return;
    matched = editor.innerHTML.match(txt);
    editor.innerHTML = editor.innerHTML.replace(matched,"<b>"+matched+"</b>");
}
</script>
<input type="button" value="Make Bold" onmousedown="format()"> 
<div id='editor' onclick="javascript:this.designMode='on';" designmode="on" contenteditable="true">Edit Box</div>

And I was talking about the Advanced Reply.

BTW Chrishirst, contenteditable and designmode aren't strictly related to IE, they're working fine right now in Firefox.

But however, would something like this be what you are looking for?

Nah, that inserts text. I'm looking to replace it. Thanks though

Hmm... I'm having some trouble making it Not Bold. I can make it bold, but if it's already bold it can't make it bolder :P.

Is there a way to detect if there are <b></b> tags around the selected text?

Ah but what you don't see is IF there is text selected in the textarea the insert function WILL replace it with whatever you pass to it.

Ah, you're right, I didn't see that, cool!

Does anybody know a fix to my question above? So far I have nothing

...I know...