? ? Success

User tests: Successful: Unsuccessful:

avatar dgt41
dgt41
7 Sep 2014

This will enable TinyMCE to use skins

What problem is being solved

Right now in Joomla! is hard to customize the look of the tinyMCE editor (needs some core hacks).
This PR will enable the use of skins just by copying them in the respective folder.

B/C

There shouldn’t be any backward compatibility breaks here.
In the options of tinyMCE instead of having the default as the only option in drop down list, all the available skins will be listed by the respected names. Also the string that translates to default is useless but I didn’t deleted as I don’t know how language files are treated…
Line 102@ en-GB.plg_editors_tinymce.ini: PLG_TINY_FIELD_VALUE_DEFAULT="Default"

How to test

Need to set editor to tinymce:
1. Apply the patch with patchtester.
2. Edit an article. Everything should be ok.
3. Go to http://skin.tinymce.com and select the preset charcoal or tundra and download it. (lightgray is the one that ships with Joomla!)
screenshot 2014-09-07 15 10 54
4. Extract the skin in /media/editors/tinymce/skins
5. Go to plugins->tinyMCE and select the skin you just copied.
screenshot 2014-09-07 15 12 34
6. Edit an article with your new skin!
screenshot 2014-09-07 15 13 21

avatar dgt41 dgt41 - open - 7 Sep 2014
avatar jissues-bot jissues-bot - change - 7 Sep 2014
Labels Added: ?
avatar zero-24
zero-24 - comment - 7 Sep 2014

@dgt41 looks cool i have comment on some CS things and going to test now :+1:

avatar zero-24
zero-24 - comment - 7 Sep 2014

@dgt41 can you add some doc blocks for the new functions?

avatar dgt41 dgt41 - change - 7 Sep 2014
The description was changed
avatar zero-24
zero-24 - comment - 7 Sep 2014

@dgt41 Thanks for the CS updates :+1:
@test
I'm on windows (xampp + win8.1) but the Skin option is no dropdown for me (texfield with a zero in it). It also don't work on my WebDev Site (apache ubuntu)
see:
skin

Also Github write something that your PR contains merge conflicts.

avatar dgt41
dgt41 - comment - 7 Sep 2014

oops in tinymce.xml change

<fieldset name=“basic”>
to
<fieldset name="basic" addfieldpath="/plugins/editors/tinymce”>

avatar dgt41 dgt41 - change - 7 Sep 2014
The description was changed
avatar zero-24 zero-24 - change - 7 Sep 2014
Easy No Yes
avatar zero-24 zero-24 - change - 7 Sep 2014
Category External Library
avatar zero-24
zero-24 - comment - 7 Sep 2014

Thanks @dgt41 now it work like a charm :+1: Also on xampp (windows 8.1; I have no "real" win sever here.) using com_patchtester

EDIT:
Can we have a "New Feature" label here?

This comment was created with the J!Tracker Application at http://issues.joomla.org/.

avatar dgt41
dgt41 - comment - 7 Sep 2014

Good to hear that. I didn’t expect to work out of the box in win env… Kudos to PHP

avatar dgt41
dgt41 - comment - 7 Sep 2014

In order not to hard code the field path in XML maybe a slight modification in administrator/com_plugins/models/plugin.php
in line 74 we can add:

        JForm::addFieldPath(JPATH_PLUGINS . '/' . $folder . '/' . $element);

So all the plugins can have custom fields in their root dir or we can specify (create) another like:

        JForm::addFieldPath(JPATH_PLUGINS . '/' . $folder . '/' . $element . ‘/fields‘);

BUT that’s another PR I guess

avatar infograf768 infograf768 - change - 7 Sep 2014
Labels Added: ?
avatar dgt41
dgt41 - comment - 7 Sep 2014

@zero-24 do you still have the copy of skins.php with all the doc blocks? I tried to rebase my localhost and lost it…

avatar zero-24
zero-24 - comment - 7 Sep 2014

Sorry @dgt41 no i have revert the changes with com_patchtester after testing.

avatar dgt41
dgt41 - comment - 7 Sep 2014

@zero-24 Never mind I rewrote them. Can I ask for one more test since I re-done this one?

avatar zero-24
zero-24 - comment - 7 Sep 2014

No problem.

BTW. Travis is better than me, it spot another CS things

FILE: ...home/travis/build/joomla/joomla-cms/plugins/editors/tinymce/tinymce.php
--------------------------------------------------------------------------------
FOUND 5 ERROR(S) AFFECTING 5 LINE(S)
--------------------------------------------------------------------------------
 54 | ERROR | Please consider a blank line preceding your comment
 55 | ERROR | Space found before comma in function call
 56 | ERROR | Please consider a blank line preceding your comment
 57 | ERROR | Cast statements must be followed by a single space; expected
    |       | "(int) $this" but found "(int)$this"
 59 | ERROR | Cast statements must be followed by a single space; expected
    |       | "(int) $this" but found "(int)$this"
--------------------------------------------------------------------------------
avatar dgt41
dgt41 - comment - 7 Sep 2014

Now (i think) he should be happy!

avatar zero-24
zero-24 - comment - 7 Sep 2014

@test successful by using charcoal from http://skin.tinymce.com/ on xampp (win8.1)

Thanks @dgt41

avatar infograf768
infograf768 - comment - 8 Sep 2014

Works fine here (MAMP Macintosh)
I propose, as it is a new feature, to let choose the skin depending on the site or admin.

in tinymce.php

public function onInit()
    {
        $language   = JFactory::getLanguage();
        $app        = JFactory::getApplication();
        $mode       = (int) $this->params->get('mode', 1);
        $theme      = 'modern';

        // List the skins
        $skindirs = glob(JPATH_ROOT . '/media/editors/tinymce/skins' . '/*', GLOB_ONLYDIR);

        // Set the selected site skin
        if ($app->isSite())
        {
            if ((int) $this->params->get('skin', 0) < count($skindirs))
            {
                $skin = 'skin : "' . basename($skindirs[(int) $this->params->get('skin', 0)]) . '",';
            }
            else
            {
                $skin = 'skin : "' . basename($skindirs[0]) . '",';
            }
        }

        // Set the selected administrator skin
        elseif ($app->isAdmin())
        {
            if ((int) $this->params->get('skin_admin', 0) < count($skindirs))
            {
                $skin = 'skin : "' . basename($skindirs[(int) $this->params->get('skin_admin', 0)]) . '",';
            }
            else
            {
                $skin = 'skin : "' . basename($skindirs[0]) . '",';
            }
        }
[...]

in tinymmce.xml

                <field name="skin" type="skins"
                    description="PLG_TINY_FIELD_SKIN_DESC"
                    label="PLG_TINY_FIELD_SKIN_LABEL"
                >
                </field>

                <field name="skin_admin" type="skins"
                    description="PLG_TINY_FIELD_SKIN_ADMIN_DESC"
                    label="PLG_TINY_FIELD_SKIN_ADMIN_LABEL"
                >
                </field>

New lang strings and modified existing:

PLG_TINY_FIELD_SKIN_ADMIN_DESC="Select skin for the Administrator Backend interface" // new
PLG_TINY_FIELD_SKIN_ADMIN_LABEL="Administrator Skin"  //new
PLG_TINY_FIELD_SKIN_DESC="Select skin for the Frontend interface" // modified
PLG_TINY_FIELD_SKIN_LABEL="Site Skin" // modified
avatar infograf768
infograf768 - comment - 8 Sep 2014

Also, I suggest, to be consequent with the use of specific fields in core, to put skins.php in a sub-folder called fields
therefore we would have:

<fieldset name="basic" addfieldpath="/plugins/editors/tinymce/fields">
avatar dgt41
dgt41 - comment - 8 Sep 2014

@infograf768 what about the lang string PLG_TINY_FIELD_VALUE_DEFAULT=“Default”?
Right now is useless shall we remove it?
Maybe we can add

<field name="note" type="note" label="PLG_TINY_FIELD_VALUE_TINYMCE_INFO" description="PLG_TINY_FIELD_VALUE_TINYMCE_INFO_DESC" />

with

PLG_TINY_FIELD_VALUE_TINYMCE_INFO = “For customizing the skin go to: skins.tinymce.com”
PLG_TINY_FIELD_VALUE_TINYMCE_INFO = “Copy your new skin at: /media/editors/tinymce/skins"
avatar dgt41
dgt41 - comment - 8 Sep 2014

Latest commit introduces front end/back end option
Also added a note field for more info
Moved the field mode (functionality) after the skins

Added/ modified
PLG_TINY_FIELD_SKIN_ADMIN_DESC="Select skin for the Administrator Backend interface"
PLG_TINY_FIELD_SKIN_ADMIN_LABEL="Administrator Skin"
PLG_TINY_FIELD_SKIN_DESC="Select skin for the Frontend interface"
PLG_TINY_FIELD_SKIN_INFO_DESC="Copy your new skins at: /media/editors/tinymce/skins"
PLG_TINY_FIELD_SKIN_INFO_LABEL="For customized skins go to: skins.tinymce.com"
PLG_TINY_FIELD_SKIN_LABEL="Site Skin”

So the rendered view will be:
screenshot 2014-09-08 15 29 33

avatar zero-24
zero-24 - comment - 8 Sep 2014

@dgt41

Suggestions / Questions

  • Can we make the URL on the info clickable (with target"_blank" so we open a new window)?
  • Also can you add the default value to lightgray (as it use atm as default the first on the list for me e.g. "custom")
  • The note text is twice here see:

screen shot 2014-09-08 at 13 30 22
Issue is here:
https://github.com/joomla/joomla-cms/pull/4240/files#diff-fba22872aea9148404167671e76cc8c2R24

<field name="skins" type="note"
 label="PLG_TINY_FIELD_SKIN_INFO_DESC"
 description="PLG_TINY_FIELD_SKIN_INFO_DESC"
/>

Fix (see the label attribute ;))

<field name="skins" type="note"
 label="PLG_TINY_FIELD_SKIN_INFO_LABEL"
 description="PLG_TINY_FIELD_SKIN_INFO_DESC"
/>

Result

@test apart from the things above the BE and FE thing works good here.

This comment was created with the J!Tracker Application at http://issues.joomla.org/.

avatar dgt41
dgt41 - comment - 8 Sep 2014

@zero-24 Thanx for testing, I already made the correction :+1:

avatar zero-24
zero-24 - comment - 8 Sep 2014

thanks :+1:@dgt41 can you also have a look to the other to points?

avatar dgt41
dgt41 - comment - 8 Sep 2014

@zero-24 The second point you mention is quite tricky with this code. Let me explain how this work:
We scan the directory and get the available folders in an array (short them by name), then we compare the key with the one on the db (params) and set the skin. Actually this code cannot set something based on name because something like that, will have to store instead of an integer the actual name of each template. And this will get a lot more code and also some more changes in the db.
The drawback of this code is that every time you add or remove a skin will require to set again the preferred skin.
So you copy a skin -> you have to reset the preferred skin (the same might be the case in uninstalling, depends on the names of the skins)
One way to fallback always to lightgray is to rename it to _lightgray (haven’t tested but I think will work). But for me is better to leave it as is, because in every update of tinyMCE somebody will have to rename that folder :( .
The link is a good idea :+1:

avatar dgt41
dgt41 - comment - 8 Sep 2014

Actually I am wrong about the fall back!
Lightgray will always be available so we can set it as a fallback!
I will provide the code, good catch :+1:

avatar infograf768 infograf768 - change - 9 Sep 2014
Labels Added: ?
avatar infograf768 infograf768 - change - 9 Sep 2014
Labels Added: ?
avatar infograf768 infograf768 - change - 9 Sep 2014
Labels Removed: ?
avatar infograf768
infograf768 - comment - 9 Sep 2014

@test
Works.
Indeed, you can delete the string
PLG_TINY_FIELD_VALUE_DEFAULT=“Default”

This should be merged into 3.4.dev

avatar dgt41 dgt41 - close - 25 Sep 2014
avatar dgt41 dgt41 - change - 25 Sep 2014
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2014-09-25 14:33:08
avatar dgt41 dgt41 - reopen - 25 Sep 2014
avatar dgt41 dgt41 - change - 25 Sep 2014
Status Closed New
avatar dbhurley
dbhurley - comment - 26 Sep 2014

This has been merged to 3.4-dev. Thanks!

avatar dbhurley dbhurley - close - 26 Sep 2014
avatar dbhurley dbhurley - change - 26 Sep 2014
Status New Closed
Closed_Date 2014-09-25 14:33:08 2014-09-26 13:09:34

Add a Comment

Login with GitHub to post a comment