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.

Text editor help needed

Discussion in 'jQuery' started by qwikad.com, Oct 18, 2015.

0
  1. #1
    I came across this text editor. It's work in progress.

    I'd like to keep tinkering with it just to learn stuff and who knows maybe I will use it for something in the future.

    Ok, so I thought I'd create a button called Large. But I am not sure how to make it work. Adding a font size doesn't change the font size. Obviously it tells you how much I know about Document.execCommand().

    jsfiddle: http://jsfiddle.net/RRBHw/42/

    I would like to find out how to add two more commands to it. 1. Insert an images and 2 insert a link.

    If you need the list of the commands to refresh your memory: https://developer.mozilla.org/en-US/docs/Web/API/document/execCommand#Commands

    Any help will be appreciated.

    The code with the links / commands for a quick reference:

    
  <p>\
                    <a href='#' class='large'>Large</a>\
                    <a href='#' class='bold'>Bold</a>\
                    <a href='#' class='italic'>Italic</a>\
                    <a href='#' class='unorderedlist'>List</a>\
                </p></div></div>");
               
                     $('.large', tb).click(function () {
                        formatText('fontSize', false, 7);
                        return false;
                    });

                    $('.bold', tb).click(function () {
                        formatText('bold');
                        return false;
                    });
                    $('.italic', tb).click(function () {
                        formatText('italic');
                        return false;
                    });
                    $('.unorderedlist', tb).click(function () {
                        formatText('insertunorderedlist');
                        return false;
                    });

                    $(iframe).parents('form').submit(function () {
                        disableDesignMode(true);
                    });
    Code (markup):
     
    Last edited: Oct 18, 2015
    qwikad.com, Oct 18, 2015 IP
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #2
    Actually forget about it. There's a way of doing the same thing 10x easier and faster:

    

<!DOCTYPE html>
<html>
<head>
    <style>
        #text {
    width : 500px;
    min-height : 100px;
    border : 2px solid;
}
    </style>
</head>
<body>
    <div id="text" contenteditable="true"></div>
<button id="toggle_bolt" onclick="document.execCommand('bold');">toggle bold</button>
<button id="toggle_bolt" onclick="document.execCommand('italic');">toggle italic</button>
<button id="toggle_bolt" onclick="document.execCommand('underline');">toggle underline</button>
    <script type="text/javascript">
     
    </script>
</body>
</html>
    Code (markup):
    Just need to figure out how to do document.execCommand for links and images.
     
    qwikad.com, Oct 19, 2015 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    "easier" is a relative term -- now you have multiple instances of the same ID (you can't do that), onclick pissing all over the markup, etc, etc...

    Ideally since those controls are scripting only they should be added by the script using the DOM, not slopped into the markup any-old-way. In neither of those code approaches would I have had anything other than the DIV to put them into be in the markup... though being a list of controls, a list may be the more appropriate tag.

    Also beware that execCommand cross browser support is pretty much in its infancy... doesn't even EXIST on Safari yet. ...when IE 9 supports it and Safari doesn't, well.... there's a reason Safari is being called "the new IE6"!
     
    deathshadow, Oct 22, 2015 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #4
    The good news is I am not behind either one of those scripts. I just happened to find them somewhere.

    It was just an idea I had. I wanted to work on them just to educated myself with all that stuff. The thing is there are so many rich text editors out there (good and bad) that you can always find something that already works.

    Just check out this list:

    https://github.com/cheeaun/mooeditable/wiki/Javascript-WYSIWYG-editors

    Actually here's one of them that is rather simple and would look good on any website:

    https://github.com/wysiwygjs/wysiwyg.js (if anyone cares to download).
     
    qwikad.com, Oct 22, 2015 IP