Problem with tinyMCE editor in FarCry 6

[Xiaofeng Liu]

Hi guys,

I ran into a problem when I tried to configure the rich text editor to provide some site specific styles for my contributors.

I have changed the configuration settings to:

theme : "advanced",
plugins : "table,advhr,farcrycontenttemplates,advimage,advlink,preview,zoom,searchreplace,print,contextmenu,paste,directionality,fullscreen",   
theme_advanced_buttons2_add : "separator,farcrycontenttemplates",
theme_advanced_buttons3_add_before : "tablecontrols,separator",       
theme_advanced_buttons3_add : "separator,fullscreen,pasteword,pastetext",               
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
theme_advanced_resize_horizontal : true,
theme_advanced_resizing : true,
extended_valid_elements: "code,colgroup,col,thead,tfoot,tbody,abbr,blockquote,cite,button,textarea[name|class|cols|rows],script[type],img[style|class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]",
remove_linebreaks : false,
relative_urls : false,
content_css : "/css/editor.css"

Within editor.css, I put sth like:

* { margin:0; padding:0; }

.TextStandard {
    color: #757575;
    font-size: 12px;
}

Then I reload the configuration as well as the application.

I can see the style TextStandard appearing now in the editor:



Then I decided to remove the style 'TextStandard' and apply the styles to more generic tags like <p>, <h1>, <h2> etc.

I removed the the class 'TextStandard' from my stylesheet, and put stuff like this:

* { margin:0; padding:0; }

p {
    color: #757575;
    font-size: 12px;
}
h1 {
    color: #313030;
    font-size: 2em;
    font-weight: bold;
}
h2 {
    color: #313030;
    font-size: 1.5em;
    font-weight: bold;
}
h3 {
    color: #313030;
    font-size: 1.3em;
    font-weight: bold;
}
h4 {
    color: #313030;
    font-size: 1em;
    font-weight: bold;
}
h5 {
    color: #313030;
    font-size: 0.8em;
    font-weight: bold;
}
h6 {
    color: #313030;
    font-size: 0.7em;
    font-weight: bold;
}

After that, no matter how I reload the configuration and application scope, I still get that styles showing in the rich text editor. I can't get rid of it.

Obviously there is sth wrong there. Did anyone have the same problem before and a fix to this please?

--
Best regards,

Xiaofeng,^_^

[Justin Carter]

Try clearing your browser cache - since TinyMCE runs in an iframe it is hard to force it to refresh the CSS. That should do the trick. Either that our change the path and/or filename of your CSS file :)

Cheers,
Justin

--
You received this message cos you are subscribed to "farcry-dev" Google group.
To post, email: farcr...@googlegroups.com
To unsubscribe, email: farcry-dev+...@googlegroups.com
For more options: http://groups.google.com/group/farcry-dev
--------------------------------
Follow us on Twitter: http://twitter.com/farcry

[Xiaofeng Liu]

Thanks Justin.

That fixed my problem.

I'm new to this sort of things. Can I ask you one more thing? Say if I do want to add some more specific styles like the one called 'default', in my stylesheet I need to put:

.default {
    color: #757575;
    font-size: 12px;
}

Then how do I code the styles for the second dropdown for all the paragraphs, heading 1 etc under that default class:

I tried sth like:

h1.default {/* styles here */} and .default h1 {/******/}

But both of them didn't seem to work for me.

Regards,

Xiaofeng

--
Best regards,

Xiaofeng,^_^

[Justin Carter]

As far as I know it should be in the form of:

h1.default {

  /* style properties here */

}

Again, you may need to clear your cache so that the CSS is refreshed. This is what the documentation says:

"Any CSS classes defined in your CSS file will show up in the styles dropdown lists (unless you explicitly set what shows up in the styles dropdown list with the theme_advanced_styles option)"

http://www.tinymce.com/wiki.php/Configuration:content_css

So just make sure you don't have a "theme_advanced_styles" option in your config and it should pick up the class names automatically from your editor.css.

cheers,

Justin

[Xiaofeng Liu]

I added styles like below into editor.css:

* { margin:0; padding:0; }

p {
    color: #757575;
    font-size: 12px;

    line-height: 1.5em;
    margin-bottom: 1.5em;
}
h1 {
    color: #313030;
    font-size: 19px;
    font-weight: bold;
    margin-bottom: 1.2em;
}
h2 {
    color: #313030;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 1.2em;
}
h3 {
    color: #313030;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 1.2em;
}
h4 {
    color: #313030;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 1.2em;
}
h5 {
    color: #313030;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 1.2em;
}
h6 {
    color: #313030;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 1.2em;
}

It works OK but the buttons on the editor for bold, italic and underline text aren't working. When bold a bunch of text, I can see they are bold in CMS. But on the front, they're not.

Regards,

Xiaofeng

[Justin Carter]

Hmmm, if they aren't bold on the front-end then it sounds like you might have a reset.css or a CSS framework which is "zeroing" all your styles. Typically, they do silly things like:

strong { font-weight: normal; }

So you may have to "fix" these yourself by redefining the styles appropriately in your own style sheet.

cheers,

Justin

[Xiaofeng Liu]

Thanks again Justin.

I found that reset.css which did the bad stuffs.

Now it's fixed.

Cheers,

Xiaofeng