Issues with tinymce

[Kae]

Hey, guys!!!

I'm having a very big problem with Tinymce in processwire. I feel so stupid about it, but can't find the solution. Hope someone can help me.

When I change to html and paste html tags inside a <code> tag, they get converted and disapear. How can I avoid this?

All Iwanted was to show some code examples. I feel so noob right now '-'

Thank you =)

[LostKobrakai]

It's a bit since I last used code tags, but if I remember correctly you should use <code> in conjunction with <pre>, like this: 

<pre>
  <code>
    [code-snippet]
  </code>
</pre>

Maybe this helps.

[Joss]

Part of the problem with using something like Code tags in this way is that you have to switch to HTML to do it - I always think that that undermines the idea of using a WYSIWYG editor in the first place, really.

Have a look at this link:

http://stackoverflow.com/questions/7153599/add-code-button-to-wordpress-tinymce

It is a bit old, but it might offer a better way around your problem. There is also a link to a plugin that does it for you. Haven't tried it, though.

You should also make sure that you are using a custom stylesheet for TinyMCE so that it displays code in the same way as on the front end of your site, of course. 

This also looks quite fun:

http://lab.nomadonweb.com/en/sh4tinymce

It uses SyntaxHighlighter 3 by Alex Gorbachev

[Kae]

Hey, LostKobrakai. Thank you for your quick answer! I already tried that, with or without TInymce enabled and It didn't work. <p> tags were always converted. Joss, thank you too. I'll take a look at those links now and tell you here what I found out (sh4tinymce looks awesome). Could you tell me why, even using <pre> and <code> whith Tinymce disabled some html like <p> and <div> gets converted?

[Joss]

In the TinyMCE settings that are on the input tab of the field, you have to allow tags to be used and also things like the style attribute. I cant remember what is in the default installation, but it is fairly basic - it is easier to add things than have to strip out loads of things that you would rather your users did not get their hands on!

For instance, this is the settings I use when I want to have a few more bits like right click context menu and stripping formatting when pasting. Also adds a style drop down:

buttons 1

 

formatselect,styleselect,fontsizeselect,|,bold,italic,justifyleft,justifycenter,justifyright,justifyfull,forecolorpicker,|,bullist,numlist,|,link,unlink,|,image,|,code,|,fullscreen,spellchecker

 

block formats

 

p,h1,h2,h3,h4,blockquote,pre,code

 

Plugins

 

inlinepopups,safari,table,media,paste,fullscreen,preelementfix,contextmenu

 

Valid Elements - note, to enable things like font color, size and face, you must use span and NOT font!

 

@[id|class|style],a[href|target|name],strong/b,em/i,br,img[src|id|class|width|height|alt],ul,ol,li,p[class],h1,h2,h3,h4,blockquote,-p,span[face|size|color],-table[border=0|cellspacing|cellpadding|width|frame|rules|height|align|summary|bgcolor|background|bordercolor],-tr[rowspan|width|height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope],#th[colspan|rowspan|width|height|align|valign|scope],pre,code

 

Content CSS

 

/site/templates/css/editor.css

 

 

Additional Settings

 

paste_text_sticky: true

paste_text_sticky_default:true

theme_advanced_styles:Lead=lead;IconCell=iconcell;Blueheader=blueheader

 

Third party plugins

 

spellchecker : /site/tinymce/myplugins/spellchecker

 

 

[Kae]

Joss, can you believe I wasn't seeing changes because somehow things were cached in the browser? I cleaned it, it worked. I tried my phone and it was working '-' . Thank you for your help.

[Joss]

Yep. I can believe that