Create a WYSIWYG editor (embedded)?

[bernie1227]

in situations like this, I cheat:
http://web.archive.org/web/201012261...r.com/download
This is a copy of the page crawled in 2011, with downloadable script.

[djr33]

Thanks, Bernie! I didn't even think to look there because it's a file to download-- but that worked.

[traq]

Cheaters.

[djr33]

Ok, now that I've finally had a chance to look at the inner workings of WMD (I just realized.... has anyone pointed out what a bad name this is? haha...), I've determined that it's not what I'm looking for but could in theory be another approach.
It's a BBcode editor (like in our "quick reply" box here), not a WYSIWYG editor in any sense.
However, it gives a live preview as you edit the code, so it would still be a lot better than just a regular textarea.

What I really wanted to get out of this (what made me excited after looking into these WYSIWYG editors) was the ability to actually type within the preview. I don't want anything else from the WYSIWYG/designMode stuff, aside from buttons that apply BBcode, as in all of these examples. But... if we can't type directly, at least that's a good start.


What I've already planned to do is not have a full-page WYSIWYG interface. Instead, I'll treat everything as objects such as <p>, <img>, <table>, whatever. You must click an object to activate it (it'll show highlighting or something) and then you can edit it. This will allow a reasonable translation to secure BBcode rather than the many possible variations on HTML.


The question at this point is just whether I can borrow any code from these existing scripts. Still looking into it.

[djr33]

Alright, I'm ready to unveil my first draft at creating a WYSIWYG editor with the required features from this thread.

I've decided to ignore bbcode for the moment and do one of two things:
1) Translate the HTML into bbcode later (but not random HTML-- specifically set by me; or
2) Add HTML comments containing the bbcode within them; strip the HTML, strip <!-- and -->. Done.

Here's the demo:
http://ci-pro.com/wysiwyg/demo1.php

It's not much yet, but it's most of the major architecture I'll need later. I thought I'd show it and see if you have any comments. I'll of course by adding features later so that's not my concern at the moment.
I also plan to polish the code later, but at the moment I'm just getting everything in place as needed.

[ajfmrf]

I like it but have one suggestion.

When you go to the "add paragraph" I could not see the blinking cursor on the left.I only saw it by accident when I happened to accidently click on the area and then it went to yellow.Can the area for the new paragragh be yellow as soon as you click the "add paragraph? link?

[djr33]

That's a bug. I have no idea why it's not doing that by default. If anyone has any ideas on that I'd love to hear them.
If you insert text by default (innerHTML) for that element, it works fine. But it seems that until the element has text in it, it doesn't have a height. I could set a height manually, but then I'd have to guess about fonts and all that.

Since it's working regardless of that, that's something I'll fix while polishing it up later I think. Unless someone has an idea now

Thanks for checking it out. I'll keep posting updates as I have them.

[jscheuer1]

I haven't been following this thread real closely but has anyone pointed out the two DD scripts:

http://www.dynamicdrive.com/dynamici...iwyg/index.htm

and:

http://www.dynamicdrive.com/dynamici...itor/index.htm

??

At the very least they might provide some clues/tricks/ideas on this.

[traq]

If I add a paragraph, then click on it (or anywhere else) without typing something first, it looses focus and I'm subsequently unable to do anything. The console shows several type errors:

cannot read property 'parentNode' of null
cannot read property 'innerText' of null

[djr33]

Hi John, thanks for checking in. Those scripts are similar to others out there that don't quite do what I need. I need to end up with bbcode (or at least a standard format of HTML that I can translate into bbcode) and then I need to control exactly what can be done in the HTML (limited options). I appreciate the links and so far I've gotten many ideas from looking through working scripts, so those will help too.

traq, thanks for the information. I'll look into that.
When you empty any element it should be automatically deleted. That's what's (almost) happening here. It shouldn't disable it.