Create a WYSIWYG editor (embedded)?

[traq]

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]

I see you can't add a blank line by itself. Is there any particular reason for that?

Edit:
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]

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.

Edit:
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]

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]

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

Edit:
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.

Edit:
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 wrap

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.

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]

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]

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.

Edit:
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.

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

Edit:
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]

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]

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]

http://stackoverflow.com/questions/1...d-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....