Add a method for easily enabling CKEditor on a specific textarea

Do you use any type of text format (input format) in this textarea?

Instead of this u could add:

'#format' => 'full_html'

Then CKEditor should work too and attach to this textarea.

Greetings

Hi,

sorry for posting in already closed thread. I have the same issue as above while making the switch from D6 to D7. I use an own module with a simple textarea form and ckeditor does not show up.
I tried setting the mentioned parameters:
'#format' => 'full_html' -> does not show up
'#type' => 'text_format' -> gives me the select box below the textarea but ckeditor still does not show up

Also I tried some more (not well in API documented) parameters like:
'#input_format' => 'xyz' -> no result even the filter format is defined. And a call of filter_default_format() gives me the expected result
I also played with:
'#text_format' => 'xyz' -> even no result.

Ckeditor itself is working as expected in all other textareas like body_field and contact and so on, just my own simple defined textarea form which did it flawless in D6 is no longer working...

Any ideas?
Thanks!
cheers bzrudi

Hi,

nevermind, it works with a clean install of D7. So it seems its an problem with the update and the used filters or whatever, will get rid of it ;-)

Thanks anyway

Here's an exact syntax taken from my custom module:

$form['formItem'] = array(
     '#type'=>'text_format',
     '#title' => t('Field Label'),
     '#value' => 'This is my value',
     '#format'=>'full_html',
);

Where "full_html" is the id of the Text format.

Cheers.

The code below works for:

• Drupal 7.2
• TinyMCE 3.4.2
• Panels 3.0 (alpha 3)

<?php
/**
 * Implementation of hook_form_alter()
 */
function mymodule_form_alter(&$form, &$form_state, $form_id) {
  
  // Add a dummy textarea to get the WYSIWYG editor loaded
  if($form_id == 'panels_edit_display_form' || $form_id == 'panels_panel_context_edit_content') {
    $form['dummy'] = array(
      '#type' => 'text_format',
      '#title' => 'test',
      '#prefix' => '<div style="display:none;">',
      '#suffix' => '</div>',
    );
  } 
  
  // Modify the submit handler of the popup to save TinyMCE display to hidden textarea
  elseif ($form_id == 'ctools_custom_content_type_edit_form') {
    $form['buttons']['return']['#attributes'] = array('onclick' => 'tinyMCE.triggerSave(true,true);');    
  }
}
?>

hi,
i'm using this code, ckeditor appears ok, but when i save i get this error:

Warning: htmlspecialchars() expects parameter 1 to be string, array given in check_plain() (line 1552 of includes\bootstrap.inc).

Do you know why? The form is always empty

	$form['ite_details_home']['ite_details_text'] = array(
    '#type'=>'textarea',
    '#title' => 'Texto',		
		'#default_value' => variable_get('ite_details_text', ''),
		'#type' => 'text_format'
		/*'#format' => 'full_html',*/
  );

Same for me, it returns an array for some reason. Although, you are specifying #type twice...

UPDATE: the value saved for #text_format is indeed an array containing keys for 'value' and 'format'.

opening it...

Warning: htmlspecialchars() expects parameter 1 to be string, array given in check_plain() (line 1552 of includes\bootstrap.inc).

Have the same problem

this just sucks! it does not show up, what I need to do, delete all the files, what a bout database?

I used the following code to get an editor up on a profile field "field_profile_about":

function mymodule_form_alter(&$form, &$form_state, $form_id) {
  if($form_id=='user_profile_form'){
    $form['field_profile_about']['und'][0]['#base_type'] = 'textarea';
    unset($form['field_profile_about']['und'][0]['#columns'][1]);
    $form['field_profile_about']['und'][0]['#default_value'] = $form['field_profile_about']['und'][0]['value']['#default_value'];
    $form['field_profile_about']['und'][0]['#type'] = 'text_format'; 
    $form['field_profile_about']['und'][0]['#format']= 1; //filtered, no image insertion, imce doesnt work
  }
}
css:
fieldset#edit-field-profile-about-und-0-format .fieldset-wrapper {
  display:none;
}

$form['formItem'] = array(
'#type'=>'text_format',
'#title' => t('Field Label'),
'#value' => 'This is my value',
'#format'=>'full_html',
);

yes! It works. Thnks petrica

It is working fine.

'#type' => 'text_format', in form array instead '#type' => 'textarea',
and also you can define format of editor
by "#format" = > "full_html"

$form['formItem'] = array(
'#type'=>'text_format',
'#title' => t('Field Label'),
'#value' => 'This is my value',
'#format'=>'full_html',
);

Thanks
Anil Rawat

Revert the status as it was reported working (#17, #18).

I'm getting this issue too...so there's definitly something going on...

Warning: htmlspecialchars() expects parameter 1 to be string, array given in check_plain() (line 1552 of includes\bootstrap.inc).

Please leave open until a resolution appears?

Update:

The issue for me seems to be centered around modifying an instance form:

$form['instance']['label'] = array(
'#type' => 'textfield',
'#title' => t('Custom Display label'),
'#description' => t('Lable to appear in form.'),
'#default_value' => isset($form['#instance']['label']) ? $form['#instance']['label'] : '',
'#weight' => $form['instance']['label']['#weight'] + 1,
'#maxlength' => '500',
'#format' => $tmp['format'],
);

I can solve this issue for myself by moving the form outside of the instance and using the solution found here: http://drupal.org/node/1355242#comment-6086212

$tmp = variable_get('lable', array('value' => '', 'format' => NULL));

$form['label'] = array(
'#type' => 'textfield',
'#title' => t('Custom Display label'),
'#description' => t('Lable to appear in form.'),
'#weight' => $form['instance']['label']['#weight'] + 1,
'#maxlength' => '500',
'#default_value' => $tmp['value'],
'#format' => $tmp['format'],
);

But the solution will not work if I bring the element inside the instance...

No answer here quite solved the issue for me. I had to come up with another solution that uses a few snippets from here as well as some of my own discoveries. This really almost needs to be a bug since the setting should be configurable or easily done at least. As per ckeditor documentation, Drupal.ckeditorInit('$element_id'); should be enough, but it isn't. Things have to be initialized from PHP and there is no easy to use function to do it. The link below was the solution I came up with, hope it helps someone else.

http://drupal.stackexchange.com/a/62452/13763

CKEditor fields store the form value differently than a plain textarea. To display the value you have to use something like this:

    '#title' => 'Title',
    '#base_type' => 'textarea',
    '#type' => 'text_format',
    '#format' => 'filtered_html',
    '#default_value' => (!empty($settings['element']['value'])) ? $settings['element']['value'] : ''

The key thing is ['element']['value'] instead of ['element'].

$form['formItem'] = array(
'#type'=>'text_format',
'#title' => t(''),
'#value' => $default_value,
'#default_value' => $default_value,
'#format'=>'full_html',
'#attributes'=> array('id' => array('basictext')),
);

with this '#attributes', the ckeditor is not show up in drupal 7.22, but removed this '#attributes' line, what's wrong ?

xuxizh, you will likely need to approach it using the solution I came up with here:
http://drupal.stackexchange.com/a/62452/13763

This method should work on any form every time if you implement it correctly. What you attempt in your above will not necessarily load the prerequisites.

I am also re-opening this issue, as the issue is deeper than a workaround as mentioned in #17/18 that only works whenever there is already a reason for the ckeditor to be loaded elsewhere on the page. Changing title to reflect what the nature of this request is as well.

There needs to be a simple hook, callback or documented way to properly enable CKEditor on a specific textarea. The stackexchange answer I linked above could be something that would allow creating this sort of callback.

When you say "enable CKEditor on a specific textarea", do you mean using FAPI or something else?

If you're talking about just using the Form API: https://api.drupal.org/api/drupal/developer!topics!forms_api_reference.h...

That works perfectly and I see absolutely no reason for all of the confusion and issues here.

The only thing you have to keep in mind is that field is stored as an array containing the value the user inputs and the format that value was stored as.

So when rebuilding the form with previously input data (such as with a settings form or content editing form) you just do something like this:

$prev_input = variable_get('my_ckeditor_field',array('value'=>'<b>booyah!</b><br/>Works as designed.', 'format' => 'full_html'));
$form['my_ckeditor_field'] = array(
  '#type' => 'text_format',
  '#title' => 'CKEditor Field',
  '#format' => $prev_input['format'],
  '#default_value' => $prev_input['value'],
);

The stackexchange solution you linked is a "small problem, big solution" kind of thing unless I'm missing the point of what you're trying to do.

Yes.. This is what I need.. Thanks for your post.

merzikain, try to enable ckeditor on the textarea in the stackexchange answer using your method and you will see why the solution was required. Perhaps it is just that particular textarea but it is certainly the best way to get it working for the webform_email_edit_form form's $form['template']['template'] field. If you have any insight on this then please let us know.

To be fair, both your situation and the situation in the drupal stackexchange are different from what is being asked for here. I posted the solution for this issue there only to help people with the problem expressed here who stumble upon that answer in their Google searching.

If someone is attempting to change a module administration form textarea your solution is the one to go with since it's the only way to do it.

But again that works as designed since module developers who put textareas in their admin forms and DO NOT set it to be a WYSIWYG enabled field likely did so on purpose and changing it could break things in the module, though not in your specific case.

The way the webform module intends the E-mail template field to be used is to provide the plain text message there and then setup your own (or use the default) email template file to wrap around that message, thereby negating the need for it to be a WYSIWYG enabled field.

You could probably post your concerns about it in the webform module and request they give the field the ability to switch between the two. If they don't like the idea they may go into more detail on why they opted to not do it in the first place.

So to sum up, if you're modifying a module generated form that is not your own, use nicholas' method. Otherwise use the FAPI method.

merzikain, thanks for the explanation. That does sum it up a bit better. I do however think this could be somehow documented in ckeditor's documentation.

Adding ckeditor to your own FAPI forms:
...

Altering FAPI forms provided by other modules to use ckeditor:
...

With the corresponding explanations of course. But with or without the explanation I am just glad that this page and the stackexchange page both exist so people can find information through search at least.

Is it possible to configure CkEditor to use a specific form element ID?

I've used below codes in my custom form:

$form['texts'] = array(
     '#type'=>'text_format',
     '#title' => t('HTML'),
     '#default_value' => 'This is my value',
     '#format'=>'full_html',
);

I could get only value.
ie,

 $form_state['values']['texts']['value'];

I couldn't get safe_value in form submit.
ie,

  $form_state['values']['texts']['safe_value'];

Thank U, phponwebsites

My editor is showing up in my module, but when I add a image using the media browser it is only outputting the [["fid"...]] string instead of the image. Looking at the variables set I am only getting the value and not the safe_value that has processed data like that above into their respective HTML content. I have checked under text formats and for the full_html format I have the setting "Convert Media tags to markup" checked. I am just not sure why that doesn't appear to be getting done.

$form['donate_body'] = array(
    '#module' => 'text',
    '#type' => 'text_format',
    '#rows' => 10,
    '#format'=>'full_html',
    '#title' => t('Donate Body'),
    '#body' => t('The body of the donate page'),
    '#default_value' => $conf['donate_body']['value'],
    '#settings' => array(
      'rows' => 10,
    )
  );