Developing (v7+)

How to get tinymce typography.css styles in the dashboard?

Permalink 3 users found helpful March 14, 2012 at 6:06 PM

I'm working on a site where I'm going to be using composer for several of the page types and I'm running into a slight problem. The content needs several custom styles available in the drop down and should preview with the proper typography.css from my theme but it doesn't because it's composer.

I'm wondering what the best practice is here, or how to do this? I looked in the editor configs and inits for tinymce and I don't see anywhere that it's specified what the typography.css file should be so I don't know where it's being linked.

hereNT replied on Mar 14, 2012 at 6:26 pm Permalink Best Answer Reply

What ended up working is this:

if (!is_object($theme)){
     $theme = PageTheme::getSiteTheme();
}
[code]
To get the page theme, then further down in the editor configs:
[code]
content_css : "<?php echo $theme->getThemeEditorCSS()?>",

I'm not sure if there's a better way to do this. It seems to me like the main editor config should do this by default so that you have the proper styles from your theme wherever you are using it.

foster replied on May 9, 2012 at 12:20 pm Permalink Reply

I have run into the same problem, and I am glad that you solved it!
What file does this code go in?

hereNT replied on May 9, 2012 at 12:24 pm Permalink Reply

That was in elements/editor_config.php. It looks like the code block didn't parse correctly, that should be two blocks of code. I copied the file from /concrete/elements/editor_config.php to the outer elements folder to do the override.

foster replied on May 9, 2012 at 3:30 pm Permalink Reply

Awesome! That worked perfectly. I wonder why that isn't in the core functionality?

Thanks!!!!

hereNT replied on May 9, 2012 at 4:06 pm Permalink Reply

Not a clue why it's not in the core, it seemed like a pretty important thing to have working for my client.

foster replied on May 9, 2012 at 4:12 pm Permalink Reply

Mine too. I just hope it doesn't open unforeseen issues... I'm assuming that you haven't seen any negative repercussions since March when you first posted this?

hereNT replied on May 9, 2012 at 4:15 pm Permalink Reply

Nobody has mentioned anything about it to us, I can't think about any way that it would interfere with anything else.

foster replied on May 9, 2012 at 4:34 pm Permalink Reply

Awesome. Thanks again for the code snippet and the super fast response time!

okapi replied on Jul 8, 2012 at 1:59 am Permalink Reply

Can you please tell me where exactly that snippets has to be inserted in the elements/editor_config.php copy?

foster replied on Jul 9, 2012 at 10:11 am Permalink Reply

If you haven't made any other changes to the editor_config.php file, you can try and placing the entire code block below in to a new file called editor_config.php in your elements folder.
Make sure it is in the elements folder, and not in the concrete/elements folder - that way you will have the original if things go wrong.

Also, you can use this code to see where hereNT was directing us to put the code snippets. It took me a little while to figure it out - so hopefully this will save you and maybe others some time.

-Foster

<?php 
$textEditorHeight=intval(Config::get('CONTENTS_TXT_EDITOR_HEIGHT'));
$textEditorWidth = '100%';
//else $textEditorWidth=  $textEditorWidth;
if($textEditorHeight<100)  $textEditorHeight=380;
else $textEditorHeight= $textEditorHeight-70;
if (!isset($editor_selector)) {
   $editor_selector = 'ccm-advanced-editor';
}
if (isset($editor_height)) {
   $textEditorHeight = $editor_height;
}
if (isset($editor_width)) {
   $textEditorWidth = $editor_width;
}

Viewing 15 lines of 94 lines. View entire code block.

 
 
<?php 
$textEditorHeight=intval(Config::get('CONTENTS_TXT_EDITOR_HEIGHT'));
$textEditorWidth = '100%';
//else $textEditorWidth=  $textEditorWidth;
if($textEditorHeight<100)  $textEditorHeight=380;
else $textEditorHeight= $textEditorHeight-70;
 
if (!isset($editor_selector)) {
   $editor_selector = 'ccm-advanced-editor';
}
 
if (isset($editor_height)) {
   $textEditorHeight = $editor_height;
}
 
if (isset($editor_width)) {
   $textEditorWidth = $editor_width;
}
 
if (!isset($editor_mode)) {
   $txtEditorMode=Config::get('CONTENTS_TXT_EDITOR_MODE');
} 
 
if (!is_object($theme)){
     $theme = PageTheme::getSiteTheme();
}
 
else {
   $txtEditorMode = $editor_mode;
}
 
?> 
<script language="javascript">
$(function() {
   tinyMCE.init({
      mode : "textareas",
      width: "<?php echo $textEditorWidth?>", 
      height: "<?php echo $textEditorHeight?>px",    
      inlinepopups_skin : "concreteMCE",
      entity_encoding: 'raw',
      theme_concrete_buttons2_add : "spellchecker",
      relative_urls : false,
      document_base_url: '<?php echo BASE_URL . DIR_REL?>/',
      convert_urls: false,
      content_css : "<?php echo $theme->getThemeEditorCSS()?>",
      <?php 
      if( $txtEditorMode=='CUSTOM' ){ ?>
         //theme : "concrete",
         <?php 
         $code = Config::get('CONTENTS_TXT_EDITOR_CUSTOM_CODE').'';
         if ($editor_selector != 'ccm-advanced-editor') {
            $code = str_replace('ccm-advanced-editor', $editor_selector, $code);
         }
         print $code;
      }elseif($txtEditorMode=='ADVANCED'){ ?>
          plugins: "inlinepopups,spellchecker,safari,advimage,advlink,table,advhr,xhtmlxtras,emotions,insertdatetime,paste,visualchars,nonbreaking,pagebreak,style",
         editor_selector : "<?php echo $editor_selector?>",
         theme : "advanced",
         theme_advanced_buttons1 : "cut,copy,paste,pastetext,pasteword,|,undo,redo,|,styleselect,formatselect,fontsizeselect,fontselect",
         theme_advanced_buttons2 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,anchor,|,forecolor,backcolor,|,image,charmap,emotions",
         theme_advanced_buttons3 : "cleanup,code,help,charmap,insertdate,inserttime,visualchars,nonbreaking,pagebreak,hr,|,tablecontrols",
         theme_advanced_blockformats : "p,div,address,pre,h1,h2,h3,blockquote,cite",
         theme_advanced_fonts : "Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats",
         theme_advanced_font_sizes : "1,2,3,4,5,6,7",
         theme_advanced_more_colors : 1,                  
         theme_advanced_toolbar_location : "top",
         //theme_advanced_styles: "Note=ccm-note",      
         theme_advanced_toolbar_align : "left",
         spellchecker_languages : "+English=en"
      <?php  }elseif($txtEditorMode=='OFFICE'){ ?> 
         editor_selector : "<?php echo $editor_selector?>",
         spellchecker_languages : "+English=en",
         theme : "advanced",
         plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras", //,template,imagemanager,filemanager",      
         theme_advanced_buttons1 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,undo,redo,|,styleselect,formatselect,fontselect,fontsizeselect,", //save,newdocument,help,|,      
         theme_advanced_buttons2 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,anchor,image,cleanup,code,|,forecolor,backcolor", //
         theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,insertdate,inserttime,|,ltr,rtl,", //
         theme_advanced_buttons4 : "charmap,emotions,iespell,media,advhr,|,fullscreen,preview,|,styleprops,spellchecker,|,cite,del,ins,attribs,|,visualchars,nonbreaking,blockquote,pagebreak", //insertlayer,moveforward,movebackward,absolute,|,|,abbr,acronym,template,insertfile,insertimage      
         theme_advanced_blockformats : "p,div,address,pre,h1,h2,h3,blockquote,cite",
         theme_advanced_fonts : "Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats",
         theme_advanced_font_sizes : "1,2,3,4,5,6,7",
         theme_advanced_more_colors : 1,            
         theme_advanced_toolbar_location : "top",
         theme_advanced_toolbar_align : "left",      
         theme_advanced_statusbar_location : "bottom",
         //theme_advanced_styles: "Note=ccm-note",      
         theme_advanced_resizing : true            
      <?php  }elseif($txtEditorMode=='BASIC'){ ?> 
         editor_selector : "<?php echo $editor_selector?>",
         spellchecker_languages : "+English=en",
         theme : "simple",
         plugins: "paste,inlinepopups,spellchecker,safari,advlink",
      <?php  }else{ //simple ?>
         theme : "concrete", 
         plugins: "paste,inlinepopups,spellchecker,safari,advlink,advimage,advhr",
         editor_selector : "<?php echo $editor_selector?>",
         spellchecker_languages : "+English=en"      
      <?php  } ?>
   });
});
</script>

okapi replied on Jul 9, 2012 at 11:56 am Permalink Reply

Thank you very much, Foster!
I can see now where the snippet has to be added, but where has the second part of the code to go?

content_css : "<?php echo $theme->getThemeEditorCSS()?>",

Michael

foster replied on Jul 9, 2012 at 12:28 pm Permalink Reply

In my editor the two snippets begin at line 24 and at line 45
The "content_css" snippet goes right after the line that starts with "convert_urls:"

okapi replied on Jul 9, 2012 at 1:23 pm Permalink Reply

Thanks so much for the quick reply, finally i figured it out, sorry for being so blind...!

Best,
Michael

Forums

Developing (v7+)

How to get tinymce typography.css styles in the dashboard?

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?