Page 1 of 6 123 ... LastLast
Results 1 to 10 of 56

Thread: Create a WYSIWYG editor (embedded)?

  1. #1
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default Create a WYSIWYG editor (embedded)?

    I'm thinking about trying to design my own WYSIWYG editor for use on my website.

    I'm not at all concerned with it generating valid code because I'll be strictly limiting what can be generated and also will be using bbcode that will be parsed later anyway, rather than HTML directly. That's also why I'd need to create this myself.


    How does an embedded WYSIWYG editor work? I've really never looked into it. I know one technique involves iframes, and that's about all I know.


    If anyone knows a great tutorial or has some other advice, I'd appreciate it




    EDIT: I've found a reasonable tutorial to start:
    http://www.developphp.com/view.php?tid=1192
    But I need to now work out how to control the markup it creates; actually, it's the opposite problem from what I imagined. Still possible, but it's going to be a little complicated I think.
    And I'm still looking for more ideas than this, but I'll play with that tutorial for a bit.
    Last edited by djr33; 10-24-2012 at 03:49 PM.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,935
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    11

    Default

    I'd be interesting in following this Dan.

    I'm looking into making a simple WYSIWYG to use via mobile/iPhone - just to see if I can really.

    Thanks for the link - I'll have a play tomorrow when I'm back in a computer.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    If I unrest and what you're saying there's a few threads on other forums about the same kind of thing:
    http://stackoverflow.com/questions/2...wysiwyg-editor
    ^^This ones more about using a pre built one
    And this one is DIY, but it's javascript so I don't know how much that will help:
    http://www.devguru.com/features/tuto...g/wysiwyg1.asp
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  4. The Following User Says Thank You to bernie1227 For This Useful Post:

    djr33 (10-24-2012)

  5. #4
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    You can't control the markup it creates; since the browser does that (and rest assured, they all do it differently).

    I think your best bet is to try to filter/rebuild the markup after it's submitted (maybe via DOMDocument? HTMLPurifier is another option that might work(+)++

  6. The Following User Says Thank You to traq For This Useful Post:

    djr33 (10-24-2012)

  7. #5
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    Beverley, I'll post as I have updates. Glad to see this might help others as well.

    Bernie, thanks for the links. I will be using primarily Javascript for this, then of course sending it to the PHP to do other things there (actually, mostly the same things). So I'll need to have a JS and a PHP version of my code. I can work out the PHP, so now I actually am trying to figure out the Javascript.



    Some updates on what I've learned:
    1. Using code like below, we can actually just utilize the browser's built in editing functions. It's almost no work at all and very simple Javascript (see the video tutorial in my first post):
    Code:
    richTextField.document.designMode = 'On'; //turn on design mode for the page, allow editing
    richTextField.document.execCommand('bold',false,null); //make the active text bold
    That's it-- then you can type and so forth, which is what I was originally trying to figure out.

    2. This unfortunately generates whatever HTML the browser likes. For example, firefox seems to use <font> tags to color text if you set the color. More than that, I don't want HTML; I want bbcode. This means I'll need to actually split the system and somehow work with bbcode and html at the same time.

    3. http://wysiwygbbcode.codeplex.com/
    This is a great example of a "bbcode wysiwyg editor"-- that is, it uses the same approach as the others, but it then translates between bbcode and html as it goes.

    4. For my personal requirements, I'd rather not do a translation function-- at least not as it is there. It just translates from html to bbcode and that's how it generates the bbcode. I'd prefer that the bbcode is the default. (I also have my own custom bbcode for this project, so I'll need to work that out.)


    That's where I am at the moment. I'll post again when I have an update!



    Bernie, the first link you posted is helpful and is almost what I want-- it uses (customizable) bbcode and then shows a preview. But what I'd love is to actually use the preview as the input, such as allowing typing. That's where I'm a little less certain. Somehow I think I'll get there.
    Unfortunately the website for it appears to be down at the moment, but I'll check again later: http://wmd-editor.com/
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  8. #6
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    Quote Originally Posted by traq View Post
    You can't control the markup it creates; since the browser does that (and rest assured, they all do it differently).

    I think your best bet is to try to filter/rebuild the markup after it's submitted (maybe via DOMDocument? HTMLPurifier is another option that might work(+)++
    We posted around the same time. Thanks for the info.


    From what I've seen, I think you're right. Parsing the HTML is really not what I want to end up doing, especially when I want to allow very specific commands in bbcode and not others (I know I could remove them later, but it seems backwards). And mostly I'd worry about browser variation in the code and making sure it's consistently interpreted. (HTMLPurifier is interesting but seems to only make the code valid rather than standardized across browsers, which is fine for how it's intended, but I'd still need to work out many possible variations serverside.)

    I think my only option will be to circumvent that entirely. The only thing I really want from it will be to allow typing in the preview text, and somehow I'll work out the rest. My next step is going to be trying to work out cursor position and also selection position within the text. If I can do that and somehow properly correlate it to the (hidden) bbcode, then I think I can make all of this work, with a lot of effort.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  9. #7
    Join Date
    Mar 2011
    Location
    N 11° 19' 0.0012 E 142° 15' 0
    Posts
    1,509
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Does it have to have javascript?

    Over the years, I've made several different projects that, together, contains everything you'd need...
    I can show you some examples if you like.

  10. The Following User Says Thank You to keyboard For This Useful Post:

    djr33 (10-24-2012)

  11. #8
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    I don't understand. How would it not have Javascript?
    I do need it to have a live, editable preview in real time. If not JS, I'm not sure (and I want to avoid something like Flash).

    But sure I'd be interested if your projects fit that! Now I'm curious.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  12. #9
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Quote Originally Posted by djr33;285366
    Bernie, the first link you posted is helpful and is almost what I want-- it uses (customizable) bbcode and then shows a preview. But what I'd love is to actually use the preview as the input, such as allowing typing. That's where I'm a little less certain. Somehow I think I'll get there.
    Unfortunately the website for it appears to be down at the moment, but I'll check again later: [url
    http://wmd-editor.com/[/url]
    Google hosts the project as well.
    http://code.google.com/p/wmd/
    Last edited by bernie1227; 10-25-2012 at 12:51 AM.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  13. The Following User Says Thank You to bernie1227 For This Useful Post:

    djr33 (10-25-2012)

  14. #10
    Join Date
    Mar 2011
    Location
    N 11° 19' 0.0012 E 142° 15' 0
    Posts
    1,509
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Oh... sorry, you mis-understood me:
    I meant, do you need buttons that then inject javascript into the document.

    E.g. click one button it makes text bold. Click another it adds an onclick event to whatever is selected.

    Do you understand me?

  15. The Following User Says Thank You to keyboard For This Useful Post:

    djr33 (10-25-2012)

Similar Threads

  1. WYSIWYG Editor Maintain Formatting
    By bluewalrus in forum Computer hardware and software
    Replies: 5
    Last Post: 12-02-2010, 03:13 PM
  2. Released a UBBEditor WYSIWYG UBB Editor
    By jetiben in forum JavaScript
    Replies: 0
    Last Post: 06-23-2010, 05:22 AM
  3. Dynamic Ajax Content and WYSIWYG editor
    By CarlosAraujo in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 01-05-2010, 03:16 PM
  4. a better WYSIWYG editor?
    By unknownerrors in forum The lounge
    Replies: 7
    Last Post: 02-07-2007, 09:03 AM
  5. Font used in WYSIWYG editor script
    By rizlaa in forum Graphics
    Replies: 1
    Last Post: 08-04-2006, 12:52 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •