New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CKEditor - need to use with Colorbox #1580

Open
Graham-72 opened this Issue Jan 28, 2016 · 8 comments

Comments

Projects
None yet
4 participants
@Graham-72

Graham-72 commented Jan 28, 2016

I have some nodes produced with CKEditor. I need to modify the source code but the CKEditor filters are interfering with the HTML. I would like to be able to edit the node as plain text but this option does not appear in the Formatting Options drop-down.

It seems my only way forward at the moment would be to create a new replacement node that is plain text from the start.

Is this limitation on formatting options intended?

@Graham-72

This comment has been minimized.

Graham-72 commented Jan 28, 2016

I have found a way I can do this.
I have created a new formatting option that is CKEditor without any filters. I have given it the name CKEditorUF (UF for unflitered) and allowed it for use by Administrator role. This now appears as an option in the Formatting Opitons drop-down.

@Graham-72

This comment has been minimized.

Graham-72 commented Jan 29, 2016

I would like to be able to use CKEditor with Colorbox without having to edit HTML. This doesn't seem to be possible at the moment.

I need to be able to add a thumbnail image to a page, perhaps even in a cell in a table, then link this small image to a larger image with link parameters class="colorbox" rel="gallery-all".

Will this ever be possible please?

@Graham-72 Graham-72 changed the title from Formatting options : allow reverting to plain text to CKEditor - need to use with Colorbox Jan 29, 2016

@quicksketch

This comment has been minimized.

Member

quicksketch commented Jan 29, 2016

I would like to be able to use CKEditor with Colorbox without having to edit HTML. This doesn't seem to be possible at the moment.

To do this, you could add a hook_form_alter() to a custom module (or it could even be part of Colorbox module itself). The form for creating links is generated by Backdrop, so you can form_alter() it to add a checkbox for "Open in Colorbox" if you wanted.

function my_module_form_filter_format_editor_link_form_alter(&$form, &$form_state) {
  // Pull in any default values set by the editor.
  $values = array();
  if (isset($form_state['input']['editor_object'])) {
    $values = $form_state['input']['editor_object'];
  }

  $form['colorbox'] = array(
    '#type' => 'checkbox',
    '#title' => t('Open in Colorbox'),
    '#default_value' => isset($values['class']) && (strpos($values['class'], 'colorbox') !== FALSE),
  );

  array_unshift($form['#submit'], 'my_module_form_filter_format_editor_link_form_submit');
}

function my_module_form_filter_format_editor_link_form_submit($form, &$form_state) {
  if ($form_state['values']['colorbox']) {
    $form_state['values']['attributes']['class'] = 'colorbox';
    $form_state['values']['attributes']['rel'] = 'gallery-all';
  }
  unset($form_state['values']['lightbox']);
}

I'm not sure what "rel" value you'd want to put in there, or if you'd prefer to make that editable in the dialog. Any attribute can be set on the link through the dialog by having it saved into $form_state['values']['attributes'].

@ghost

This comment has been minimized.

ghost commented Jan 29, 2016

@quicksketch : did you forget that backdrop cannot add a link to an image ?
Additionally, the user would have to manually type the link's href !
Additionally, that means that full size image is shown in a thumbnail format : not very efficient for a "mobile first" site...
NB: yes, gallery-all is the correct rel value for this use case
Additionally, you would add target="_blank" in case colorbox is not operational

@Graham-72

This comment has been minimized.

Graham-72 commented Jan 30, 2016

I have added a new issue CKEditor - need to be able to add a link to an image. #1586 .

@BWPanda

This comment has been minimized.

BWPanda commented Jun 23, 2017

I'd love to see this feature too. I tried something like what @quicksketch posted above, but I did it on the Image dialog form and then couldn't work out how to add an <a> tag around the image, rather than just adding to the image's attributes... This would allow the link's URL to be entered automatically, save the user having to do it.

@BWPanda

This comment has been minimized.

BWPanda commented Sep 8, 2017

Additionally, the user would have to manually type the link's href !
Additionally, that means that full size image is shown in a thumbnail format : not very efficient for a "mobile first" site...

If #2841 can get into core, then that'll solve these issues. Then all that's needed is to create the ability to add custom classes/attributes to links in the editor and this'll be solved!

@docwilmot

This comment has been minimized.

Contributor

docwilmot commented Sep 12, 2017

Just a related request when @quicksketch gets around to this, It seems not possible to add attributes to the <img> tag in backdropimage using this method. In other words:

function my_module_form_filter_format_editor_image_form_submit($form, &$form_state) {   // image!
    $form_state['values']['attributes']['class'] = 'colorbox';      // doesnt work
    $form_state['values']['attributes']['something_else'] = 'anything';      // doesnt work
    $form_state['values']['attributes']['height'] = 55;       // works as does 'width', 'src', 'alt'. 

Cant figure out why.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment