PDA

View Full Version : Create a WYSIWYG editor (embedded)?



djr33
10-24-2012, 03:30 PM
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
10-24-2012, 06:25 PM
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
10-24-2012, 07:17 PM
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/2519402/small-custom-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/tutorials/wysiwyg/wysiwyg1.asp

Php:
http://stackoverflow.com/questions/2196620/how-to-make-a-wysiwyg-editor-in-php

traq
10-24-2012, 07:50 PM
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 (http://php.net/domdocument)? HTMLPurifier (http://htmlpurifier.org/)is another option that might work(+)++

djr33
10-24-2012, 07:51 PM
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
10-24-2012, 07:59 PM
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 (http://php.net/domdocument)? HTMLPurifier (http://htmlpurifier.org/)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
10-24-2012, 09:09 PM
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
10-24-2012, 11:19 PM
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
10-24-2012, 11:55 PM
http://wmd-editor.com/[/url]
Google hosts the project as well.
http://code.google.com/p/wmd/

keyboard
10-25-2012, 12:16 AM
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?

bernie1227
10-25-2012, 12:57 AM
You may also like to look at these:
tinyMCE (http://www.tinymce.com/)
CKeditor (http://ckeditor.com/)
Or try and find out how the vbulletin wysiwyg works.

Beverleyh
10-25-2012, 12:53 PM
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-jquery-and-non-jquery-javascript-rich-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
10-25-2012, 03:48 PM
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
10-25-2012, 07:11 PM
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/script/WYSIWYG-Editors/WMD-66543.html

djr33
10-25-2012, 11:01 PM
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
10-26-2012, 12:43 AM
I found a possibly similar project: epiceditor (http://oscargodson.github.com/EpicEditor/).

I like it, but if it's BBCode support you need, you might try CLEditor (http://premiumsoftware.net/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
10-26-2012, 02:09 AM
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
10-26-2012, 03:49 AM
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>
Hello
Italics <i>Hello</i>
Hello
Underlined <u>Hello</u>
Hello
Strikethrough <strike>Hello</strike>
Hello
Unordered Lists <ul><li>Red</li><li>Blue</li><li>Green</li></ul>
Red[/*] Green[/*] Blue[/*]
Ordered Lists <ol><li>Red</li><li>Blue</li><li>Green</li></ol>
Red[/*] Green[/*] Blue[/*]
Images <img src="http://premiumsoftware.net/image.jpg">
http://premiumsoftware.net/image.jpg
Links <a href="http://premiumsoftware.net">Premium Software</a>
Premium Software (http://premiumsoftware.net)

*/

(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, "$1"],
[/<strong>(.*?)<\/strong>/gi, "$1"],
[/<i>(.*?)<\/i>/gi, "$1"],
[/<em>(.*?)<\/em>/gi, "$1"],
[/<u>(.*?)<\/u>/gi, "$1"],
[/<ins>(.*?)<\/ins>/gi, "$1"],
[/<strike>(.*?)<\/strike>/gi, "$1"],
[/<del>(.*?)<\/del>/gi, "$1"],
[/<a.*?href="(.*?)".*?>(.*?)<\/a>/gi, "$2 ($1)"],
[/<img.*?src="(.*?)".*?>/gi, "$1"],
[/<ul>/gi, ""],
[/<\/ul>/gi, ""],
[/<ol>/gi, ""],
[/<\/ol>/gi, ""],
[/<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
10-26-2012, 04:05 AM
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
10-26-2012, 05:41 AM
The trouble is that browsers seem to have different HTML generated so it makes it tricky.

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

bernie1227
10-26-2012, 09:20 AM
in situations like this, I cheat:
http://web.archive.org/web/20101226144814/http://wmd-editor.com/download
This is a copy of the page crawled in 2011, with downloadable script.

djr33
10-26-2012, 02:33 PM
Thanks, Bernie! I didn't even think to look there because it's a file to download-- but that worked. :)

traq
10-26-2012, 03:00 PM
Cheaters. :)

djr33
10-26-2012, 03:37 PM
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
10-27-2012, 02:39 AM
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
10-27-2012, 03:18 AM
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
10-27-2012, 03:25 AM
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
10-27-2012, 03:32 AM
I haven't been following this thread real closely but has anyone pointed out the two DD scripts:

http://www.dynamicdrive.com/dynamicindex16/openwysiwyg/index.htm

and:

http://www.dynamicdrive.com/dynamicindex16/richtexteditor/index.htm

??

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

traq
10-27-2012, 03:33 AM
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
10-27-2012, 03:50 AM
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.

traq
10-27-2012, 04:16 AM
When you empty any element it should be automatically deleted. That's what's (almost) happening here. It shouldn't disable it.

alright - but once it happens, editing (anything) no longer works, and neither do the "Add" or "Remove" controls - the "Get Code" button works, but nothing else.

bernie1227
10-27-2012, 05:31 AM
I see you can't add a blank line by itself. Is there any particular reason for that?


Oh yes, and when you click the get Code button and break your way down editing. The editing space begins to cover the code.
I would suggest changing the positioning of the code.

bernie1227
10-27-2012, 09:53 PM
console error when get code is clicked:


Refused to execute a JavaScript script. Source code of script found within request.

it only appears every second time the button is clicked.


also, when get code is clicked and it does come up with that error, I lose the ability to do anything

spaces don't wrap

also, when I delete almost everything and then press get code, it gets the correct code, but the default elements are restored.

I also managed to select the list markers, which I'm pretty sure isn't meant to happen. Then when I try and press delete, I lose my ability to do anything once again.

djr33
10-27-2012, 11:19 PM
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

alright - but once it happens, editing (anything) no longer works, and neither do the "Add" or "Remove" controls - the "Get Code" button works, but nothing else.

Traq, I'm trying to figure this out but now I'm confused. I can't replicate the error in Firefox. In Safari, I can, but only when I've clicked "Get Code" to submit the form. I have no idea why. And Safari doesn't seem to have any useful debugging information for me. It does what you describe, though-- nothing can be edited.

What browser are you using?


EDIT: It seems like this happens after there have been a few errors on the page or something. Maybe it's a security feature? I don't really get it. I'll try to keep tracking it down though.

djr33
10-27-2012, 11:29 PM
I see you can't add a blank line by itself. Is there any particular reason for that?
That's intentional (and applies to other things as well, such as lists). There are 2-3 reasons:
1) If there's no content in an element there's no way to select it (at least in Firefox), so I don't want empty elements floating around.
2) There's no legitimate reason to have a blank line. In my bbcode it would be parsed out as whitespace.
3) I'll add in some other way to do spacing between paragraphs if the goal is just to add spaces. But in the same sense that <br> isn't the best way to do spacing in HTML, I don't want blank paragraphs in this.
But don't worry-- it'll allow spacing as required, just in a slightly different way (and perhaps not for a while as I develop it).
And as required you can add elements back in, once I get all of the controls set up :)


Oh yes, and when you click the get Code button and break your way down editing. The editing space begins to cover the code.
I would suggest changing the positioning of the code.
That's not important-- this is just a sandbox to play with the code. In fact, I could remove the "get code" button because it's not too relevant at the moment. It works. I'll deal with the rest later. I just wanted a way to preview it to be sure it was submitting the updated rather than original code. It'll all be a lot better looking in the final version :)
(On a more specific topic, the final version of this, at least for my site, will have a fixed height, so the text won't end up going off the bottom of the div, but that's not a requirement of using it of course.)

console error when get code is clicked:

it only appears every second time the button is clicked.


also, when get code is clicked and it does come up with that error, I lose the ability to do anything


What browser is this? I haven't been able to replicate that, but I'd like to fix it.


spaces don't wrapHm? Is that a problem? I'm not sure exactly what you mean. That may be a limitation of designMode, though. If so, I'll fix it serverside-- this is a preview, one that I hope is close to the final version, but a couple things will change once it's submitted for the final version.

EDIT: Ok, I found what you're talking about. Yeah that's designMode, I think. But it only happens when you have a full line of spaces-- they wrap if you just have a few spaces in a row between words. That shouldn't happen very often. And when it does, the user is probably doing something wrong. It'll be corrected serverside regardless, though.


also, when I delete almost everything and then press get code, it gets the correct code, but the default elements are restored."get code" isn't set up to preserve anything. The only thing it does is shows what you submitted-- and restores all of the original HTML. I'll implement the actual "saving" feature later. At the moment I just want to get it all working. And if you mess up the HTML it's an easy way to refresh the page.


I also managed to select the list markers, which I'm pretty sure isn't meant to happen. Then when I try and press delete, I lose my ability to do anything once again.That should happen-- you should be able to select any relevant element such as a paragraph or a list or a list item, or other things coming soon like images.
However, it should not disable the page. I haven't seen this either-- I wonder if it's the same thing that's happening for traq.

djr33
10-27-2012, 11:41 PM
Ok, I'm using Safari now and figured out where the Console was. That's how little I use Safari to debug JS :)
Working on the problem now.

EDIT:
Refused to execute a JavaScript script. Source code of script found within request.That's the error I'm getting from Safari. Firefox doesn't seem to mind.

If I understand this correctly, it's blocking the JS on the next page because within the POST data there was some Javascript that looks similar--- in the onclick events. How annoying!

Any ideas to get around this?


I don't have any problems whatsoever if I haven't submitted it with "get code". I don't want this to ever catch up with me if it happens to be that I do need to submit it at some point and keep editing. Most likely, submitting will take you to a different page and it will parse out all of the HTML into bbcode before anything is relevant. But Safari might still not like it for security reasons.

bernie1227
10-27-2012, 11:42 PM
That's not important-- this is just a sandbox to play with the code. In fact, I could remove the "get code" button because it's not too relevant at the moment. It works. I'll deal with the rest later. I just wanted a way to preview it to be sure it was submitting the updated rather than original code. It'll all be a lot better looking in the final version :)
(On a more specific topic, the final version of this, at least for my site, will have a fixed height, so the text won't end up going off the bottom of the div, but that's not a requirement of using it of course.)

the get code button seems pretty irrelevant at the moment and it's causing a lot more trouble than it's worth.


What browser is this? I haven't been able to replicate that, but I'd like to fix it.

Google chrome latest version on mac os x lion (yes, I got a macbook)



Hm? Is that a problem? I'm not sure exactly what you mean. That may be a limitation of designMode, though. If so, I'll fix it serverside-- this is a preview, one that I hope is close to the final version, but a couple things will change once it's submitted for the final version.

EDIT: Ok, I found what you're talking about. Yeah that's designMode, I think. But it only happens when you have a full line of spaces-- they wrap if you just have a few spaces in a row between words. That shouldn't happen very often. And when it does, the user is probably doing something wrong. It'll be corrected serverside regardless, though.

Yeah, I meant that text goes onto a new line, however, spaces don't.


That should happen-- you should be able to select any relevant element such as a paragraph or a list or a list item, or other things coming soon like images.
However, it should not disable the page. I haven't seen this either-- I wonder if it's the same thing that's happening for traq.
I don;t know if that's the same thing, but there appear to be quite a few things involving the get code button that result in not being able to edit anything.
I'll try and replicate and screenshot the issue.


yes, isn't there a developer tab that has to be enabled or some such in safari?
Anyway, I've managed to replicate a similar issue, as traq said in which you add an element and then click on it, which results in the errors:


Uncaught TypeError: Cannot read property 'innerText' of null demo1.php:29
Uncaught TypeError: Cannot read property 'parentNode' of null demo1.php:99

I'll attempt to replicate the issue in safari and firefox.


I've managed to replicate the issue in safari, nothing yet for firefox.


as far as I can tell the only variable causing firefox to work and other browsers not to, is something to do with the fact that newly created elements are yellow in every browser but firefox. What does the yellow indicate?

djr33
10-27-2012, 11:52 PM
the get code button seems pretty irrelevant at the moment and it's causing a lot more trouble than it's worth.That's true. I could disable it. But then it might be a problem later if I need to submit this (which I do). It's not really a "feature" at the moment-- it's a preview of the ability to submit it and also there for debugging.


Google chrome latest version on mac os x lion (yes, I got a macbook)Ah, I hope you're enjoying it. I'll install chrome, and make a point of starting to test this cross-browser-- opera, safari, chrome and FF.
Safari seems to be having the same issues as Chrome though.


Yeah, I meant that text goes onto a new line, however, spaces don't.I just don't see that as a problem. I don't think it can be fixed either though.


I don;t know if that's the same thing, but there appear to be quite a few things involving the get code button that result in not being able to edit anything.
I'll try and replicate and screenshot the issue. Ok. I'll keep trying too.

Edit--

yes, isn't there a developer tab that has to be enabled or some such in safari?Yeah, I found that for my latest post :)


It does seem like this is all about the submitting JS and running it problem. Weird. I'm researching solutions now. These may not actually be problems with my script, but with browser security.

bernie1227
10-27-2012, 11:58 PM
Crosspost/edit, sorry:


That's true. I could disable it. But then it might be a problem later if I need to submit this (which I do). It's not really a "feature" at the moment-- it's a preview of the ability to submit it and also there for debugging.

isn't that why we have the little view source button when you right click?


Ah, I hope you're enjoying it. I'll install chrome, and make a point of starting to test this cross-browser-- opera, safari, chrome and FF.
Safari seems to be having the same issues as Chrome though.

yes, it is very nice. I can replicate the issue on safari and chrome so far, haven't looked at opera.


I just don't see that as a problem. I don't think it can be fixed either though.

create a new element, press space until you hit the edge.

djr33
10-28-2012, 12:01 AM
http://stackoverflow.com/questions/1547884/refused-to-execute-a-javascript-script-source-code-of-script-found-within-reque

This seems to answer what's going on here. It is a browser security thing. In my opinion, it's really annoying. Aren't there better ways to stop XSS?

Is this persistent? If I submit the page, add a hidden serverside redirect, and then display the page, will it still block it?


Any ideas on how to solve this? I suppose I could filter out all of the JS from the submitted text for "get code" so that it's not submitted in the first place. Or, as a stupid workaround, I could just use base64encode() or something like that, so that the browser doesn't know it's submitting that code.


Isn't any competent serverside designer going to filter out XSS as required???



I'm tempted to use the nonstandard HTTP header mentioned in that discussion, but it's such an ugly workaround and there's no guarantee it'll work....

djr33
10-28-2012, 12:04 AM
isn't that why we have the little view source button when you right click?That's not the problem, though. See my post above. It's because there's "javascript" in the HTTP request, then sent back in the content of the page. Safari, Chrome (and others?) block any request that contains the same content as was submitted if that content includes any JS at all. It's much more trouble than it's worth, I think. See my post above.


yes, it is very nice. I can replicate the issue on safari and chrome so far, haven't looked at opera.
Good, glad to hear it. Ok, I'm going to see what I can do about Safari and see if it generalizes to the others.

create a new element, press space until you hit the edge. I understand. I've seen it do that. I just mean that I don't know if that's actually a problem-- is that bad? And I don't see any way to change this-- that's just how the browsers work.



as far as I can tell the only variable causing firefox to work and other browsers not to, is something to do with the fact that newly created elements are yellow in every browser but firefox. What does the yellow indicate?They're still yellow in Firefox. But they're 0px in height-- no content yet. So they have no visible background. If I change it to include default text it's yellow. (Ajrmrf found this bug earlier. I'm not sure how to fix it.)

The yellow indicates "active"-- it's just the background color changed through JS. I want to highlight the active area. I first tried using a border but that causes the elements to shift around by a few pixels. I was planning to revisit the "active" look later.

I believe the real difference here is that Firefox doesn't have this particular type of XSS "protection".

djr33
10-28-2012, 12:19 AM
Ok, sorry for all of the posts in a row, but there's just a lot of information.

I seem to have (at least temporarily) fixed that by adding just one line to the top of my page:

<?php header('X-XSS-Protection: 0'); ?>

It's a bad fix in my opinion, but it works for now and I can work around that differently later if necessary. For example, I could strip any JS from the POST content before sending the request, using JS. Then it won't ever become an issue.


Here's a new test page:
http://ci-pro.com/wysiwyg/demo2.php

Now, the important question: traq and bernie, is everything working on that page now that wasn't before? Are there any more issues at all? traq's problem (null) elements may still be relevant. I still haven't duplicated that one though.

If everything is solved with that fix, I'll leave it for now and move on to the rest. I can revisit the best way to actually solve the XSS security issue later.


Thanks for the help tracking that down. Now... on to the next steps.
By the way, this is going to be an excessively busy week for me, so I might not get too much more done for a bit. But I'll keep going when I have some free time!

bernie1227
10-28-2012, 12:22 AM
there is a post in this vbulletin thread about disabling xss in chrome:
http://www.vbulletin.org/forum/showthread.php?t=276212

the solution you had when we crossposted is detailed in the above link.


this is also very helpful in explaining why the xss protection is stiopping the javascript:
https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet

bernie1227
10-28-2012, 12:24 AM
Now, the important question: traq and bernie, is everything working on that page now that wasn't before? Are there any more issues at all? traq's problem (null) elements may still be relevant. I still haven't duplicated that one though.

sorry, but it's still returning the same errors in the console, and I am still able to replicate the effect of disabling the ability to edit anything.

djr33
10-28-2012, 12:32 AM
there is a post in this vbulletin thread about disabling xss in chrome:
http://www.vbulletin.org/forum/showthread.php?t=276212

the solution you had when we crossposted is detailed in the above link.


this is also very helpful in explaining why the xss protection is stiopping the javascript:
https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_SheetAlright. Those links support the use of the header, at least as a temporary fix, and they confirm that's what was going on. So for the moment it's fine.
In the end, I think I'll remove all onclick/onmousedown/etc attributes. That'll fix it, but it's not my focus at the moment


sorry, but it's still returning the same errors in the console, and I am still able to replicate the effect of disabling the ability to edit anything.
Ok, that's fine. Now I can debug them without worrying about the XSS nonsense. Thanks.

For a moment I thought I had fixed it. It seemed to be working. But now I can actually see the errors rather than just the "AHHH XSS" warning from before. Much easier to fix now... haha :D

bernie1227
10-28-2012, 12:39 AM
hang on, hold it right there, it appears to be working as far as I can tell now, you can do what I was doing to replicate the issue without a problem now, the only thing is, it takes two clicks to actually edit the first thing you click after you've created and clicked on a new element.

In short, it looks like it works now.

it appears the errors about parentNode and innerHTML are now replaced with:


Uncaught TypeError: Object false has no method 'replace' demo2.php:51

djr33
10-28-2012, 12:48 AM
Sorry, Bernie. I think you were testing it while I was fixing it. No magic changes, just new code ;)

But ok, I think it's working too. Same link, check to be sure. I can't find any more problems with it.

I'm also not getting the double click problem. Is that still happening? What should I do to replicate it?

bernie1227
10-28-2012, 12:55 AM
yep, no double click problem anymore, it's looking like it's working fine.

traq
10-28-2012, 01:34 AM
...Isn't any competent serverside designer going to filter out XSS as required???

lol, you had me rolling with that one. thanks for the laugh! :D

Your updates look good. I'm not experiencing the problem anymore. I'll keep playing with it.

djr33
10-28-2012, 01:38 AM
Ok, great. I'll keep posting updates as I have them. I'll make new demoN pages as needed in case you want to compare to the old versions.


traq, I wasn't suggesting there are no incompetent serverside desginers.... I was just pointing out that they're incompetent :D

djr33
10-28-2012, 05:35 AM
No relevant progress, but I made another thing for fun. I was trying to work out how to potentially do columns with a single paragraph of text would flow from one to the next in real time.
http://ci-pro.com/wysiwyg/columns.php

If you edit one, the others update too. But it's an illusion-- they're just three separate columns positioned each 600px apart (the height of the container). It works... kinda. But then the ends of the columns are chopped off at weird places. I have no idea if it would be possible to fix it with some sort of "chopping detection" in JS. Probably beyond me.

At this point I can't rely on CSS3 columns. So I think I'll have to just make the users manually move from one column to the next.

I'll get back to the main script when I have a little more time.

djr33
10-28-2012, 09:33 AM
Ok, I've added in some controls for bold and italics, which now include functional code for modifying the HTML in an element.

There's also a control to get the current node type (eg, P, UL, etc.) for the selection-- that's the first step in allowing an unbold or unitalic feature, by detecting what exists and what to remove as needed.

Demo:
http://ci-pro.com/wysiwyg/demo3.php

bernie1227
10-28-2012, 09:44 AM
the only suggestion I can make so far, is, simply for aesthetic purposes, rather than alerting the element, write it to an element? Also, could you make it so that you can unbold and un-italic the text?

djr33
10-28-2012, 09:47 PM
the only suggestion I can make so far, is, simply for aesthetic purposes, rather than alerting the element, write it to an element?That's just for working things out. Once it's reliable I'll be using that information for other things such as:

Also, could you make it so that you can unbold and un-italic the text?That's the next step. But I got stuck last night because it's hard to track whether text is bold at the moment. I intend to do it, but it'll take a little time. And unfortunately as this week begins I've got a few other commitments.

Updates soon!

jscheuer1
10-29-2012, 07:32 AM
Something else to check out in this vein:

http://www.dynamicdrive.com/forums/showthread.php?50020-textarea-using-ENTER

It starts out very simple but becomes a tutorial on how to do the sort of thing you're interested in.

bernie1227
10-30-2012, 09:13 AM
No relevant progress, but I made another thing for fun. I was trying to work out how to potentially do columns with a single paragraph of text would flow from one to the next in real time.
http://ci-pro.com/wysiwyg/columns.php

If you edit one, the others update too. But it's an illusion-- they're just three separate columns positioned each 600px apart (the height of the container). It works... kinda. But then the ends of the columns are chopped off at weird places. I have no idea if it would be possible to fix it with some sort of "chopping detection" in JS. Probably beyond me.

At this point I can't rely on CSS3 columns. So I think I'll have to just make the users manually move from one column to the next.

I'll get back to the main script when I have a little more time.
on the topic of that, I managed to dig up a stack overflow thread on the topic:
http://stackoverflow.com/questions/7400174/continuing-overflowed-text-in-a-different-div