Is there ANY WAY to make WYSIWYG-editor to allow your own coding? (28 posts)

  1. maisteriharju
    Posted 8 years ago #


    This is my last attempt to find information which propably doesn't exist.

    There are numerous posts about how WYSIWYG-editor (aka visual editor) changes the HTML- and CSS-tags but there seems to be no solution. Although it seems to be well known fact that visual editors add P-tags and remove DIV-tags and do all sorts of weird things to your coding, only solution I've found is "don't use the WYSIWYG-editor".

    It sounds simple solution but it isn't. Imagine that you are a web designer and you are making website for client who doesn't know HTML- and CSS-coding at all. You know excatly how to make the website which your client wants but WordPress WYSIWYG editor doesn't allow you to do that. Instead WYSIWYG editor window changes your website to something else. Now - if you turn the visual editor off as you propably have to do, you can write your codes as you want and it works. But after the website is ready and it's running you have to give the controls to your client who still doesn't know any HTML/CSS. Of course he needs to update the site and only thing he can do is to use the WYSIWYG-editor. I assume you can understand what happens next and you can propably understand that client won't be very happy with the results.

    So - here is my question. Is there ANY WAY to make visual editor NOT to change the code - leave to code you have written intact so to speak?



    Ps. Here some else also having this same issue:

    And few others also:






  2. harknell
    Posted 8 years ago #

    Uh, quick question: What client would want to add "code" to a site but be unable to understand how to do HTML? I'm not trying to be a smart ass, but what types of stuff are they trying to add in? Yes Divs and other things get pulled out by the Visual Editor, but why are they trying to put that in in the first place if they don't know how to use the stuff (and are incapable of using the Code editor)? Is it a case that they are writing things up in Word or DreamWeaver and want to export as HTML and copy and paste it into WordPress?

  3. Adam Brown
    Posted 8 years ago #

    harknell asks exactly what I was wondering. Maybe you could explain your situation differently?

  4. Len
    Posted 8 years ago #

    What the hell is someone who doesn't know anything about HTML or CSS doing running a website? Maybe they should stick to Blogger.

  5. You know excatly how to make the website which your client wants but WordPress WYSIWYG editor doesn't allow you to do that. Instead WYSIWYG editor window changes your website to something else. Now - if you turn the visual editor off as you propably have to do, you can write your codes as you want and it works. But after the website is ready and it's running you have to give the controls to your client who still doesn't know any HTML/CSS. Of course he needs to update the site and only thing he can do is to use the WYSIWYG-editor. I assume you can understand what happens next and you can propably understand that client won't be very happy with the results.

    Well, that's poor design then.

    Here's the thing, what *exactly* are you doing that "WYSIWYG editor doesn't allow"? Because what you type into the post content should never be more than:

    • straight text
    • links
    • images

    Simple as that, really. Any site/theme that does not work with what the wysiwyg editor produces is a poorly designed theme. The editor produces perfectly valid code if you don't try to do anything funky with it. Type text. Highlight things and make them italic or bold. Use the image button to add images. Use the link button to add links. What's so difficult about that?

    But the real question: What in the heck are you doing in the editor that requires disabling the visual aspects of it? Remember, your client is going to have to do whatever you're doing, so why in the world are you designing the site such that you have to do something funky there?

    So - here is my question. Is there ANY WAY to make visual editor NOT to change the code - leave to code you have written intact so to speak?

    No, there isn't. That's sort of the whole point. Your client isn't going to write any code in there, is he? So why would you want it to leave the code he inputs alone?

  6. maisteriharju
    Posted 8 years ago #

    Hmmm... My client doesn't want to add the code, he/them don't know anything about the code. I myself want to add the code because the layout is more complicated than just plain white empty area text on it. I have many different kinds of pages on the website I'm making. There are personel introduction with images and table structures with hovering, many kinds of presentations of the office they have and also there is plain text going in all sorts of ways. Then there is the news page which is why I chose the WordPress as CMS. The news page is mainly the page my client wants to update, which is no problem. It's the sort of thing WordPress is perfect for.

    Every now and then they need to update also other pages which have more complicated structures (or "poor design" as Otto42 called it). The HTML and CSS has been tested and is valid. When my client opens those pages to visual editor, those structures change and the layout is not the same anymore.

    To me and my client the website looks great and the site works well as a plain html/css website (I mean if it's running without WordPress). I can make it look ok with WordPress but it doesn't function well when you need to update the more complicated pages. If it's so that visual editor of the WordPress is the ultimate decision maker what's good design and what's poor design, then it's propably poor design. Dunno - go figure.

    Your client isn't going to write any code in there, is he? So why would you want it to leave the code he inputs alone?

    Yes, he/them will not write any code at all. But the pages they need to update are made of codes. My wild fantasy was that it would be easy for them to update the pages with WordPress. But I guess it ain't so - and the reason is also clear: the poor design.

    One question still bugs me. Why WYSIWYG-editor can't show the page as it is? I mean - why it has to change the code? I find it strange.

    - TH

  7. Adam Brown
    Posted 8 years ago #

    Ahhh, you're making sense now. Let me restate your problem as I understood it:

    Your client isn't writing new posts. (Well, maybe he is, but that's not the issue here.) Your client is updating pages (in the WP meaning of "page") that you wrote previously. But when you wrote them, you inserted markup using the code editor, but that markup disappears when the client opens the page in the visual editor. Is that the problem?

    Lots of people complain about the visual editor's "cleanup" functions, so let's not get into the debate here as to why it removes certain code. Instead, let's discuss the practical solution. Basically, it's the one Otto gave to you: Separate content from presentation.

    The best thing in this situation (assuming you stick with WP) is to go back and write the page entirely using the visual editor, like your client will do when he updates the page in future. Then, use your stylesheet (rather than code embedded into the post) to make that page look the way you want it. Alternatively, use a unique page template for the specific page in question (read more).

  8. Joni
    Posted 8 years ago #

    I kind of understand what he means. I have designed several web sites for different clients. They like to maintain their sites. I have a policy that if they break it after I've given it to them, I'll be happy to fix it. But it will cost.

    One client in particular likes to add his own page content. I've designed the site to use, in some cases, pullquotes. So that he can use pullquotes in his pages or posts if he wants to, I've simply added a button to the quicktags.js file and he uses the plain old WP editor. There's nothing on the plain editor that he can't use, he at least knows how to upload his own images and click the "Send to Editor" button, and he does quite a bit of posting of YouTube videos so the WYSIWYG editor just wasn't gonna fly.

    I thought this was a nice solution, tailor made to his needs. I have done this with other clients, just created a button that calls the stylesheet class (open/closed) and put it in the quicktags.js file and they love it.

    You might consider that depending on what function you are trying to implement. :)

  9. maisteriharju
    Posted 8 years ago #

    Thank you very much for advice. I didn't even know that you can have unique page templates. It's good news. It may be the solution to my problems. I try it or the other methods. Thanks!


    Ps. I still silently and very queitly wish to see visual editor which have on/off-option for the cleanup functions. :)

  10. Joni
    Posted 8 years ago #

    Well, I can see why it might be that way. Although now that WP is used more and more as a true CMS, it stands to reason that more people will be updating their own content, and that doesn't mean just posts anymore. If any anyone is going to do is create new posts or edit existing posts, the WYSIWYG editor is, as Otto said, all they should be using.

    But once they start stomping around on the back end, they better know what they are doing or know someone to call who does when (not IF, but WHEN) their site (or at least the design) blows up.

    I'm not sure why your page design is so problematic and why the design would change so drastically from one page to another without an example. But custom page templates might definitely be your answer.

    Good luck with the project.

    Oh, pshaw! Why do anything "silently" around here!? I doubt there are many "shrinking violets" on this board; no one here is shy! Go ahead, be loud and proud! :-)

  11. richarduk
    Posted 8 years ago #

    Download and instal the Advanced TinyMCE editor from: http://www.mkbergman.com/?page_id=383
    This will allow you to add Divs.

    A workaround is to go to Admin Panel / Users / Your Profile and untick Use the visual editor when writing

    OR try this:
    1. Open the file called tiny_mce.js located in the wp-includes\js\tinymce folder
    2. Goto line 130 - look for this: `this._def("extended_valid_elements", "");
    3. Change it to this: this._def("extended_valid_elements", "div[id|class]");`
    Thanks to Scott Bernadot in a comment at: http://urbangiraffe.com/plugins/disable-wpautop/

    OR try this plugin: Disable WPautop at http://urbangiraffe.com/plugins/disable-wpautop/

    OR (not recommended) you can change the tiny_mce_config.php file

    Change 'p/-div[*]
    to 'p[*],-div[*]

    '-'means remove empty elements
    'p/div' means replace div by p
    '[*]'means any attribute allowed
    With thanks to: Xzeed at http://wordpress.org/support/topic/139510

  12. redsalmon
    Posted 8 years ago #

    i'm with maisteriharju. stripping out divs classes and ids is a pain.

    I edit people's blog posts, i want to be able to use tinymce editor (code view) in admin mode to add a little style to vanilla text n pics.

    Advanced editor is not an option as this gives punters too much opportunity for 'overdesign' (and they have to figure out all the buttons). i have to clean it up.

    my punters dont have the knowledge to code html so they are not going to add erroneous code. they are unlikely to move from pure wysiwg.

    but i need to work on their entries via the code view. what's the problem with that?

    Anyway thanks richarduk, i tried changing tiny_mce.js and tiny_mce_config.php.

    i can use divs now, but attributes are still stripped out, something else at work here (WP 2.3.2)?

  13. richarduk
    Posted 8 years ago #

    Upgrade to 2.5?

    Theoretically that's meant to be better at letting users insert their own code etc.

  14. ceilidhdad
    Posted 8 years ago #

    There are many good reasons why there should be an option to turn off the visual editor's revision of code, not the least of which is that designers of code generators cannot possibly anticipate everyone's needs.

    WP's code "clean-up" (frequently "mess-up") was a problem even before using WP as a CMS, which I have begun to do recently (with some reservation). I too would like to design pages and templates that require somewhat more complicated code, but that can later be edited by the user in the visual editor. This is *mostly* possible, until the editor, in its mysterious way, decides that it doesn't like something. And sometimes the "clean-up" even removes code, such as carriage returns, that are entered through the visual editor.

    WP provides a lot of flexibility - defense of such a defective editor (and insulting people who are essentially reporting a major bug) instead of seeking solutions is unfortunate. Version 2.5.1 doesn't seem much better to me, and I'm hoping that in the future there will be the possibility of turning off the clean-up function entirely while maintaining the visual editor (many of us know code better than the visual editor does).

    One other issue: when one follows good code formatting practices, the WP editor completely undoes it and makes code much harder to read.

  15. flick
    Posted 8 years ago #

    I thoroughly agree with ceilidhdad here. I am no high-and-almighty web-standards person, but I do check that my work is of a good standard format, so I do find it annoying when the visual editor decides to change it to what it thinks is better.

    WYSIWYG editors are notoriously bad for sometimes making inappropriate changes, and although I love WordPress and think they've got a lot of things right (setting the gold standards for quite a few other scripts) there is always room for improvement for the WYSIWYG editor. I would also welcome an on-off button as originally suggested by maisteriharju.

  16. lilqhgal
    Posted 8 years ago #

    I posted on another post but have to add my $0.02 here as well. I agree that we should be able to edit a post/page's html without it being edited as it is currently (and I'm running 2.5.1). I design the site and insert the code I want into the post/page using the HTML view, and if the client wants to make a simple edit change to the text, if he for example wants to add several spaces in a row, by using the visual editor and hitting the "return" button (to generate page breaks) 2 or 3 times he gets absolutely nothing. So if I go into the HTML and actually place
    tags where he wants his page breaks, it STILL strips them, and, to me, this is completely unacceptable. I'm not trying to add some unGodly piece of html scripting or coding. Simple page breaks or new paragraphs are stripped and this is ridiculous.

  17. Juniper Webcraft
    Posted 7 years ago #

    lilqhgal, I share your exasperation, but I think the particular example you cite falls into the realm of styling, not markup. Most clients want to edit their web pages as though they were Word documents, i.e. applying arbitrary styling at whim. Although there's always the temptation to just throw up my hands and let them make a mess of my hard work, I do try to educate them instead. In your example, I would want to find out why the client wanted the extra vertical space at that location, express it as a rule, debate its value , see if there's an existing style rule that would equally satisfy the client's purpose and if not incorporate it into the style guide for the entire site and add the new rule to CSS and whatever necessary classes to the markup. That's the ideal scenario in my view. It puts an admittedly aggravating hurdle in the way of the client mucking around with the look and feel of the website and helps them get their money's worth out of the design job. The client gets a site that communicates their message and maintains its aesthetic and technical integrity.

    That said, I agree completely about how frustrating TinyMCE is in second-guessing existing markup and imposing its own crappy rules. I'm torn between spending the time necessary to bend TinyMCE to my will (or to find out whether it's sufficiently and specifically bendable) or writing my own damn editor.

    There's no way around it: web work is a technical pursuit. I know graphic designers who like to approach web design as a purely artistic endeavor. Page design in the abstract might be purely artistic, but web design, like print design, is also technical. A competent web designer can't be ignorant of the rules of markup and styling any more than a competent architect can be ignorant of building techniques and materials. A corollary to this is that we can't hand a website over to a non-technical client to edit until we have a visual editor that obeys the particular rules of each site's structure, markup, and styling.

    An alternative, as suggested above, is to separate content from markup and styling, but this ideal isn't truly possible using WordPress unless you route all content through your own plugins with input fields that don't permit styling and markup. If you're going to go to that much work, it becomes questionable whether the WordPress engine remains a large enough share of the final product to justify its use.

    Sorry to sound so negative -- I'm using WordPress as a CMS and grumbling because it's not what it was never intended to be. Mea culpa. I'm able to do really good work with WordPress but my pride is the pride of someone who's managed through great effort to use a wrench to hammer in a screw.

    Nice wrench, though!


  18. 1stAngel
    Posted 7 years ago #

    I am a none techy person. I run three main popular sites and have just put on the WPMU which is absolutely amazing, but the lack of an off switch to the editor is SO annoying and has stopped me being able to do what I want to the site as a whole.

    I want to iframe something,.... I cant, it strips it. I want to put some paypal buttons in a sidebar widget... I cant it strips them. Why? Why cant I make a page with the paypal buttons on?

    I adore WordPress and use it and Xoops to make up an excellent site, but the html stripping is a massive bugbear, especially when no, I am not a super coder... and why SHOULD I use Blogger as the previous writer said?

  19. Why? Why cant I make a page with the paypal buttons on?

    Are you the admin of the site? Or just an author, or something like that?

    WordPress has a capability called "unfiltered_html" which normally only the administrator gets. If you are not the administrator, then you don't get that ability, and your code gets filtered.

    Why? Because the ability to write unfiltered code might give you the ability to hack the site. Really. So you are filtered unless you a are trusted user.

    Note that admins can do anything they please. Switch to the HTML tab, put in whatever the heck you want, save the post. Your HTML will stay there.

  20. 1stAngel
    Posted 7 years ago #

    As I said that I run the three sites I thought it was clear that I am total admin. Sorry.

    I have switched on the html tab... I have turned off my editor... it strips my code.

  21. Well, then you've changed something, because it does not do that for admins by default.

  22. 1stAngel
    Posted 7 years ago #

    I havent changed anything at all. This was before I even put the plugins on. Well I have added plugins now.

  23. nickjensen
    Posted 7 years ago #

    Otto42, I have to agree with 1st angel. I'm an admin. I ad code in html view. If I (or any other user with sufficient priveleges) switches back into visual mode while editing the post, it strips the code that was entered via html mode.

    to further complicate the discussion, even if we were to strip all the formatting from the visual editor with the exception of a few specified inline styles, we still have another major problem:

    If, for example, I use the visual editor in firefox and save the post, I will get final post/page that displays differently than if I had used the visual editor and saved the post from within IE. I have tested this myself on FF/IE in both PC and Mac environments across a few different sites.

    Just to clarify, I'm looking at the final page in both IE and FF afterward... Ie, I edit the page in FF, save, and refresh the output in FF. If I go into IE and edit the page, save, then go back to the output in FF and refresh, the page layout spacing changes.

    wordpress is fantastic, but the issues that many people are having with the implementation of the editor (regardless of whether it's wordpress or TinyMCE's fault) is really, really irritating.... If I add up the time I've lost due to issues with the visual editor, it's probably DAYS!

    Is there no way to implement this better? At the very least, the documentation is sparse re: how wordpress implements TinyMCE and how to modify it's behaviour.

  24. nickjensen
    Posted 7 years ago #

    Forgot to add:

    I totally support the view of maisteriharju in his original post. This is a major issue for me. In fact, I think it's a critical issue for wp's future, because it directly impacts the user experience for the web designer's client, who just wants to simply enter some information, add a few bits of formatting, and not have to worry about breaking the layout.

  25. ramedia
    Posted 7 years ago #

    You can add my previous post to this list:

    Where is the admin privilege that allows the insertion of raw code? The default is to use wpautop to rewrite code. That is in the core, and can't be overridden by the wysiwyg editor.

  26. ramedia
    Posted 7 years ago #

    I did find this:
    Text Control

    It allows you to choose what code rewriting "engine" is used on the per case basis. Seems like the best solution I've found for this issue. Disabling wpautop isn't going to work, and changing the editor doesn't work either.

  27. matstillo
    Posted 7 years ago #

    I'm just adding my support to maisteriharju on the whole issue for the visual editor. After initial tinkering, WordPress had seemed to be the ideal solution for me to be able to deploy sites for clients with a built in CMS capability.

    As I was initially doing my tinkering in HTML mode I did not appreciate the massive shortcomings of the visual editor. Initially I was pleased to see that such an interface was available but now, after trying to work around the stripping of the code, regardless of which mode you are in, & trying to gloss over the glaring 'bugs' as the clients see them, I am beginning to to think that my time would have been better spent just teaching my clients basic HTML.

    I agree totally with 'Juniper Webcraft' that we should be incorporating as much of the possible required styling in css, but that is surely going to just leave all of these problems with the interface exactly as they are. I am having even basic paragraph tags removed, which doesn't leave you with much faith of your styling being picked up anyway!

    I have read a few moderator posts saying to stop moaning & just turn off the visual editor, but how crap a solution is that? I can see the potential for WordPress to be a fantastic & accessible solution for clients & people who aren't interested in being as techie as most of us, but by shutting them out, or worse, scaring them away with what in their eyes looks like an unstable solution for their website, is just bad sense. It's a huge problem I'm surprised WP are not taking more seriously.

    Anyway, I have to go now, to write guidance notes for a client to walk them through basic functions in the visual editor & for how to avoid it all going wrong on them!

    PS. The Advanced TinyMCE editor has improved the situation greatly, but not only is is not perfect, but I do not want to have to send out a site that relies on too many plugins for what should be basic functionality.

    Any news on solutions in the pipeline in future releases? I have every faith in WordPress that the problem will be repaired beyond reproach & we can all go home for tea & medals & look back and laugh at all this.

  28. Systematic Abstraction
    Posted 7 years ago #

    Note that admins can do anything they please.

    Nope. PHP is stripped out, and I'm an admin. I rarely want to put PHP in, but when I do it can be aggravating to find an alternative solution.

Topic Closed

This topic has been closed to new replies.

About this Topic