[D7] Using LESS file instead of CSS for custom editor stylesheet

Hello,

IMHO, this solution is too simple. It does not cope with situations when CSS compression and/or caching is on.
I can add the 'less_dir' variable to the path to css files, but it is not working when compression takes place.
Does anyone know how to solve this problem? I attach modifided fragment of code:

$less_dir = variable_get('less_dir', '');
if(is_dir('sites/default/files/less/'.$less_dir)){
                  	$less_dir.='/';
                  }
$path = 'sites/default/files/less/' . $less_dir . $path; 

I know that this patch is now included to the ckeditor.lib.inc by default.

Status changed accordingly to the #2 comment

We need a hook instead of hard coding all of that...

Don't have time to throw this in a patch right now, but since the less module is already making adjustments for the wysiwyg module, I added the alter hook from this module to the less.module file (basically stealing from their wysiwyg module code and handling the query string ckeditor is adding):

function less_ckeditor_settings_alter(&$settings) {
  $stylesheets = $settings['contentsCss'];

  if (!empty($stylesheets)) {
    $styles = array(
      '#items' => array(),
    );

    foreach ($stylesheets as $stylesheet) {
      $stylesheet = preg_replace('/\?.*/', '', $stylesheet);
      $styles['#items'][$stylesheet] = array(
        // Paths are expected to be relative to DRUPAL_ROOT.
        'data' => trim($stylesheet, '/'),
      );
    }

    $styles = _less_pre_render($styles);

    $processed_stylesheets = array();

    foreach ($styles['#items'] as $file) {
      $processed_stylesheets[] = file_create_url($file['data']);
    }

    $settings['contentsCss'] = $processed_stylesheets;
  }

  return $settings;
}

The code in #5 seems to work. Here it is as a patch against the less module

I'm implementing this with essentially this:

/**
 * Implements hook_ckeditor_settings_alter().
 */
function less_ckeditor_settings_alter(&$settings) {

  $context = array(
    'editor' => array(
      'name' => 'ckeditor',
    ),
  );

  less_wysiwyg_editor_settings_alter($settings, $context);
}

Its a simplification since less_wysiwyg_editor_settings_alter() was already doing most of the same work.

I did a few other clean up changes that you will see in the commit as well.

Forgot to mark this fixed.

Please make sure that you note that this applies to the 7.x-4.x branch only.

This actually doesn't seem to work with CKEditor, or at least the documentation isn't clear about how to go about it.

Problem

• When using "Use Theme CSS", nothing is added.
• When using "Define CSS", the LESS file is loaded, but not processed.

I can see when defining the path to the LESS file, it does in fact show up, but is never processed. In the screenshot, you can see how far down it gets processed in the function, but never produces a CSS file.

Solution

• When using "Use Theme CSS", load the "Default Theme", process info file for LESS files that are included, same way the LESS module does.
• When using "Define CSS", ensure LESS files are processed and return CSS.

Screenshots

CKEditor: Use Theme CSS

CKEditor: Define CSS

Also, it could be user error? Is there anything else that needs to happen for this to process correctly?

***DELETED, same was #13 without the upload***

I have to create this patch, because Drupal adds a query string token after the less file name, and the _less_pre_render doesn't tolerate it.

I recently had to revisit this ticket and I'm happy to see it working now!

The patch in #13 was definitely needed in my case. I tried multiple times without it and could never get the CSS loaded into CKEditor. Once I added it, cleared cache, it immediately started working. It also currently applies cleanly against dev.