Skip to content
Snippets Groups Projects

#3308035: The first attempt to make it works with Ckeditor5

Open #3308035: The first attempt to make it works with Ckeditor5
6 unresolved threads
6 unresolved threads

Closes #3308035

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
  • Alexey resolved all threads

    resolved all threads

  • Alexey added 1 commit

    added 1 commit

    • 4e83fa64 - Add info about the version to the plugin's library

    Compare with previous version

  • 1 <?php
    2
    3 declare(strict_types=1);
    4
    5 namespace Drupal\ckeditor_bootstrap_buttons\Plugin\CKEditor4To5Upgrade;
  • 19 * },
    20 * cke5_plugin_elements_subset_configuration = {
    21 * }
    22 * )
    23 *
    24 * @internal
    25 * Plugin classes are internal.
    26 */
    27 class Btbutton extends PluginBase implements CKEditor4To5UpgradePluginInterface {
    28
    29 /**
    30 * {@inheritdoc}
    31 */
    32 public function mapCKEditor4ToolbarButtonToCKEditor5ToolbarItem(string $cke4_button, HTMLRestrictions $text_format_html_restrictions): ?array {
    33 // We use the Core's Ckeditor 5 Link button instead custom button in the new version.
    34 throw new \OutOfBoundsException();
  • 26 'description' => t('CKEditor Bootstrap Buttons requires the btbutton library.
    25 if (!$library_found) {
    26 $requirements['ckeditor_bootstrap_buttons'] = [
    27 'title' => t('CKEditor Bootstrap Buttons library missing'),
    28 'description' => t('CKEditor Bootstrap Buttons requires the btbutton library.
    27 29 Download it (https://github.com/smonetti/btbutton) and place it in the
    28 30 libraries folder (/libraries)'),
    31 'severity' => REQUIREMENT_ERROR,
    32 ];
    33 }
    34 }
    35
    36 // Requirements for the Ckeditor 5.
    37 if (\Drupal::moduleHandler()->moduleExists('editor_advanced_link')) {
    38 $requirements['ckeditor_bootstrap_buttons'] = [
    39 'title' => t('Please to disable the Editor Advanced Link module'),
  • 26 $requirements['ckeditor_bootstrap_buttons'] = [
    27 'title' => t('CKEditor Bootstrap Buttons library missing'),
    28 'description' => t('CKEditor Bootstrap Buttons requires the btbutton library.
    27 29 Download it (https://github.com/smonetti/btbutton) and place it in the
    28 30 libraries folder (/libraries)'),
    31 'severity' => REQUIREMENT_ERROR,
    32 ];
    33 }
    34 }
    35
    36 // Requirements for the Ckeditor 5.
    37 if (\Drupal::moduleHandler()->moduleExists('editor_advanced_link')) {
    38 $requirements['ckeditor_bootstrap_buttons'] = [
    39 'title' => t('Please to disable the Editor Advanced Link module'),
    40 'description' => t('CKEditor Bootstrap Buttons for Ckeditor 5
    41 can\'t work with the enabled Editor Advanced Link module currently.
  • Made a quick test to see if this could be used to upgrade from CKEditor 4 to 5 but had a few issues.

    Other than the specific comments, there's some styling which (at least in the admin UI) makes the buttons in CKEditor 4 toolbar max 16 pixels wide while this patch is applied.

    • Hi I have a little problem trying to do the test. Maybe somebody can help me to fixit.

      I've checkout to this issue branch with

      git fetch "git@git.drupal.org:issue/ckeditor_bootstrap_buttons-3308035.git" '3308035-version_for_drupal10'
      git checkout -b 'ckeditor_bootstrap_buttons-3308035-3308035-version_for_drupal10' FETCH_HEAD

      and moved the plugin folder to /web/modules/contrib. I could find and install the module correctly from drupal, but the new button to use the plugin does not appear in the ckeditor toolbar configuration view.

      I even tried adding the btbutton plugin to the library folder (from README.md), although I suspect this plugin is required for the ckeditor4 version.

      do you know where the error is?

    • @Manuelmetadrop this new method uses the existing link field, which is most likely already enabled in your CKEditor 5 config. If you're not seeing the options, try clearing cache, or try removing editor_advanced_link if it's enabled.

    • Please register or sign in to reply
  • Avi Schwab added 4 commits

    added 4 commits

    • c06dab60 - 1 commit from branch project:2.0.x
    • 9c15f133 - #3308035: The first attempt to make it works with Ckeditor5
    • 7524c631 - Add info about the version to the plugin's library
    • cd0c2987 - Merge remote-tracking branch...

    Compare with previous version

  • Avi Schwab added 1 commit

    added 1 commit

    • b3362423 - fix: Rename CKEditor4To5Upgrade directory

    Compare with previous version

  • Avi Schwab added 1 commit

    added 1 commit

    • 4c1e73da - fix: Set upgrade toolbar item.

    Compare with previous version

  • Avi Schwab added 1 commit

    added 1 commit

    • 11380c4d - fix: Reword requirements and fix quotes.

    Compare with previous version

  • I tested this and it's... progress, but still needs work.

    I was able to use it with the existing editor_advanced_link options, but it somehow makes things all out of order.

    Cursor_and_Edit_layout_for_Demo_-Home_Page___YMCA_OF__SPRINGFIELD

    I'd say overriding the Editor Advanced options is a dealbreaker, so would it be possible for us to hook into their options and somehow merge the Bootstrap options into the Advanced options? I've dug around a little, but need to get much deeper into the CKE5 plugin architecture to figure this out.

    I did a little noodling in the browser, I wonder if this would be possible?

    Cursor_and_Edit_layout_for_Demo_-Home_Page___YMCA_OF__SPRINGFIELD

    • CSS classes should still be allowed, but merged with the button classes.
    • "Bootstrap button" switch expands the fields
    • Color/Size/Style stay text fields for extensibility/compatibility between bootstrap versions
    • Add link to Bootstrap docs to help editors find the right options, possibly configurable based on the version of Bootstrap in the theme.
  • Avi Schwab
    Avi Schwab @froboy started a thread on the diff
  • 22 22 default:
    23 23 }
    24 24 }
    25
    26 /**
    27 * Implements hook_preprocess_html().
    28 */
    29 function ckeditor_bootstrap_buttons_preprocess_html(&$variables) {
    30 $variables['#attached']['library'][] = 'ckeditor_bootstrap_buttons/bootstrap-5-js';
    • This needs more specificity so that it's only added in the context of the editor. Adding bootstrap to every page is not advised, and can result in issues like this one: https://www.drupal.org/project/drupal/issues/3326215

    • Updated: Perhaps this should be left, but change the file connection for this library. At the moment, we only need styles for buttons, instead we pull ALL styles, which is not very correct and causes problems on admin pages as well. Therefore, we can try to compile the styles for buttons in the module itself, and also replace the connection of the entire Bootstrap js with the connection only for buttons js in Bootstrap. What do you think about this?

      Edited by Vlad Denysiuk
    • Please register or sign in to reply
    Please register or sign in to reply
    Loading