Trouble with importcss

[jemagee]

I'm just getting started with TinyMCE and have solved some issues but have looked at a variety of suggestions regarding getting the importcss plugin to access the application.css, and none of them seem to be working. I have one simple .testclass in my application.scss file, but I can not figure out how to get it to display in the format drop down per instructions on SO, here, and on the tinymce homepage itself. I'm using a basic rails new setup with version 5. The only extra gems installed are TinyMCE and prism.

My YML looks like this

toolbar: 
  - styleselect | bold italic | undo redo | format
  - image | link | codesample
plugins:
  - image
  - codesample
  - link
  - importcss

I have tried importcss_file_filter: asset_path 'application.css', and while this doesn't cause any trouble within the server, it doesn't show my testclass from the application.css file. I have put this in both the yml file AND the direct call `<%= tinymce importcss_file_filter: asset_path('application.css') %>. Neither way works.

Perhaps I'm just a neophyte, but if someone could point me in the right direction, it would be greatly appeciated. My custom built blog currently uses kramdown/coderay for creating content and it's quite limited. I'd love to switch it over to TinyMCE with Prism, but I'd like to get the importcss working first.

[spohlenz]

This does look a little confusing in the TinyMCE docs but it seems like what you want is <%= tinymce content_css: asset_path('application.css') %>.

[jemagee]

So I did try that - and my application.scss file pretty simple

 @import "prism";
 /*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

.testclass {
    font-size: 10px;
    color: red;
}

And the formats drop down gets populated in the wysiwyg, but if you can see it on this image, it gets a LOT of stuff, maybe application.css is the wrong one to add?

[spohlenz]

There are a couple of ways to solve this.

First would be to look into the importcss_selector_filter option (https://www.tinymce.com/docs/plugins/importcss/#importcss_selector_filter) to only import certain classes. Drawback to this approach is that you would have to keep a consistent naming convention, or constantly update the filter this.

Another option would be to add an additional CSS file (e.g. editor.css) for your TinyMCE styles. You could @import this within your main application.css but you would also need to add editor.css to your Rails.application.config.assets.precompile list.

[jemagee]

@spohlenz The second solution seems to make sense, though the precompile thing is not something i work with before, but I can figure that out...I'm just wondering where all the things that ARE there came from.

[spohlenz]

My best bet is that they're styles created by Prism.

[jemagee]

@spohlenz That was my first thought but didn't want to assume, I sort of use the benefits of SCSS without fully having studied it yet, there's so much to learn, but thanks for your help, and this gem, finding it this weekend has been great...and the set up was pretty easy to follow....i was planning to review and try a few, but this one was second, and the ease of implementing the code syntax over the other one i had tried was excellent

[jemagee]

and by the way, the second suggestion you gave of creating a custom file and altering my precompiile worked perfectly...once I figured out where precompile was...it's an ideal solution. As I was going through this, I was thinking that simple guides for implementing the plugins (as needed like this) in Rails for beginners like me might come in handy - i'd be happy to contribute as I learn to use more of the plugins.

Of course, using articles.scss for the wysiwyg got the style to show up there, but it didn't transfer over to the articles view - but this is an issues I've had with my rails apps for a while, the CSS/SCSS of other files doesn't get included properly so that's me doing something wrong