Create a WYSIWYG editor (embedded)?

[bernie1227]

You may also like to look at these:
tinyMCE
CKeditor
Or try and find out how the vbulletin wysiwyg works.

[Beverleyh]

I must admit - I do quite like TinyMCE and tend to favour it in my projects. I supposed that's the case when you've learned to manipulate and tweak something just the way you like. Or is it laziness because I've not delved into anything else that might have come about in the last few years? ...

I followed some of the links in the stackoverflow thread that Bernie posted, and this made a fun fiddle-sesh for me: http://www.queness.com/post/212/10-j...h-text-editors

I do enjoy a good fiddle and there's much to keep me occupied now. Thanks chaps!

I also look forward to hearing how you get on Daniel.

[djr33]

Google hosts the project as well.
http://code.google.com/p/wmd/

Ah, thanks!

Edit: actually, that doesn't work-- the code and examples are still at the original host, which is down. Thanks though.

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?

Oh, no, not at all. (I suppose in theory something like this could include that, but no.) I just need it to have the right layout.
I'll be generating BBCODE anyway, so then I could add that in later if necessary. I guess I'd like a realtime preview, but perhaps for Javascript that would wait until it's saved to update.

You may also like to look at these:
tinyMCE
CKeditor
Or try and find out how the vbulletin wysiwyg works.

I've seen them, and I'm looking at a few in more detail. I haven't found any yet that focus on generating bbcode rather than HTML.

However, what I think I need will be one that generates consistent HTML (rather than relying on the browser to make it up) then just do a relatively simple search and replace later. At least that's my current thought on the matter. I may have to write this myself if I can't find one that does exactly that-- maybe one of the older ones.

[bernie1227]

Ah, thanks!

Edit: actually, that doesn't work-- the code and examples are still at the original host, which is down. Thanks though.

Sorry about that, at any rate, it appears to be on softonic:
http://webscripts.softpedia.com/scri...WMD-66543.html

[djr33]

It's listed there, but the download link still goes to the real site. From what I can tell the developer abandoned it and has removed the download, possibly because of a group of people trying to reverse engineer it before it was released as open source... complicated. Still haven't found a good download link. Thanks for trying!

[traq]

I found a possibly similar project: epiceditor.

I like it, but if it's BBCode support you need, you might try CLEditor. I haven't tried, but it seems it may be fairly easy to add your own tags to the BBCode plugin (basic regex magic).

[djr33]

Hm. The idea is similar, but that isn't WYSIWYG-- it requires you to actually type the BBCODE. I'd like to be able to type within the preview and generate BBCODE. It's almost a contradiction based on how these things work, but I'm going to keep messing with it until I figure it out. I think I'm going to need to totally write my own WYSIWYG HTML editor to do it (rather than relying on the browser). I'm at the moment planning to borrow a few functions (well, at least the ideas, I may need to rewrite it totally anyway) from TinyMCE and work from there. I'm still up for alternatives of course

I'm confused by CLEditor. I can't figure out exactly how it does what it does. I've found a few that do something like that, but they all involve a "translation" function from HTML to BBCode at the end, and that's something I'd like to avoid-- cross-browser issues. I can't yet tell if CLEditor does this. I'll check it out now. Thanks.

[traq]

BBCode isn't "built-in" to CLEditor; it's a plugin (basically a "translate-to" method, a "translate-from" method, and a few methods to connect it to the main CLEditor object.

/**
 @preserve CLEditor BBCode Plugin v1.0.0
 http://premiumsoftware.net/cleditor
 requires CLEditor v1.3.0 or later
 
 Copyright 2010, Chris Landowski, Premium Software, LLC
 Dual licensed under the MIT or GPL Version 2 licenses.
*/

// ==ClosureCompiler==
// @compilation_level SIMPLE_OPTIMIZATIONS
// @output_file_name jquery.cleditor.bbcode.min.js
// ==/ClosureCompiler==

/*

  The CLEditor useCSS optional parameter should be set to false for this plugin
  to function properly.

  Supported HTML and BBCode Tags:

  Bold              <b>Hello</b>
                    [b]Hello[/b]
  Italics           <i>Hello</i>
                    [i]Hello[/i]
  Underlined        <u>Hello</u>
                    [u]Hello[/u]
  Strikethrough     <strike>Hello</strike>
                    [s]Hello[/s]
  Unordered Lists   <ul><li>Red</li><li>Blue</li><li>Green</li></ul>
                    [list][*]Red[/*][*]Green[/*][*]Blue[/*][/list]
  Ordered Lists     <ol><li>Red</li><li>Blue</li><li>Green</li></ol>
                    [list=1][*]Red[/*][*]Green[/*][*]Blue[/*][/list]
  Images            <img src="http://premiumsoftware.net/image.jpg">
                    [img]http://premiumsoftware.net/image.jpg[/img]
  Links             <a href="http://premiumsoftware.net">Premium Software</a>
                    [url=http://premiumsoftware.net]Premium Software[/url]

*/

(function($) {

  // BBCode only supports a small subset of HTML, so remove
  // any toolbar buttons that are not currently supported.
  $.cleditor.defaultOptions.controls =
    "bold italic underline strikethrough removeformat | bullets numbering | " +
    "undo redo | image link unlink | cut copy paste pastetext | print source";

  // Save the previously assigned callback handlers
  var oldAreaCallback = $.cleditor.defaultOptions.updateTextArea;
  var oldFrameCallback = $.cleditor.defaultOptions.updateFrame;

  // Wireup the updateTextArea callback handler
  $.cleditor.defaultOptions.updateTextArea = function(html) {

    // Fire the previously assigned callback handler
    if (oldAreaCallback)
      html = oldAreaCallback(html);

    // Convert the HTML to BBCode
    return $.cleditor.convertHTMLtoBBCode(html);

  }

  // Wireup the updateFrame callback handler
  $.cleditor.defaultOptions.updateFrame = function(code) {

    // Fire the previously assigned callback handler
    if (oldFrameCallback)
      code = oldFrameCallback(code);

    // Convert the BBCode to HTML
    return $.cleditor.convertBBCodeToHTML(code);

  }

  // Expose the convertHTMLtoBBCode method
  $.cleditor.convertHTMLtoBBCode = function(html) {
		
    $.each([
      [/[\r|\n]/g, ""],
      [/<br.*?>/gi, "\n"],
      [/<b>(.*?)<\/b>/gi, "[b]$1[/b]"],
      [/<strong>(.*?)<\/strong>/gi, "[b]$1[/b]"],
      [/<i>(.*?)<\/i>/gi, "[i]$1[/i]"],
      [/<em>(.*?)<\/em>/gi, "[i]$1[/i]"],
      [/<u>(.*?)<\/u>/gi, "[u]$1[/u]"],
      [/<ins>(.*?)<\/ins>/gi, "[u]$1[/u]"],
      [/<strike>(.*?)<\/strike>/gi, "[s]$1[/s]"],
      [/<del>(.*?)<\/del>/gi, "[s]$1[/s]"],
      [/<a.*?href="(.*?)".*?>(.*?)<\/a>/gi, "[url=$1]$2[/url]"],
      [/<img.*?src="(.*?)".*?>/gi, "[img]$1[/img]"],
      [/<ul>/gi, "[list]"],
      [/<\/ul>/gi, "[/list]"],
      [/<ol>/gi, "[list=1]"],
      [/<\/ol>/gi, "[/list]"],
      [/<li>/gi, "[*]"],
      [/<\/li>/gi, "[/*]"],
      [/<.*?>(.*?)<\/.*?>/g, "$1"]
      ], function(index, item) {
        html = html.replace(item[0], item[1]);
      });

    return html;

  }

  // Expose the convertBBCodeToHTML method
  $.cleditor.convertBBCodeToHTML = function(code) {

    $.each([
      [/\r/g, ""],
      [/\n/g, "<br />"],
      [/\[b\](.*?)\[\/b\]/gi, "<b>$1</b>"],
      [/\[i\](.*?)\[\/i\]/gi, "<i>$1</i>"],
      [/\[u\](.*?)\[\/u\]/gi, "<u>$1</u>"],
      [/\[s\](.*?)\[\/s\]/gi, "<strike>$1</strike>"],
      [/\[url=(.*?)\](.*?)\[\/url\]/gi, "<a href=\"$1\">$2</a>"],
      [/\[img\](.*?)\[\/img\]/gi, "<img src=\"$1\">"],
      [/\[list\](.*?)\[\/list\]/gi, "<ul>$1</ul>"],
      [/\[list=1\](.*?)\[\/list\]/gi, "<ol>$1</ol>"],
      [/\[list\]/gi, "<ul>"],
      [/\[list=1\]/gi, "<ol>"],
      [/\[\*\](.*?)\[\/\*\]/g, "<li>$1</li>"],
      [/\[\*\]/g, "<li>"]
      ], function(index, item) {
        code = code.replace(item[0], item[1]);
      });

    return code;

  }

})(jQuery);

It still has the WYSIWYG capabilities, however. My thinking is that you might be able to swap out the "to" and "from" methods (make it work backwards).

...I might just be ranting, however.

[djr33]

Thanks, traq. That makes sense. I now see how it works. I *think* it's similar to the others, in that it uses those translation functions superficially while still being based on HTML. The trouble is that browsers seem to have different HTML generated so it makes it tricky. I need to look into that in more detail, though.

But all of this is helping-- seeing what's out there, how it works, etc., and even if I need to write my own (or want to, for other reasons) it'll give me the background I need to do so rather than entirely reinventing the wheel.

Once I look at that in more detail it might turn out to be what I need or at least hint at what I need.

[traq]

The trouble is that browsers seem to have different HTML generated so it makes it tricky.

mm... unfortunately, you're probably right.