Hello,

I'm trying to figure out how I can add ckeditor into the custom content add textarea of the panels module. I read there is an issue with wysiwyg editors with panels 2, but I'm using Panels 3. There are ID's added to these textareas, but when I fill them out in the visibility page of ckeditor's settings, I can't seem to get them to work.

Do i need to add * 's somewhere or panel@ ?
examples are:

panels/ajax/configure/4/15.edit-body
panels/ajax/add-pane-config/4/top/custom/custom.edit-body

Any ideas?
Thanks very much in advance.
Cheers,
Danny

CommentFileSizeAuthor
#9 ckeditor-679976.patch2.18 KBmephir
#6 679976_ckeditor_panels.patch1.07 KBwwalc

Comments

danny_joris’s picture

danny_joris commented

Even when I exclude no fields, It still won't show a ckeditor textarea in the 'new cusom content' page of Panels.

wwalc’s picture

wwalc commented

Yeah, it actually does not work because of the way how CKEditor module was designed.
We'll see what we can do with that after we release the first stable version of CKEditor module.
I hope you'll be willing to test it and help us this way in finding the right way to support Panels (and possibly other dynamically created textareas).

danny_joris’s picture

danny_joris commented

Hi wwalc,

Tnx for you reply.

Would it work with fckEditor or is ckeditor a copy? My website goes online in a week or two, so if fckeditor would work well with panels, i would use that for now.

I still would love to help you out with testing releases of ckeditor, because ckeditor would still be my first choice wysiwyg app. I'll subscribe to the rss of the releases.

Cheers,
Danny

--Edit: Doesn't seem to work with fckeditor either. :/

danny_joris’s picture

danny_joris commented
Category: support » feature

This would be a great feature.

http://drupal.org/node/235764#comment-1807754
http://drupal.org/node/356480

I'm going to try if this works. Right now I'd have to install the WYSIWYG module and add tinymce instead of ckeditor i guess...

danny_joris’s picture

danny_joris commented

Hi,

Jose posted a module/patch to make the "wysiwyg" module work with panels. You can find it here: http://drupal.org/node/235764#comment-2514300 .

It might be useful to make a variation on the ckeditor standalone module?

If I was a developer, I would love to help out. I would love to test patches though.

Cheers,
Danny

--Edit: Right now I use both wysiwyg modules at the same time. TwoD, wysiwyg maintainer told me on irc that normally the wysiwyg module turns off the standalone version on install to prevent conflicting functionality. This is not the case yet because i use wysiwyg with ckeditor, which is still in dev and that functionality to turn off the standalone version is not included yet for ckeditor.

--Edit 2: Hmm, if i use both modules, i can't insert images anymore in the ckeditor - standalone version. If i turn off wysiwyg api, it will work again. Clearly they conflict each other. I don't feel good having them both installed.

wwalc’s picture

wwalc commented
Status: Active » Needs review
StatusFileSize
new 679976_ckeditor_panels.patch1.07 KB

Thanks Danny for the info. I'm attaching a patch based on what I've found http://drupal.org/node/235764, didn't check it well so marking for a review.

danny_joris’s picture

danny_joris commented

Hello Wiktor,

Thank you very much. I made the patch to the latest dev version, but I can't seem to make it work. I checked ckeditor.module and the patch was made correctly. I can't really say what caused it to fail. Is there something I can check?

I sponsored Jose for a solution. It works with imce, except for 2 things:
1. in the 'image properties' I can't fill out any properties in the input fields (vspace, hspace, with, height, etc..)
2. the ID for excluding or including does not work. I need to set the visibility settings to all textareas.
http://drupal.org/node/235764#comment-2589982

I really don't know what the best approach for this problem is. I would love to test all patches and releases committed by Jose and you.

Thanks again.
Cheers,
Danny

mephir’s picture

mephir commented
Status: Needs review » Needs work

There is only one form id, please wait a moment i will upload another patch with correct it.

mephir’s picture

mephir commented
Status: Needs work » Needs review
StatusFileSize
new ckeditor-679976.patch2.18 KB

Patch attached.

danny_joris’s picture

danny_joris commented

Hello mephir,

Thanks for sharing your patch. I tried it on a fresh dev version, but it still doesn't work. I don't know why. If there is anything I can check for you, please let me know.

Cheers,
Danny

mephir’s picture

mephir commented

There isn't any javascript errors? Please provide some more information, about web browser, which type(page, mini panel, node) of panels are you using. What is the problem, ckeditor don't update textarea when you submit form or editor doesn't load ? My patch is to dev version without wwalc patch.

danny_joris’s picture

danny_joris commented

The only javascript error is an error from image assist:

Error: Drupal.settings.img_assist is undefined
Source File: http://localhost:8082/acquia-drupal/modules/acquia/img_assist/img_assist.js?D
Line: 15

Tried in FF3.6 and Safari 4.03. I used your patch on the dev version without wwalc patch

I am using node panels: panel content >> add content >> new custom content
The problem is that Ckeditor does not load.

This is the 'response body' when I click ' new custom content:
http://localhost:8082/acquia-drupal/panels/ajax/add-pane-config/4/middle...

[ { "command": "modal_display", "title": "Configure new New custom content", "output": "\x3cform action=\"/acquia-drupal/panels/ajax/add-pane-config/4/middle/custom/custom/form\"  accept-charset=\"UTF-8\" method=\"post\" id=\"ctools-custom-content-type-edit-form\"\x3e\n\x3cdiv\x3e\x3cdiv  class=\" form-item form-item-labeled\" id=\"edit-admin-title-wrapper\"\x3e\x3clabel  for=\"edit-admin-title\"\x3eAdministrative title: \x3c/label\x3e\x3cinput type=\"text\" maxlength=\"128\" name=\"admin_title\" id=\"edit-admin-title\" value=\"\" class=\"form-text fluid\" /\x3e\x3cdiv class=\'description\'\x3eThis title will be used administratively to identify this pane. If blank, the regular title will be used.\x3c/div\x3e\x3c/div\x3e\x3cdiv  class=\" form-item form-item-labeled\" id=\"edit-title-wrapper\"\x3e\x3clabel  for=\"edit-title\"\x3eTitle: \x3c/label\x3e\x3cinput type=\"text\" maxlength=\"128\" name=\"title\" id=\"edit-title\" value=\"\" class=\"form-text fluid\" /\x3e\x3c/div\x3e\x3cdiv  class=\" form-item form-item-labeled\" id=\"edit-body-wrapper\"\x3e\x3clabel  for=\"edit-body\"\x3eBody: \x3c/label\x3e\x3ctextarea cols=\"60\" rows=\"5\" name=\"body\" id=\"edit-body\"  class=\"form-textarea resizable img_assist ckeditor-mod filterxss2\"\x3e\x3c/textarea\x3e\x3c/div\x3e\x3ca class=\"ckeditor_links\" style=\"display:none\" href=\"javascript:Drupal.ckeditorToggle(\'edit-body\',\'Switch to plain text editor\',\'Switch to rich text editor\',1);\" id=\"switch_edit-body\"\x3eSwitch to plain text editor\x3c/a\x3e\x3cdiv class=\"textarea-identifier description\"\x3eCKEditor: the ID for \x3ca href=\"/acquia-drupal/admin/settings/ckeditor\"\x3eexcluding or including\x3c/a\x3e this element is \x3cem\x3epanels/ajax/add-pane-config/4/middle/custom/custom.edit-body\x3c/em\x3e.\x3c/div\x3e\n\n\x3cdiv  class=\" fieldset collapsible collapsed\"\x3e\n      \x3ch2 class=\'fieldset-title\'\x3e\n            \x3cspan class=\'icon\'\x3e\x3c/span\x3e\x3ca href=\"/acquia-drupal/panels/ajax/add-pane-config/4/middle/custom/custom#fieldset\" class=\"active\"\x3eInput format\x3c/a\x3e    \x3c/h2\x3e\n  \n  \n      \x3cdiv class=\'fieldset-content clear-block \'\x3e\n      \x3cdiv  class=\" form-item form-option\" id=\"edit-format-1-wrapper\"\x3e\x3clabel class=\"option\" for=\"edit-format-1\"\x3e\x3cinput type=\"radio\" id=\"edit-format-1\" name=\"format\" value=\"1\"  checked=\"checked\"  class=\"form-radio\" /\x3e Filtered HTML\x3c/label\x3e\x3cdiv class=\'description\'\x3e\x3cul class=\"tips\"\x3e\x3cli\x3eWeb page addresses and e-mail addresses turn into links automatically.\x3c/li\x3e\x3cli\x3eAllowed HTML tags: \x26lt;a\x26gt; \x26lt;em\x26gt; \x26lt;strong\x26gt; \x26lt;cite\x26gt; \x26lt;code\x26gt; \x26lt;ul\x26gt; \x26lt;ol\x26gt; \x26lt;li\x26gt; \x26lt;dl\x26gt; \x26lt;dt\x26gt; \x26lt;dd\x26gt;\x3c/li\x3e\x3cli\x3eLines and paragraphs break automatically.\x3c/li\x3e\x3c/ul\x3e\x3c/div\x3e\x3c/div\x3e\x3cdiv  class=\" form-item form-option\" id=\"edit-format-2-wrapper\"\x3e\x3clabel class=\"option\" for=\"edit-format-2\"\x3e\x3cinput type=\"radio\" id=\"edit-format-2\" name=\"format\" value=\"2\"   class=\"form-radio\" /\x3e Full HTML\x3c/label\x3e\x3cdiv class=\'description\'\x3e\x3cul class=\"tips\"\x3e\x3cli\x3eWeb page addresses and e-mail addresses turn into links automatically.\x3c/li\x3e\x3cli\x3eLines and paragraphs break automatically.\x3c/li\x3e\x3c/ul\x3e\x3c/div\x3e\x3c/div\x3e\x3cp\x3e\x3ca href=\"/acquia-drupal/filter/tips\"\x3eMore information about formatting options\x3c/a\x3e\x3c/p\x3e    \x3c/div\x3e\n  \n  \x3c/div\x3e\n\n\n\x3cdiv  class=\" form-item form-option\" id=\"edit-substitute-wrapper\"\x3e\x3clabel class=\"option\" for=\"edit-substitute\"\x3e\x3cinput type=\"checkbox\" name=\"substitute\" id=\"edit-substitute\" value=\"1\"  checked=\"checked\"  class=\"form-checkbox\" /\x3e Use context keywords\x3c/label\x3e\x3cdiv class=\'description\'\x3eIf checked, context keywords will be substituted in this content.\x3c/div\x3e\x3c/div\x3e\n\n\x3cdiv  class=\" fieldset collapsible collapsed\"\x3e\n      \x3ch2 class=\'fieldset-title\'\x3e\n            \x3cspan class=\'icon\'\x3e\x3c/span\x3e\x3ca href=\"/acquia-drupal/panels/ajax/add-pane-config/4/middle/custom/custom#fieldset\" class=\"active\"\x3eSubstitutions\x3c/a\x3e    \x3c/h2\x3e\n  \n  \n      \x3cdiv class=\'fieldset-content clear-block \'\x3e\n      \x3ctable class=\"sticky-enabled\"\x3e\n \x3cthead\x3e\x3ctr\x3e\x3cth\x3eKeyword\x3c/th\x3e\x3cth\x3eValue\x3c/th\x3e \x3c/tr\x3e\x3c/thead\x3e\n\x3ctbody\x3e\n \x3ctr class=\"odd\"\x3e\x3ctd\x3e%node:uid\x3c/td\x3e\x3ctd\x3eThis node: Author UID\x3c/td\x3e \x3c/tr\x3e\n \x3ctr class=\"even\"\x3e\x3ctd\x3e%node:nid\x3c/td\x3e\x3ctd\x3eThis node: Node ID\x3c/td\x3e \x3c/tr\x3e\n \x3ctr class=\"odd\"\x3e\x3ctd\x3e%node:vid\x3c/td\x3e\x3ctd\x3eThis node: Node revision ID\x3c/td\x3e \x3c/tr\x3e\n \x3ctr class=\"even\"\x3e\x3ctd\x3e%node:title\x3c/td\x3e\x3ctd\x3eThis node: Node title\x3c/td\x3e \x3c/tr\x3e\n \x3ctr class=\"odd\"\x3e\x3ctd\x3e%node:type\x3c/td\x3e\x3ctd\x3eThis node: Node type\x3c/td\x3e \x3c/tr\x3e\n\x3c/tbody\x3e\n\x3c/table\x3e\n    \x3c/div\x3e\n  \n  \x3c/div\x3e\n\n\n\x3cinput type=\"hidden\" name=\"form_build_id\" id=\"form-efb3fcf51fc432ceb9dfad454beb681f\" value=\"form-efb3fcf51fc432ceb9dfad454beb681f\"  /\x3e\n\x3cinput type=\"hidden\" name=\"form_token\" id=\"edit-ctools-custom-content-type-edit-form-form-token\" value=\"5e6b3e8d4a779ac147f8593e5969b3da\"  /\x3e\n\x3cinput type=\"hidden\" name=\"form_id\" id=\"edit-ctools-custom-content-type-edit-form\" value=\"ctools_custom_content_type_edit_form\"  /\x3e\n\x3cdiv class=\"clear-block\"\x3e\x3cinput type=\"submit\" name=\"op\" id=\"edit-return\" value=\"Finish\"  class=\"form-submit\" /\x3e\n\x3c/div\x3e\n\x3c/div\x3e\x3c/form\x3e\n" } ]

If there is anything else I can share or try, please let me know.

mephir’s picture

mephir commented
Status: Needs review » Needs work

Thanks Danny, i will install image assist and check it.

danny_joris’s picture

danny_joris commented

Oh yeah good call. I uninstalled image assist and now it works! I don't really need image assist. It is just a test environment I'm working on, but it is good to know that it gives an error.

I'll try IMCE now.

danny_joris’s picture

danny_joris commented

Imce works, but I have the same issues as Jose's solution that I can't fill out height, width, vspace, hspace and border.

And I can't seem to use the ID to include or exclude the editor, but maybe I'm using it wrong: panels/ajax/configure/*/*.edit-body

mephir’s picture

mephir commented

Thanks for feedback i will take a look a little bit closer to this issue.

mephir’s picture

mephir commented

@Danny_Joris: first short help: this plugin(#721914: Opening IMCE window without Image Dialog) open imce into new window without open dialog and it works proper with editing panels. I will try to make something with dialogs.

Ok, i found why there was a problems with dialogs, but it only appear when you have installed plugin above.

mephir’s picture

mephir commented
Status: Needs work » Needs review

@Danny_Joris: error with dialogs exists between ckeditor dialog and jquery-ui dialog. I will report this bug.

wwalc’s picture

wwalc commented
Assigned: Unassigned » mephir
wwalc’s picture

wwalc commented

Buge reported here: http://dev.fckeditor.net/ticket/4501 and here: http://dev.jqueryui.com/ticket/4727
In the last ticket it seems that someone posted a solution for it (didn't test it).

wwalc’s picture

wwalc commented
Status: Needs review » Needs work

Almost works, but there are some bugs:
- go to node/XXX/panel_content
- using panels "add content -> new custom content"
- add some sample title, teaser, press Finish
- do not click save or cancel, but open "add content -> new custom content" again, result: plain textarea is shown instead of CKEditor.

mephir’s picture

mephir commented

Changes commited to CVS. wwalc issue(comment above) fixed.

mephir’s picture

mephir commented

@Danny_Joris: in cvs is fix which should solve your problem with dialogs.

danny_joris’s picture

danny_joris commented

Hello Mephir,

Great!! I tested it and for me it seems to work perfect. Thank you very much for all this.

I'll try the patch for Imce bridge now.

Cheers,
Danny

mephir’s picture

mephir commented
Status: Needs work » Fixed

mark as fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

memyselfandm’s picture

memyselfandm commented

Was this patch rolled into 6.x-1.2? i am using that version with panels and am seeing this same problem.