1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Simple WYSIWYG editor

Discussion in 'JavaScript' started by Masetek, Jan 6, 2006.

0
  1. #1
    I am slowly building my own cms for my site(s). As part of it I am creating a WYSIWYG which basically is a form that I use to write artilces in and then add them to the db. I use common tags HR, H1, BR etc so I have buttons that i click of ass that code into the form. Here is the very simple function for example:

    function addtext($value) {
    document.write_articles.article_body.value += $value;
    }

    <input onClick="addtext('<h1></h1>');" type="button" name="insert" value="H1">

    As you can see this just adds the text in. BUT, I want it to add the text where my curser is (when Im editing articles). How do you do that in JS? or can you do it?
     
    Masetek, Jan 6, 2006 IP
  2. cytech

    cytech Guest

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Heres what I use for my forum system:

    
function s_c(textEl) {
	if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
}

function addText(text){
var message=document.post.message;

if(message.caretPos && message.createTextRange){
var cp=message.caretPos;
cp.text=text;
message.focus();
}else{
message.value+=text;
message.focus();
}
}
    Code (markup):
    Then on your editor form (textarea) copy the onclick and onkeyup commands:

    
<textarea name="message"  onclick="s_c(this);" onkeyup="s_c(this);"></textarea>
    Code (markup):
    That should do the trick :)
     
    cytech, Jan 7, 2006 IP
  3. Masetek

    Masetek Peon

    Messages:
    820
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Cheers cytech, worked a charm!
     
    Masetek, Jan 9, 2006 IP
  4. chadsmith76

    chadsmith76 Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    i am trying to do the same thing but cant get the above code to work. Would you mind posting the form as well so I can see the whole thing.

    Im sure i am just missing something small or huge, who knows. I tired with the script in the head as well but the below has it in the body tag.

    Thanks for any help!!!

    here is what i tried...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>
<script>function s_c(textEl) {
	if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
}

function addText(text){
var message=document.post.message;

if(message.caretPos && message.createTextRange){
var cp=message.caretPos;
cp.text=text;
message.focus();
}else{
message.value+=text;
message.focus();
}
}</script>
<form action="" method="get" name="form">
<input onClick="addtext('<h1></h1>');" type="button" name="insert" value="H1">
<textarea name="message"  id="message" onclick="s_c(this);" onkeyup="s_c(this);"></textarea>
</form>
</body>
</html>
    Code (markup):
     
    chadsmith76, Mar 8, 2006 IP
  5. cytech

    cytech Guest

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hey,

    Your form name is called form. The javascript is looking for a form called post

    EG:
    var message=document.post.message;

    So either change the above line to:
    var message=document.form.message;

    Or change your form name to "post"

    :)
     
    cytech, Mar 8, 2006 IP
  6. chadsmith76

    chadsmith76 Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    i got it to work, thanks. See very simple oversight, but in firefox it insert the code at the end rather than the middle and in both IE and firefox it doesn't wrap the selected text with the code, it just inserts it at the cursor.

    Also another mistake i had was on the call to the addtext function the function is addText and my call was addtext lower case 't'.

    Thanks for the fast reply.
     
    chadsmith76, Mar 8, 2006 IP
  7. cancer10

    cancer10 Guest

    Messages:
    364
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7 
    <script type="text/javascript">
function blah() {
   var ta = document.getElementById("test");
   if (document.selection) {
      str = document.selection.createRange().text
      document.selection.createRange().text = "<B>" + str + "</B>";
      return true;
   }
   else if (ta.selectionStart) {
      var startPos = ta.selectionStart;
      var endPos = ta.selectionEnd;
      var str = ta.value.substring(startPos, endPos);
      ta.value = ta.value.substring(0, startPos) + "<B>" + str + "</B>" + ta.value.substring(endPos, ta.value.length);
      return true;
   }
   else {
      return false;
   }
}
</script>
<input type="button" value="Bold" onclick="blah()" />
<br />
<textarea id="test" style="height:150px">
This is a test to see if the bold tags will work.
</textarea>
    Code (markup):
     
    cancer10, May 16, 2008 IP
  8. cancer10

    cancer10 Guest

    Messages:
    364
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8

    Sorry for bumping.

    Question: How do you manage to replace all those UBB codes with HTML codes?

    LIKE: with <B> and so on...
     
    cancer10, Jun 26, 2008 IP