1

Topic: css apply to the styles' list

Hi everyone,

I can have the list of my css styles in the list by adding this line : content_css : "../../stylesheet/mystylesheet.css" to the tinyMCE.init() function.

But in addition I would like my styles to reflect the style they stand for. So for exemple the verdanaboldunderline style would have the class verdanaboldunderline  (hope it's clear).

In a file I can do it simply by adding the class attribute in the option element of the list and the option."name of the style" in my css file

So it looks like that :
<select>
  <option class="verdanaboldunderline ">verdanaboldunderline </option>  in the html file
</select>

option.verdanaboldunderline {
    font-family: Verdana, Arial, Helvetica, sans-serif;} in the css

To make it work in tinycme, I have changed in edito_template_src.js this line by adding the class attribute :
  styleSelectHTML += '<option value="' + value + '" class="'+value+'">' + key + '</option>'; (lne 475)

And I have tried to add the option.verdanaboldunderline style in mystylesheet.css, edito_content.css, editor_popup.css, editor_ui.css (I use the advanced theme)  and none of this worked.

Any idea will be very helpful

2

Re: css apply to the styles' list

OK, so I have made progress since my post.

I have understood that it 's the file editor_template.js that I have to modified and not editor_template_src.js.

I have removed also the attribute class="mceSelectList" in the part case"styleselect": in editor_template.js (a class in the select overrides a class in the option element)

And also I am pretty sure that's in editor_ui.css I have to add my styles.

But, despite all this changes, it still doesn't work. Although I don't have the mceSelectList style applied in my list anymore so I know I have put my changes in the good places, but I must still miss something.

Any idea what ?

3

Re: css apply to the styles' list

All you have to is open "tiny_mce\themes\advanced\css\editor_content.css" and add your css. 
I just added an image border:

.imgborder {
    border:1px solid #ddd;
    padding: 4px;
  }

It will then show up in the dropdown menu in the advimage popup as "imgborder"

Make sure to refresh your browser.

4

Re: css apply to the styles' list

Hi,

I am not sure about what you said, because I have added this line into tinyMCE.init()

  tinyMCE.init({
    content_css : "/mycontent.css"
});

so if i understand correctly,  I think it means I am not using  editor_content.css any more but mycontent.css

5

Re: css apply to the styles' list

I would also be very interested in learning how to do it, plz anyonme answer this question.

6

Re: css apply to the styles' list

friends,
i am having problem with the combination of the following three things

1.fullpage
2.internalcss
3.template

while i am typing the following code in the html part of the tinymce and seeing the preview it is perfect also my code is not getting disturbed....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
.raj{
color:#ff0000;
}
</style>
</head>

<body>
<div class="raj">Rajendiran A</div>
</body>
</html>

--------------------------------------------------------------------------------------------
if i write the same code in a html file named sample.html in the template folder and while i am loading this file to the editor my source is altered by tinymce as follows, also the preview is not good

the altered code

----------------------------------------------------------------------------------------------


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled document</title>
</head>
<body>
<p>


<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<mce:style type="text/css" media="screen"><!--
.raj{
color:#ff0000;
}
--></mce:style><mce:style type="text/css" media="screen" mce_bogus="1"><!--
.raj{
color:#ff0000;
}
--></mce:style><style type="text/css" media="screen" mce_bogus="1">.raj{
color:#ff0000;
}</style>

<div class="raj">Rajendiran A</div>
<br mce_bogus="1"></p>
</body>
</html>

------------------------------------------------------------------------------------------
here i have enabled the fullpage option to retain the basic tags like html, head, title, etc..


please helpme friends to solve the problem............


Thanks

Rajendiran A
Chennai, India