Module: CKEditor

[ryan]

That line appears to be commented out in the latest version of the module 1.1.1.

I uncommented it, but I'm still getting the <div> tags on paste.

That particular line (when uncommented) would only fix the issue when the page is saved. Meaning, you wouldn't see the effects of it until after you'd pasted in your text, saved it, then viewed it again. Are you still seeing div's even after that? 

It'd be nice if there was a way to prevent CKEditor from creating these DIVs in the first place. There probably is a way, but I don't yet know what it is. I'm not sure why I commented the DIV replacement, guess I was assuming some might have legitimate uses for the divs or something... but they seem out of place in an RTE. 

Is there a way to control tag useage like in tinymce with the valid elements option? The extra allowed content option seems to be as the name suggests, just a second layer of control.

You'd want to set ACF to be enabled (as it is by default) and that allows all tags/attributes that are specified by the set of the plugins installed to CKEditor. Then the extra allowed content lets you go beyond that with your own rules. Be sure to see the CKEditor documentation for this option, as there are quite a few capabilities you can specify in that string. 

I would like to restrict the tags to just the basics. I would also like to force some values to my headings, which I accomplished in tinymce like this:

The default ACF rules should restrict the tags to the basics. If you find it allowing something you don't want, then you may need to reduce your plugin set. I'm not sure if you'll be able to force specific attributes like you mentioned (short of using hooks to add them afterwards). As far as I know the allowed content rules are there to allow what gets through, but not to add attributes automatically. 

[janlonden]

Thanks Ryan. This means I'll have to stay with tinymce. The only reason I wanted ckeditor was the look, but the default grey skin in tinymce is good enough.

[Manfred62]

Thanks Ryan. This means I'll have to stay with tinymce. The only reason I wanted ckeditor was the look, but the default grey skin in tinymce is good enough.

there are some skins for TinyMCE:

http://pixabay.com/de/blog/posts/a-modern-custom-theme-for-tinymce-4-40/

http://thebigreason.com/blog/2008/09/29/thebigreason-tinymce-skin

https://github.com/gtraxx/tinymce-skin-bootstrap

the new TinyMCE version 4.x already looks very nice: http://skin.tinymce.com/

[janlonden]

Manfred, those were some nice skins. Thank you. I decided to use the bootstrap one.

I would love to use version 4, but I think I'll have to wait for Ryan to update to it. Or have you managed to update to version 4?

[Manfred62]

... Or have you managed to update to version 4?

Sorry, no. Didn't tried it. I'm also waiting for update.

[Soma]

I don't think there will be one very soon, it requires also to update the inputfield, link and image plugin to work with new TinyMCE API. I haven't looked into in closer but would be quite a long task including inline editing etc. Ryan and others including me are very busy ATM so don't expect to happen very soon, unless someone else takes a stab at it.

[Joe]

Hi! Does anyone here know :

How does one set CKEditor so it is possible to copy and paste directly with the mouse?

Here on the forums when using the editor to post a comment this is possible, whereas using the same browser when I try to do it on a Processwire page I get a message saying browser security settings won´t allow it and to use the system clipboard instead.

Thank you.

[teppo]

@Joe: not possible. See http://ckeditor.com/forums/Support/How-copy-and-paste-normally for details. It's a browser security feature that prevents JavaScript from accessing clipboard within iframes.

Editor used on this forum doesn't create a context menu of it's own like CKEditor, thus it's not affected by this.

[Joe]

@Joe: not possible. See http://ckeditor.com/forums/Support/How-copy-and-paste-normally for details. It's a browser security feature that prevents JavaScript from accessing clipboard within iframes.

Editor used on this forum doesn't create a context menu of it's own like CKEditor, thus it's not affected by this.

Thank you teppo! Also for the link. But still: The editor here for the forum is CKEditor though, isn´t it? I see all kinds of references to it in the source, like

/* Load our configuration */
	CKEDITOR.config.customConfig  = 'http://processwire.com/talk/public/js/3rd_party/ckeditor/ips_config.js';

So I´m still a bit confused.

[teppo]

Good point, actually. My answer was (at least) partially wrong / lacking

It seems that this security behavior (blocking access from JavaScript to clipboard) isn't (anymore?) tied to iframes. The fact remains that in order to achieve this, you'll have to disable the CKEditor context menu. There's some discussion about this at StackOverflow here: http://stackoverflow.com/questions/2246631/how-to-disable-ckeditor-context-menu.

This might cause some issues, though; one reply there claims that you'll also have to disable tabletools plugin. I'm not entirely sure of the scope of that plugin, but I'm afraid that disabling it might make it impossible to add tables -- or at least edit them once they've been added.. which is kind of problematic. (In this forum tables are disabled altogether, so this isn't an issue here.)

Anyway, you might try those tips if pasting with mouse / right click feels important enough

[Joe]

There's some discussion about this at StackOverflow here: http://stackoverflow.com/questions/2246631/how-to-disable-ckeditor-context-menu.

This might cause some issues, though; one reply there claims that you'll also have to disable tabletools plugin. I'm not entirely sure of the scope of that plugin, but I'm afraid that disabling it might make it impossible to edit tables once they've been added for the first time.. which is kind of problematic.

You made my day!    Thank you again:  With this I was able to do it really quickly.

Actually, thanks to the developer of the Processwire CKE plugin (Ryan I think) it is even easier than having to change the CKEditor config.js:

All you need to do is go to the field setting for the field that uses the editor, choose the "Input" tab and then

under "CKEditor Settings" > "Remove Plughins" you add:

"contextmenu,liststyle,tabletools";

That does it!

Luckily I don´t need tables in the editor either. I like to keep the options there fairly simple to prevent editors from being able to mess up the pages. If I needed an option for tables somewhere I´m sure there would be either a solution without CKEditor or else I could set the field to the old settings (only for that one instance of CKE, an added advantage of doing it this way is that you can configure each instance separately). As for "liststyle", I´m not sure what that refers to. Anyway I still have the Options for bulletet and numbered Lists in my editor and they still work as before.

[cmscritic]

How do I add the text-align option? I added the option (justifyleft, JustifyCenter, JustifyRight, JustifyBlock) to the toolbar, downloaded the plugin justify from the ckeditor website and copy it to the plugins directory, also put the name of the plugin (justify) in the configuration extra plugins. Text-aligns buttons appear but are disabled, anyone could help me to make this work?

You add them in the field options. So for instance, go to edit field -> body and in the ckeditor settings->ckeditor toolbox text area, add the appropriate functions you want to have enabled. You can get a list of them from here: http://docs.ckeditor.com/

[cmscritic]

I just figured this out. In the field options (which I identified above) I have the following in my ckeditor toolbar box:

Format, Bold, Italic, -, RemoveFormat
NumberedList, BulletedList, -, Blockquote, JustifyLeft, JustifyCenter, JustifyRight
PWLink, Unlink, Anchor
PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord
Scayt, -, Sourcedialog

and they work well. Hope that helps.

[bfncs]

Hey Ryan,

being a huge fond of the CKEditor module, I just stumbled over a tinyish bug: the icon images of the Codemirror plugin are actually missing. I already filed a pull request, would be great if you could merge that anytime soon:

https://github.com/ryancramerdesign/InputfieldCKEditor/pull/11

[adrian]

Thanks for putting together the PR for Ryan. Just for the sake of keeping connected posts linked, this post and the following reply from Ryan are relevant:

http://processwire.com/talk/topic/3023-module-ckeditor/?p=42523

[SchmidtchenSchleicher]

Hi,

I am new to ProcessWire. After about a week of working with it, I really like it!

Now I need support for the first time... I cannot create a link to a PDF file in CKEditor module.

User "Marco" described exactly the same problem I actual have, and later he added to his post http://processwire.com/talk/topic/3023-module-ckeditor/page-5#entry43492 that he has solved the problem.

I did not.

As you can see in attached file there is a file called "test.pdf" available in my page. This file resides in a field labeled "Datei" (type = "File") which is part of a "Repeater" field labeled "Dokumente". As "PDF" is listed as valid file extension, the file upload worked fine.

In the page's template, there is a "Repeater" field labeled "Inhaltselement", which contains a field "Body". "Body" is of type "Textarea", its input type is "CKEditor".

After highlighting some text and clicking "Insert Link" (see ), a new window "Insert Link" appears. There it is possible to "Link to a file". When I open the Select Dropdown, only "images - team.jpg" is selectable (see ). "team.jpg" is an image that is available on the page, too. But I miss "test.pdf"...

Is it possible to link to a file that is no image, and if so - how do I do that? Am I missing some configuration options?

Thank you!

Andreas

[Radek]

Hi and welcome to forum Andreas.

I made little investigation. This is not problem of CKEditor as this behaviour is same as in MCE.

If the file field is in the repeater, link to file dont offer its values (not only pdf).

Do you need repeater in this case (from screenshots its looking like not)?

If you put file field directly to your template it will work.

[SchmidtchenSchleicher]

Hi Radek,

thank you for the quick reply!

You were right - a "Repeater" with "File" field inside was not necessary because a field of type "File" offers multiple file uploads out of the box. I did not know that... By setting "Maximum files allowed" to 0, I achieved exactly what I thought was only possible by using a "File" field inside a "Repeater" field.

Very nice solution - another reason for liking ProcessWire

Thanks again

Andreas

[adrian]

In case you guys haven't seen it  yet:

http://ckeditor.com/demo#widgets

New content blocks and captioned images etc. Might be a useful addition, although the default box is pretty ugly

[Martijn Geerts]

@adrian:

That looks nice. I think we all struggle with 'how to insert images'. If there's a way to restrict most of the image properties, then it's a good way to go in my opinion.

[Martijn Geerts]

Found a little typo on "/site/modules/InputfieldCKEditor/ckeditor-4.3.0/plugins/pwlink/plugin.js" line 70 Which prevent popup the modal for the link.

-    var modalUri = config.urls.admin + 'page/link/?id=' + page_id + '&modal=1' + lang_id;
+    // typo's fixed below
+    var modalUrl = config.urls.admin + 'page/link/?id=' + pageID + '&modal=1' + lang_id;

[ryan]

Thanks for your message and PR. This was fixed yesterday morning as soon as I saw it. I can only guess that I was still getting an older cached version of the JS file when testing this change.  

[Neeks]

When I click the link button nothing happens, in either inline or regular mode. Other popups work great in editor. Same results on different pages.

PW 2.3

CK editor: 1.1.2

Browser: Google Chrome latest
OS: windows 8

Theme: MetroWire  (If there is an easy way to disable the theme I can do that and test again)

JS console (on click of "add link" button)

Uncaught ReferenceError: page_id is not defined plugin.js?t=DAED:71
loadIframeLinkPicker plugin.js?t=DAED:71
exec ckeditor.js:175
CKEDITOR.tools.extend.execCommand ckeditor.js:237
CKEDITOR.tools.extend.click ckeditor.js:633
d.execute ckeditor.js:634
(anonymous function) ckeditor.js:635
(anonymous function) ckeditor.js:27
CKEDITOR.tools.callFunction ckeditor.js:27
onclick ?id=1002:1

Awesome module, it's getting a lot of use on this end. Thanks.

Update: I realize when I code links manually and double click the link the the correct dialog box comes up to edit. however the edit link/recreat new link button at top of the tool bar doesn't respond.

[Martijn Geerts]

Hi Neeks, It's fixed in the latest update (week ago).

[titanium]

Is there a reason why the "magicline" plugin is disabled by default? I would like to use it. I enabled it by removing the entry from "Removed Plugins" and setting it in "Extra Plugins". After this, the magicline seems to work at first sight. But if you click the red square on the right, console shows an error. 

Chrome says:

Uncaught TypeError: Cannot read property 'nodeName' of undefined 

Firefox says:

TypeError: this.$ is undefined

It's a vanilla installation of the latest ProcessWire dev (2.3.8), no other modules beside the default ones. Since everything works with a local copy of CKEditor 4.3.0, I'm starting to think that there are problems with the ProcessWire integration. I can't get the CKEditor "Widget" plugin + simplebox either.