Create a WYSIWYG editor (embedded)?

Printable View

Show 40 post(s) from this thread on one page

10-24-2012, 03:30 PM
djr33

Create a WYSIWYG editor (embedded)?

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.
10-24-2012, 06:25 PM
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.
10-24-2012, 07:17 PM
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
10-24-2012, 07:50 PM
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(+)++
10-24-2012, 07:51 PM
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):

Code:

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 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/
10-24-2012, 07:59 PM
djr33

Quote:

Originally Posted by 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(+)++

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.
10-24-2012, 09:09 PM
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.
10-24-2012, 11:19 PM
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.
10-24-2012, 11:55 PM
bernie1227

Quote:

Originally Posted by djr33;285366
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: [url

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

Google hosts the project as well.
http://code.google.com/p/wmd/
10-25-2012, 12:16 AM
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?
10-25-2012, 12:57 AM
bernie1227

You may also like to look at these:
tinyMCE
CKeditor
Or try and find out how the vbulletin wysiwyg works.
10-25-2012, 12:53 PM
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.
10-25-2012, 03:48 PM
djr33

Quote:

Originally Posted by Bernie

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.

Quote:

Originally Posted by KB

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.

Quote:

Originally Posted by Bernie

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.
10-25-2012, 07:11 PM
bernie1227

Quote:

Originally Posted by djr33

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
10-25-2012, 11:01 PM
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!
10-26-2012, 12:43 AM
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).
10-26-2012, 02:09 AM
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.
10-26-2012, 03:49 AM
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.

Code:

/** @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 Hello [b]Hello[/b] Italics Hello [i]Hello[/i] Underlined Hello [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>/gi, "[b]$1[/b]"], [/(.*?)<\/strong>/gi, "[b]$1[/b]"], [/(.*?)<\/i>/gi, "[i]$1[/i]"], [/(.*?)<\/em>/gi, "[i]$1[/i]"], [/(.*?)<\/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, " "], [/\[b\](.*?)\[\/b\]/gi, "$1"], [/\[i\](.*?)\[\/i\]/gi, "$1"], [/\[u\](.*?)\[\/u\]/gi, "$1"], [/\[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.
10-26-2012, 04:05 AM
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.
10-26-2012, 05:41 AM
traq

Quote:

Originally Posted by djr33

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

mm... unfortunately, you're probably right.
10-26-2012, 09:20 AM
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.
10-26-2012, 02:33 PM
djr33

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

Cheaters. :)
10-26-2012, 03:37 PM
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 , <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.
10-27-2012, 02:39 AM
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 . 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.
10-27-2012, 03:18 AM
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?
10-27-2012, 03:25 AM
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.
10-27-2012, 03:32 AM
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.
10-27-2012, 03:33 AM
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
10-27-2012, 03:50 AM
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.
10-27-2012, 04:16 AM
traq

Quote:

Originally Posted by djr33

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.
10-27-2012, 05:31 AM
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.
10-27-2012, 09:53 PM
bernie1227

console error when get code is clicked:

Quote:

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

Quote:

Originally Posted by 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

Quote:

Originally Posted by traq

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

Quote:

Originally Posted by bernie1227

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

Quote:

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

Quote:

Originally Posted by bernie1227

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.

Quote:

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.

Quote:

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.

Quote:

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.
10-27-2012, 11:41 PM
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.
10-27-2012, 11:42 PM
bernie1227

Quote:

Originally Posted by djr33

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.

Quote:

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)

Quote:

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.

Quote:

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:

Quote:

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

Quote:

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.

Quote:

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.

Quote:

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.

Quote:

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

Quote:

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.
10-27-2012, 11:58 PM
bernie1227

Crosspost/edit, sorry:

Quote:

Originally Posted by djr33

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?

Quote:

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.

Quote:

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.
10-28-2012, 12:01 AM
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....

Show 40 post(s) from this thread on one page