Forums

HTML5 and TinyMCE - Anyone figured out how to add new tags yet?

Permalink
Hi,
This is my first post. I just started working with Concrete5. So far everything is pretty easy. I have started porting my HTML5 theme to a Concrete5 theme. The problem though is that when I add HTML5 tags in the HTML view of TinyMCE they are removed and also there are extra <p> tags added. For example I can add <section> or <aside> tags without them being removed on save.

For example I tried to paste this code:
<!-- START GRID COLUMN-->   
                  <section class="c-3-12">
                     <!-- START .about-us widget-->
                     <div class="g widget ">
                        <h3 class="title ">Links list</h3>
                        <ul class="list no-link-color">
                           <li><a href="#">List item</a></li>
                           <li><a href="#">Lorem ipsum</a></li>
                           <li><a href="#">Vivamus condimentum</a></li>
                           <li><a href="#">Mauris diam</a></li>
                        </ul>                        
                     </div>
                     <!-- END/ .about-us widget-->
                  </section>
                  <!-- END/ GRID COLUMN-->


and it returns this code with the section tags replaced with empty p tags

<!-- START GRID COLUMN-->
<p> </p>
<!-- START .about-us widget-->
<div class="g widget ">
<h3 class="title ">Links list</h3>
<ul class="list no-link-color">
<li><a href="#">List item</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Vivamus condimentum</a></li>
<li><a href="#">Mauris diam</a></li>
</ul>
</div>
<!-- END/ .about-us widget-->
<p> </p>
<!-- END/ GRID COLUMN-->


Can anyone help me?

Thanks in advance,

Justin
 
Mnkras replied on at Permalink Best Answer Reply
Mnkras
In the dashboard you can customize tinyMCE.

To disable the <p> tags take a look at this:
http://www.tinymce.com/wiki.php/Configuration:force_br_newlines...

For the html5 Tags use this config
// Schema is HTML5 instead of default HTML4
        schema: "html5",
        // End container block element when pressing enter inside an empty block
        end_container_on_empty_block: true,
        // HTML5 formats
        style_formats : [
                {title : 'h1', block : 'h1'},
                {title : 'h2', block : 'h2'},
                {title : 'h3', block : 'h3'},
                {title : 'h4', block : 'h4'},
                {title : 'h5', block : 'h5'},
                {title : 'h6', block : 'h6'},
                {title : 'p', block : 'p'},
                {title : 'div', block : 'div'},
                {title : 'pre', block : 'pre'},
Viewing 15 lines of 22 lines. View entire code block.


Hope this helps

Mike
jsprad replied on at Permalink Reply
Thank you. I tried to choose custom mode in the "Rich Text Editor" but then I loose all of the other toolbars. The "Simple" mode is all I need is there any way to extend that tinyMCE theme?

I tried to copy the content block to the /siteroot/blocks/content folder and update the editor_config.php like this post saidhttp://www.concrete5.org/documentation/how-tos/developers/extend-th... Maybe I am being dense but that didn't seem to do anything at all.

Can you tell me how to extend the simple theme to paste in this code so I won't loose changes on upgrades?

Thanks!
Justin
jsprad replied on at Permalink Reply
Disregard, the earlier message, I was able to get the custom to show the toolbars like the simple theme.

However I see a different problem. It looks like my default installation of Concrete5 5.5 ships with tinyMCE version 3.4.6, but the schema option doesn't appear in tinyMCE until 3.5b1http://www.tinymce.com/develop/changelog/?ctrl=version&act=view...

To get this to work, I just downloaded the latest version of tinyMCE 3.5b3 and pasted it over the files in /concrete/js/tiny_mce. I also had to flush my browser cache to get it to start working.

Thanks for the help.
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
You should make mnkras answer as best answer so that other people get help from that.

Rony
laweffect replied on at Permalink Reply
laweffect
Thanks for this. However, when I paste the code for HTML5 tags into the custom field I loose all the other toolbars within the editor.

Anyone know why this could be?

Leigh