0

I am trying to figure out how to use Drupal 8's CKEditor on <textarea></textarea> tags that are part of a controllers markup and not generated from a Drupal form.

Has anyone done this or can Drupal 8's integrated CKEditor only be used with Drupal Forms?

When I try to use ckeditor with the standard way of CKEDITOR.replace('element'); I get the error that config.js and styles.js are missing. Which should be the case because Drupal has consciously excluded them from their integrated CKEditor. https://www.drupal.org/project/drupal/issues/2604052

After digging around I found the javascript call Drupal.editors.ckeditor.attach(element, format) but I can't figure out what to pass in for the format parameter. Looking at other javascript code it appears they they use the drupalSettings global variable in javascript to pass it in but it's not there.

Any help on this would be greatly appreciated.

My code is below.

my_module.routing.yml

my_module.myroute:
  path: '/my-route'
  defaults:
    _title: 'Test Module'
    _controller: '\Drupal\my_module\Controller\HomeController::view'
  requirements:
    _access: 'TRUE'

my_module.libraries.yml

scripts:
  js:
    my_script.js: {}
  dependencies:
    - ckeditor/drupal.ckeditor

my_script.js

window.onload = function () {
    let element = jQuery("#testelement");
    let format = "filtered_html";
    Drupal.editors.ckeditor.attach(element, format);
};

HomeController.php

<?php

namespace Drupal\my_module\Controller;

use Drupal\Core\Controller\ControllerBase;
use Drupal\Core\Render\Markup;

class HomeController extends ControllerBase
{

    function view()
    {
        return [
            "#attached" => [
                "library" => ["my_module/scripts"]
            ],
            "#markup" => Markup::create("
                <textarea name='testelement' id='testelement'></textarea>            
            ")
        ];
    }
}
2
  • But why? Is this a form to be submitted? Why not just create a form through FormBase?
    – Kevin
    Jun 5, 2018 at 19:19
  • Because i'm trying to add ckeditor to multiple forms that were not created using FormBase so I don't have to rewrite them all.
    – sceithamer
    Jun 6, 2018 at 16:47

2 Answers 2

2

I'd imagine you just return the same element you'd build into a form, and use a format that's configured to use a WYSIWYG:

return [
  '#attached' => ...,
  '#type' => 'text_format',
  '#title' => 'Foo',
  '#format' => 'full_html', 
];

See the TextFormat class for more options.

3
  • 1
    I would agree with @clive, form elements don't have to be used in a form, you can use them in any page output. However, you may need to attach the appropriate library to the page (if CKEditor doesn't render). Jun 6, 2018 at 9:42
  • You didn't read my question correctly or I didn't explain it clear enough. I am not using Drupal\Core\Form\FormBase to create the form. The forms were created in plain html and i'm trying to re-add ckeditor to the form without recreating it using FormBase.
    – sceithamer
    Jun 6, 2018 at 16:35
  • I did try and return what you have from my controller response and that didn't really change anything. The page was empty, no form element was created.
    – sceithamer
    Jun 6, 2018 at 16:51
0

Missed the format

return [

  '#type' => 'text_format',
   '#title' => t('Text'),
   '#required' => TRUE,
   '#format' => 'full_html',
   "#attached" => [
   "library" => ["my_module/scripts"]
            ]
  ];

Go to /admin/config/content/formats and check the CKeditor is enabled for FULL HTML. Also, could be a role issue, by default Full HTML is for admins only.

1
  • It's not a permissions / role issue as I can get CKEditor to load fine when using Drupal\Core\Form\FormBase. I am trying to add ckeditor to forms that were not created using FormBase without having to rewrite the entire thing.
    – sceithamer
    Jun 6, 2018 at 16:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.