Module: CKEditor

[kongondo]

@Ryan,

Would it be possible to also make HTML Purifier configurable then - much like what you've done with CKEditor?

[teppo]

Just wanted to step in and confirm that HTML Purifier does, indeed, strip any tags it doesn't recognise as valid (i.e. part of whatever DTD it's following). ACF is the one that allows any tags it's configured to allow using a config string -- there's a world of difference there.

Also, if anyone got the idea that I'm against ACF, validating/filtering/sanitising user-generated markup, or whitelisting, I'm not. Whitelisting is a very good security practice, but as long as HTML Purifier doesn't allow valid HTML5 elements, it's outdated and useless (for many of my use cases). That may or may not be true for anyone else, but in many cases I've found it easier to avoid it -- for now.

For the record, the issue that originally led me to this decision was the fact that I could, in theory, configure HTML Purifier to allow specific data-attributes, but apparently there isn't any way to whitelist all data-* attributes, using a wildcard. That's understandable considering it's purpose and scope, but not acceptable for some of my use cases.

[mr-fan]

Short tipp for CKEEditor contents.css (copied in your site/templates/styles directory and add the path like metioned)

it's mostly easy to get the same styles like in frontend with easy import default template styles and adapt them like:

/**
 * General editor styles (regular mode only)
 *
 * See contents-inline.css for inline styles.
 *
 */

/* Template CSS ONLY */
@import url("style.css");

/* WORKSPACE EDITOR SETUP */
body  {

  }

/* CORRECT THE ORIGINAL STYLESHEET */

don't tested with the 2.5 - but my first project on 2.4 works great and simple without having the stuff twice - i ionly have one frontend stylesheet.

sometimes there is some padding needed for the WYSIWYG....or other things in the default style.css that needs to be overwritten or changed.

[Christophe]

Hello,

I've just noticed something in Processwire 2.5 as I am converting an old website to Processwire.

I was using version 2.4 and upgraded with ProcessWireUpgrade.

In Admin > Setup > Fields > Edit Field: body > Input, for Extra Allowed Content, it is written:

"Example: img[alt,!src,width,height]".

When in the docs, it is written:

// A rule accepting <img> with a required "src" attribute and an optional
// "alt" attribute plus optional "width" and "height" styles.
img[alt,!src]{width,height}

// The same as above, because the order of properties and their lists is irrelevant and white-spaces are ignored.
img { height, width } [ !src, alt ]

and:

Rule format:
elements [attributes]{styles}(classes)

By the way, I can't get ul(class), for instance, to work for the moment.

Everything is by default, except in "Details" where I have the option "Markup/HTML" enabled. I've also tried with "Unknown".

[teppo]

@Christophe: that's probably because ProcessWire, in this case, sets width and height attributes, not styles. Assuming that the terminology in CKEditor docs is correct and they're not actually referring to attributes, of course.

About your <ul>-issue, including ul(classname) should definitely work. What does your entire Extra Allowed Content setting look like -- I'm assuming that this isn't the only thing there? Also, please double-check that you're editing correct field etc. Sometimes it's the small things..

[Christophe]

@teppo: of course, "width" and "height" are attributes in this case . It's really time I go and eat something today... and rest a bit. And oxygenate my brain with some physical exercises.

For Extra Allowed Content, I'll look at it later. Thanks. I'll give you news.

EDIT: ul(classname) works (but I won't use it). I don't know what I was thinking. I had put ul(class). If I wanted to allow all classes, I guess (?) I would have to write ul[class], but that's not what I wanted.

[Christophe]

I've just encountered another CKEditor "problem" in ProcessWire.

For one page, I want to create 3 "internal links". So I've used the Anchor (flag) button.

I want the targets to be h2 tags. The generated code for the targets is: <h2><a name="h2titlename" id="h2titlename">h2titlename</a></h2>

The result is that, of course, the h2 titles take some properties from links: color and text-decoration.

I know I can use something like a[id*="anchor_"] or a[name*=anchor_] to change the properties.

But I don't "understand" why an <a> tag is generated instead of a span tag for example, or why the id isn't added to the h2 tag (perhaps it can't be added).

Also, is name=" " still used?

Thanks in advance

[teppo]

@Christophe: main reason for the anchor weirdness is probably that the anchor feature of CKEditor was built a very long time ago and has pretty much remained intact since then. "If it works, don't fix it" -- and so on. Extra attribute (name) is actually still in use (even in HTML5), though <a> element doesn't have this attribute, so it's technically non-standard here (though non-harmful too).

If current anchor behaviour is bothering you, it might be easier to find a CKEditor-specific solution to this issue from StackOverflow or the CKEditor forum. Based on some quick Googling I couldn't find an obvious solution to this, but that doesn't mean that there's none to be found.

Anyway, I'd just go with custom CSS to target headings with anchor links (like you've pointed out yourself)

[Joss]

I have had an interesting clash between Hanna Code and CKEditor.

Although they do play nicely, by default, CKEditor takes on board any formatting from anything you paste. This can make a right plate of hash out of your carefully crafted hanna codes!

However, there is a nice little paste as text plugin that is worth using

http://ckeditor.com/addon/pastetext

You can set it up so that it always removes all formatting on paste, and so save all kinds of client (or even dev) generated headaches!

[LostKobrakai]

Although they do play nicely, by default, CKEditor takes on board any formatting from anything you paste.

The first thing I remove for all my CKEditor fields are the "PasteFrom…" fields, so no client can be tempted. The best is still plain text.

[ryan]

Correct me if I'm wrong, but doesn't SHIFT+CMD+V (Mac) or SHIFT+CTRL+V (Windows) force paste as plain text in almost any application? That's the way I've always done it and it generally works well. No need for extra plugins to do this when that capability should already be OS native. 

[pwired]

Yes it does. With shift - control - v, your pasted text is format-free.

I use it in combination with autohotkey to make it work global.

"^+v"

[Joss]

Correct me if I'm wrong, but doesn't SHIFT+CMD+V (Mac) or SHIFT+CTRL+V (Windows) force paste as plain text in almost any application? That's the way I've always done it and it generally works well. No need for extra plugins to do this when that capability should already be OS native. 

The trouble is that most people do not use and therefore do not know many keyboard shortcuts - so they will happily paste away without working it out.

I didn't know that one myself.

On another point:

I have been trying to disable SCAYT so I can use the browser spell checker instead - I am finding SCAYT less than helpful and the occasional adverts annoying.

I have enabled the native spell checker using:

config.disableNativeSpellChecker = false;

But I am having trouble with the context menu - It doesn't want to turn off using the checkbox on the field input tab.

There is a workaround in that if you press CTRL while right clicking it disables the context menu, but it would be a lot nicer to just have it disabled by default.

Any thoughts?

[Macrura]

Wondering if anyone has had any luck configuring templates for ckeditor?... the plugin is included with the default package, and enabling it was easy enough, but setting the config to recognize the path to the custom templates is not working... i could edit the default in the wire/ckeditor. but somehow there must be a way for the system to allow for the setting of the custom templates js file

i tried adding this to my additional config options

templates_files:/site/templates/js/mytemplates.js

but am getting js errors of all sorts..  and the template popup is blank

also tried adding this to the config.js in /site/modules/InputfieldCKEditor

CKEDITOR.editorConfig = function( config ) {
    config.templates_files = [ '/site/templates/assets/js/mytemplates.js' ];
};

but that didn't work either...

Edit:

Decided to go a different route, and simply create a module that will append stuff to the current page body, based on a page select field; this way I can create my templates (which i call boilerplates) in processwire and then insert those boilerplates right into the editor and make modifications from there... using it for text mostly but could be use for almost any content you might need to reuse in an RTE...

here's the gist..

https://gist.github.com/outflux3/cf5807ddedfaa5c0d425#file-gistfile1-php

if anyone is interested and looks at it, let me know if you see any issues or potential problems; this will always append the body fields of the selected pages to the current page body field and then remove those from the page select field... working well in some initial tests

Edited October 7, 2014 by Macrura

[Torsten Baldes]

How do I change the UI-Language in CKeditor?

I tried config.language = "de"; in my custom config.js, but had no success.

Thanks!

[Manfred62]

How do I change the UI-Language in CKeditor?

I tried config.language = "de"; in my custom config.js, but had no success.

Thanks!

normally you do this within the language file "wire--modules--inputfield--inputfieldckeditor--inputfieldckeditor-module". If you have the german language pack installed it's already set to german.

[Torsten Baldes]

Thanks! It worked!

[Chris White]

Ive read the articles on CKeditor but need to make changes globally for CKeditor as it exists in processwire. I know for each instance of a field that uses CKeditor you can modify the tollbar, styles etc but I need this in 1 global place so that all instances of ckeditor have the same toolbars etc.

For instance Id like the full featured toolbar set vs the minimal one now set as default. I see if I go to this directory...

/wire/modules/Inputfield/InputfieldCKEditor/ckeditor-4.4.3 and in there is a config.js file. Now I believe on the ckeditor website you can modify that and it should have a global effect if that makes sense.

So my issue is that Im using multi-site setup where I'll have many different client sites but all sharing the same processwire core and I want to ensure that when we or a client creates any ckeditor text area fields that the full toolbar as an example, is used by default

Is there a way to do this in processwire?. I tried modifying the above file and purging cache but it didnt take. Also can we modify the default skin to 'Kama' 

Any help appreciated.

Thanks again

[kongondo]

Chris,

Here, we never touch the core ...You don't need to change anything in /wire/. Whatever you change there will get overwritten on upgrade

In a hurry, but have a look at this post:

https://processwire.com/talk/topic/7981-update-ckeditor/?p=77847

You playground's at /site/modules/InputfieldCKEditor/, e.g. config.js

Edited October 27, 2014 by kongondo

[Marty Walker]

Hi,

I haven't touched the settings for my CKEditor field at all so why would I not be able to see the full menu bar? Running 2.5.7.

Edit: worked it out. Looks like the settings were incomplete.

[Travo]

Hello! I have an issue where saving the page will remove ALL  the formatting from the CKEditor textarea input field. I've gone through all 'HTML purifier' type of settings, disabling all, but the issue persists. What am I missing?! What's causing this?

[kongondo]

@Tramvai,

A little bit more information would be helpful. By removing all formatting, do you mean even paragraph tags are removed? PW version?

[Travo]

Hello!

I have encontered an issue where CKEditor seems to remove all formatting and spacing of my writings when I save the page. I've tried turning off all settings related to purifying the HTML. The issue persisted.

Here are the before and after images:

Before save: http://i.imgur.com/EycqKO9.png

After save: http://i.imgur.com/SQn7gss.png

 

The whole content becomes one paragraph (<p>everything</p>).

 

ProcessWire version 2.5.3 (no idea how it got to 2.5.3 though, I downloaded 2.5.2).

Edited November 7, 2014 by kongondo
Mod edit: No need to create two posts please. Moved this here in CKEditor's support board

[Joss]

Just in case something has gone amiss with the settings, create a new textarea field with ckeditor and try that.

If that works okay, then compare the details in the input tab for both fields and see if there are differences.

[kongondo]

That's strange! Do you have any additional CKEditor plugins installed?