Jump to content
Kae

Issues with tinymce

Recommended Posts

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

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Yep. I can believe that

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By prestoav
      Hi all and thanks for the great work on PW!

      One thing I find I have to do on any new site is add the Justify plugin to textarea fields as it is such a widely required feature for text headings in content.

      ANy chance this could be added to the core an automatically be installed on new textarea fields using CKEditor?

      Thank you!
    • By louisstephens
      So, I am not even sure if this is possible, but I thought I would ask anyway. I was building a "system" that would make some modals (izimodal) using a few fields. A user would select the color combo they want, enter a title, fill out the body, and then I was going to pass this (in the template) to fill in the modal. I have this all working pretty flawlessly.
      <div id="example-modal" class="model" data-izimodal-autoopen data-izimodal-transitionin="fadeInDown" data-izimodal-iframeURL="<?php echo $page->example->url; ?>"></div> <script type="text/javascript"> $("#ca-entrance-modal").iziModal({ title: 'Custom Title Here', subtitle: '', headerColor: 'Custom Color Here', history: false, iframe : true, fullscreen: false, loop: false, width: 350, iframeHeight: 350, top: null, bottom: null, borderBottom: false, closeButton: true, }); </script> However, I have hit a road block. The modals are using iframes to pull in the corresponding modal page, but the javascript options are not being iframed (so the modal will actually launch etc). My thought was the user can just copy the page link to the modal, and insert it into the iframe and simply adding the js code, the modal would work (which it does).
      I guess here is my actually problem. Since the user is selecting several options to "customize" the modal, the javascript is custom and differs between each modal. Is there a way to "disable" a textarea, and output the "custom" javascript inside the textarea so they can copy it for inclusion on their actual pages?
       
      Or, is this something that I should just output in the frontend view for users.
    • By kalimati
      I am using sanitizer->textarea to sanitize and format the message inputted. I've tried various options including newlineReplacement but have been unable to convert newlines to <br> tags. Although the PHP nl2br function works as expected. Any suggestions?
      Thanks.
    • By Barry
      I'm trying to write a value to a textarea via de API. I'm making use of the Multivalue Textformatter module which works great for when the field has multiple rows added via admin.
      But now I'm trying to add multiple lines to the textarea via the API and I cannot for the life of me figure, or find out how to do this.
      I'm adding
      "&#13;&#10;" to the end of of each new line. When I apply this value to a textarea in the template, this works fine, but when I
      $line = "this is a line"; $p->textarea = $line."&#13;&#10;" I just get "this is a line &#13;&#10;". This is the case with the "/n" and "<br>" as well.
      Turning on tinyMC doesn't help either as the output in the template is still the same. Turning on the HTML Encoder doesn't help either.
    • By MilenKo
      Hello all.
      I am working on a Cooking Recipes profile and have a field recipe_nutrition where I add the nutritional values in a textarea field like:
      Calories: 2000kj
      Fat: 10gr
      Carbohydrate: 10gr
      Protein: 50gr
      Vitamin C: 10mg
      Iron: 20mg
      So I am using the explode function to separate the lines and it works fine (if I am just styling the values as text list), but now I would like to take the text content before and after the colon and add them in a table. Also I need to find first the line that contains Calories and print the value in frontend. As far as the lines are not added in a specific order, the Calories: 2000kj could be first, second, third line etc. 
      In the perfect scenario the line should be checked for a specifict text (in my case Calories) and if it contains it to get the text after the : sign. 
      Maybe there is a better approach to using API and modules to achieve a simple Nutrition table with all the values without creating a field for every value but grabbing it from a text content or else? Check the image for better understanding of the goal.

×
×
  • Create New...