Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 18
  1. #1
    Senior Member Stylise's Avatar
    Join Date
    Jul 2005
    Location
    Mount Martha, Australia
    Posts
    229
    Member #
    10679
    How should I go about making a WYSIWYG web-based editor for input, ie. for news creation in a CMS.

    I have used google a bit to find an answer, but when implementation comes around, I feel like I've missed something.


    I think the general idea is to have a iframe instead of a textarea. That you then via JavaScript turn on designMode on the document(iframe)

    Code:
    document.getElementById(editor).contentDocument.designMode = "on";
    After this a little unsure. I have the following, just a text hyperlink to make the text bold

    Code:
    <a href="javascript:;" onclick="formatButton('teaser', 'Bold');" unselectable="on">Bold</a>
    But it does nothing. Also, I can't send any data to the iframe. So when editing an existing news article it just shows nothing. Tried using JS to write (.innerHTML) to the iframe, but no luck.

    Any help would be great guys

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    I'm assuming you don't want to use, for example, FCKEditor?

  4. #3
    Senior Member Stylise's Avatar
    Join Date
    Jul 2005
    Location
    Mount Martha, Australia
    Posts
    229
    Member #
    10679
    Not really. I'd really like to know how to do it myself, for future reference. Also, I'll be using it in a commercial product, so the more I do myself the better.

    Cheers for the link tho, haven't heard of that one before

  5. #4
    Senior Member Stylise's Avatar
    Join Date
    Jul 2005
    Location
    Mount Martha, Australia
    Posts
    229
    Member #
    10679
    Somethings work now, yet some don't.

    Can get 'undo' and 'redo' to work. But can't get bold, italic, underline or anything else to work.

    Code:
    function initEditor(editor) {
        if ($(editor).contentDocument)
            $iframe = $(editor).contentDocument;
        else
            $iframe = this[editor].document;
            
        $iframe.designMode = "on";
    
    
      try {
        document.getElementById(editor).contentWindow.document.execCommand("undo", false, null);
      }  catch (e) {
        alert("This demo is not supported on your level of Mozilla.");
      }
      
    
    }
    
    function formatButton(editor, command) {
    
        if ($(editor).contentDocument) {
    
            try {
                $(editor).contentWindow.document.execCommand(command, false, null);
            }  catch (e) {
                alert("This demo is not supported on your level of Mozilla.");
            }
        }
        else {
            window.frames[editor].focus();
            this[editor].document.execCommand(command, false, null);
        }
    
        $(editor).contentWindow.focus();
    
    }
    The exception throws:

    [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLDocument.execCommand]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://localhost/belujam/javascripts/global.js :: formatButton :: line 224" data: no]

  6. #5
    Senior Member Stylise's Avatar
    Join Date
    Jul 2005
    Location
    Mount Martha, Australia
    Posts
    229
    Member #
    10679
    Ahh. Stupid Mistake on my part. I had a .tpl file as the src of the iframe instead of a html file. It must not have forced the HTML formatting

  7. #6
    Senior Member
    Join Date
    May 2005
    Location
    Essex, United Kingdom
    Posts
    200
    Member #
    10131
    I understand that you want to build it yourself but most Javascript WYSIWYG editors produce massive amounts of spaghetti code.

    I would suggest http://www.xstandard.com/, it's a cross-browser WYSIWYG editor that produces completely valid XHTML and CSS. Even if it's no use to you it may be of use to someone else.

  8. #7
    Senior Member Stylise's Avatar
    Join Date
    Jul 2005
    Location
    Mount Martha, Australia
    Posts
    229
    Member #
    10679
    Just checked that out. Not bad! Even free for commercial use

    Will give it a go. Thanks dchesterton

  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    I believe FCKEditor does the same (valid XHTML/CSS), and is both free for commercial use and Free as in Freedom.

    A question, though -- it looks like you're using the Prototype library here and there, and yet you're still using document.getElementById. Any reason? Also, why name your variable with a $ in front?

  10. #9
    Senior Member Stylise's Avatar
    Join Date
    Jul 2005
    Location
    Mount Martha, Australia
    Posts
    229
    Member #
    10679
    Yeah, using Prototype. Most of the above was just cut and paste from the Mozilla demo, can't remember what it was called.

    "Also, why name your variable with a $ in front?"
    Ahh, didn't spot that one! Thanks. Mostly working with PHP as you could prolly tell


    Are you sure FCKEditor is free for commercial use?

  11. #10
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Quote Originally Posted by Stylise
    Yeah, using Prototype. Most of the above was just cut and paste from the Mozilla demo, can't remember what it was called.

    "Also, why name your variable with a $ in front?"
    Ahh, didn't spot that one! Thanks. Mostly working with PHP as you could prolly tell


    Are you sure FCKEditor is free for commercial use?
    Hehe, yeah. Isn't it neat that Javascript doesn't mind, though? :-) And doesn't the Prototype library *rock this world*? :-)

    FCKEditor is distributed under the GNU Lesser General Public License, which, unlike the GPL, is not viral. The only requirement is that if you distribute a program that uses a library or other program under the LGPL, you need to distribute the source FOR THE LGPLed PROGRAM ONLY (i.e., not for yours) under the same LGPL. Also, if you change the LGPLed code, you have to license it under the LGPL. Using that code from elsewhere does not mean that `elsewhere' needs to be distributed under an Open Source license, however. The LGPL was created precisely so free software could be used in commercial settings, theoretically to allow free software that is not dominant in a field to become dominant through commercial adoption.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:20 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com