Create a WYSIWYG editor (embedded)?

[djr33]

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.

[Beverleyh]

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.

[bernie1227]

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

Edit:
Php:
http://stackoverflow.com/questions/2...-editor-in-php

[traq]

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(+)++

[djr33]

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):

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/

[djr33]

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.

[keyboard]

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.

[djr33]

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.

[bernie1227]

http://wmd-editor.com/[/url]

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

[keyboard]

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?