1
alain01
Big challenge (need help) for TinyMCEv4 : class img
  • 2014/4/4 12:15

  • alain01

  • Just can't stay away

  • Posts: 544

  • Since: 2003/6/20


Hi,
huummm,
i need help for a big challenge for me, for tinymcev4 for xoops.
It is for the class image...
(For an example the the MACTEP demo)

Here i try to explain :

In tinymce, there is a new definition : image_class_list
This option lets you specify a predefined list of classes to add to an image.

In TinyMCE code

/* Example of how to use link class list. */
    
image_class_list: [
        {
title: 'None', value: ''},
        {
title: 'Dog', value: 'dog'},
        {
title: 'Cat', value: 'cat'}
    ];
In our /class/xoopseditor/tinymce.php/tinymce4 file :
$ret .='image_class_list: [
        {title: "'
._XOOPS_EDITOR_TINYMCE4_Undefined.'", value: ""},
        {title: "img-shadow-middle", value: "img-shadow-middle"} 
    ],'
;
ok, all is ok with that, all works, but but it"s hard coded !!!

So,
we get the "content_css" variable to tell tinymce where is our style.css file is !

here, in our /class/xoopseditor/tinymce.php/tinymce4 file :
$this->setting["content_css"] = implode( ",", $this->loadCss() );
It returns :
http://my_web_site.com/themes/my_theme/style.css

ok,so,
i want to use a function which discovers in the style.css all img class

for example :
in style.css :
img.img-shadow-left {
    
box-shadow: 5px 5px 20px #555555;
    
vertical-align: middle;
    
float: left;
    
margin: 10px 10px 10px 0px;
    
border-color: #ffffff;
    
border-style: solid;
    
border-width: 20px;
    
display: block;
}

img.img-shadow-right {
    
box-shadow: 5px 5px 20px #555555;
    
vertical-align: middle;
    
float: right;
    
margin: 10px 0px 10px 10px;
    
border-color: #ffffff;
    
border-style: solid;
    
border-width: 20px;
    
display: block;
}

img.img-shadow-middle {
    
box-shadow: 5px 5px 20px #555555; 
    
border-color: #ffffff;
    
border-style: solid;
    
border-width: 20px;
    
display: block;
    
margin-l;
    
margin-left: auto;
    
margin-right: auto;
    
margin-top: 10px;
    
margin-bottom: 10px;
}
then the function returns :
img-shadow-left
img-shadow-right
img-shadow-middle
and create AUTOMTICALLY :
$ret .='image_class_list: [
        {title: "'
._XOOPS_EDITOR_TINYMCE4_Undefined.'", value: ""},
        {title: "img-shadow-left", value: "img-shadow-left"} 
        {title: "img-shadow-right", value: "img-shadow-right"} 
        {title: "img-shadow-middle", value: "img-shadow-middle"} 
    ],'
;
Hope I'm Clear for you, hope you understand me.
Who could help me, or write the code ?
It's not just for me, it's for best TinyMCEv4 integration.