Module: CKEditor

[Zahari M.]

Really Appreciate you looking into this...

Will try what you said.

I need to head home now.... will be back at this later!

Thanks mate!!

[Zahari M.]

Hi Kongondo

Just a quick question for you...

The screenshot that you just showed where you had a field for Extra Allowed Content.... your field looks like it is a text area around ~6 rows high.

On my installation, for some reason.... the Extra Allowed Content field is a single row in height.

So, I can, following your instructions, add the figure tag and it does indeed work!

But the problem I have now is that since the Extra Allowed Content input is only 1 row high, I can only enter 1 tag!! Hitting enter does not give me a line return to add another tag beneath it. Hitting enter ends up saving the page.

Any ideas why this is so?

Strange!

[adrian]

On my installation, for some reason.... the Extra Allowed Content field is a single row in height.

The multiple row line height is new in a fairly recent PW dev version.

[Zahari M.]

Hi guys

For some reason I wasn't getting the latest dev version.

I do now and all is well. I can add multiple tags now.

Thanks a lot Kongondo & Adrian.

You guys rock!

[mr-fan]

Is there a easy way to change the root for the pagetree of the insert images modal?

i've all the images central in a pagetree with cats and images similar like the ImageManger does.

I wanna only show the image-root and the subpages for the choice?

regards mr-fan

[adrian]

Use this simple module. Just replace the xxxx with the ID of the root page you want to start from. EDIT: ignore this version and use the configurable one posted on gist: https://gist.github.com/adrianbj/437e3945e9d774f5a67e

class ChangeImageSelectParent extends WireData implements Module {

    public static function getModuleInfo() {
        return array(
            'title' => 'Change Image Select Parent',
            'version' => 1,
            'singular' => true,
            'autoload' => true
            );
    }

    public function init() {
        $this->addHookAfter('ProcessPageEditImageSelect::execute', $this, 'changeParent');
    }

    public function changeParent(HookEvent $event) {
        $event->replace = true;
        $event->return = str_replace("rootPageID: 0", "rootPageID: xxxx", $event->return);
    }

}

[mr-fan]

sorry admins for the double post but i figured out that this is not really a CKE question so:

https://processwire.com/talk/topic/7439-processpageeditimageselect-hook-and-change-default-page/#entry71665

i will crosslink the solution!

Last but not least! Thank you very much i will try and give feedback asap....

Use this in a simple module. Just replace the xxxx with the ID of the root page you want to start from.

     public function ready(){
        $this->addHookAfter('ProcessPageEditImageSelect::execute', $this, 'changeParent');
    }

    public function changeParent(HookEvent $event) {
        $event->replace = true;
        $event->return = str_replace("rootPageID: 0", "rootPageID: xxxx", $event->return);
    }

[adrian]

I think you added the solution to the wrong post

By the way, I updated my post to make it a complete working module for you!

Of course this module could be extended to make the parent page selectable via the module's config settings.

[mr-fan]

;)

the same time i'll did my first module with your code and the hellowourld.module.......i like PW really!!!

Did touch no line OOP Code before but in this case i've trust nothing to mess because all is logical!!

Renamed my file to your suggested name and added as a zip file.

other questions in the other topic now i wann learn how to add a textfield as option in the backend (now i'm hungry)

i will post this on the second threat, too.

Many thanks adrian for the hint and the example.

ChangeImageSelectParent.zip

[adrian]

Here is a configurable version. Choose the desired parent page from the module settings:

https://gist.github.com/adrianbj/437e3945e9d774f5a67e

[mr-fan]

I've done (with some outdated tuts on moduledev i think) something like this for input the id and it works....but your example teach me much more:

   public static function getModuleConfigInputfields(array $data) {
        /**
        * from a example from ryan
        **/
        $inputfields = new InputfieldWrapper();
        // ask for the id
        $field = wire('modules')->get('InputfieldInteger');
        $field->name = 'parentid';
        $field->label = "Parent ID for the ImageSelect pagetree";
        if(isset($data['parentid'])) $field->value = $data['parentid'];
        $inputfields->add($field);

    }

	/**
	* Change the rootPageID to the needed parent page for the pagetree
	*
	*/
	public function changeParent(HookEvent $event) {
	   $event->replace = true;
	   $event->return = str_replace("rootPageID: 0", "rootPageID: $this->parentid", $event->return);
	}

[Zahari M.]

Hi Kongondo and Adrian

So after playing with CKEditor for a couple of days trying to configure it here are some observations...

If you look at the "Extra Allowed Content" input area, it says...  "Applies only if the "Use ACF" checkbox above is checked. You may enter multiple rules by putting each on its own line". This is good. Some of us need a few extra gfs tags

So I added figure and figcaption here to the "Extra Allowed Content" input area.

Now what I have found is that if "Use HTML Purifier?" is turned "Off", then CKEditor will allow these tags to exist in our editor.

But It does not matter if "Use ACF?" is switched on or off. CKEditor still accepts and keeps the figure and figcaption tags when we save the page. So what I gather here is that "Use ACF?" is not switching on and off whatever tags we put into "Extra Allowed Content".

So... the user interfaces help tips are worded in a way that make me believe that if I need my editor to acknowledge and respect the existence of certain tags, I should add them in the "Extra Allowed Content" input area and turn on "Use ACF?".  But this is not the case.

However, if the interface help tips said something like this... "Need additional tags? Then turn off HTML Purifier and add any extra needed tags, one on each line in the Extra Allowed Content area",..... then the current functionality of the radio buttons make sense!

So guys... what do you all think its supposed to be? Are the ACF & Purifier radio buttons doing all that they should? Or are the interface  "help / instructions" in need of some rewording?

[teppo]

@Zahari: extra allowed content is exactly what the name suggests; it lets you allow elements that are not normally allowed, thus "extra".

Admittedly the help text could specifically say "extra" before the "allowed content rules", or it could list defaults, but former seems somewhat unnecessary (it's in the title already) and latter might be complicated (since PW doesn't define defaults, only CKEditor JS plugin knows what they really are).

Buttons are doing exactly what they're supposed to, but help texts could use some tweaking -- even if just to specifically mention that enabling HTML Purifier will, in many cases, effectively undo rules added to extra allowed content.

[Zahari M.]

Hi Teppo

Thanks for clarifying that the buttons are working as they are. That certainly helps.

A silly question for you. Or maybe I don't understand how things are supposed to be. I'm one slow learner!!!

I would say that turning on HTML Purifier is a good thing and if possible it would be good to keep it on most all the time.

But lets say that I really need CKEditor to allow me to use the <figure> element or tag.

So to allow me to use the <figure> element or tag inside my CKEditor content area without it being stripped away and replaced with <p></p> tags, I need to go to Extra Allowed Content and add <figure> here.

Now to actually have usage of <figure> or anything inside Extra Allowed Content I am now forced to turn off HTML Purifier for them to work!

Would it not be better that whatever is typed into Extra Allowed Content is added to the list of allowed HTML tags inside Purifier? Then we can keep HTML Purifier on and just extend it with whatever tags we entered in Extra Allowed Content!

Hope what  I am asking is clear..

Thanks Teppo!

[Manfred62]

I think, it's possible to configure HTMLpurifier for html5: http://htmlpurifier.org/live/configdoc/plain.html#HTML.Allowed

Must be in this file?: https://github.com/ryancramerdesign/ProcessWire/blob/dev/wire/modules/Markup/MarkupHTMLPurifier/htmlpurifier/standalone/HTMLPurifier/ConfigSchema/schema/HTML.Allowed.txt

Maybe someone knows how to do this?

[Zahari M.]

Hi Manfred62

Thanks for your reply and looking in to this too.

I too wondered earlier how we can extend Purifier to allow for some extra tags.

But I'm also thinking out aloud and asking or wondering or suggesting it works like this...

If HTML Purifier is turned off then no filtering.

If HTML Purifier is turned on then it is filtered with some internal list.

If HTML Purifier is turned on and extra tags are added in Extra Allowed Content, then it is filtered with the internal list of tags plus the tags we defined within Extra Allowed Content.

The way I understand it now, we have to deactivate a useful tool and lose some helpful protection just to allow the use of even one extra tag!! Seems a very extreme selection case no?

As an aside Manfred's question is interesting... how do we add some extra tags to the current HTML Purifier list?

Or have I totally misunderstood how to use the interface and set it up!! Always possible with me... 

Thanks guys

[teppo]

HTML Purifier doesn't support new elements added in HTML5. It does indeed support specifying allowed elements (like you've just noted), but here's the catch:

If you attempt to allow an element that HTML Purifier does not know about, HTML Purifier will raise an error. You will need to manually tell HTML Purifier about this element by using the advanced customization features.

Based on a quick glance at those advanced customization features, adding support for new elements is doable, but allowing valid HTML5 tags would seem to require a custom DTD (or something like that) -- or at least a whole lot of new rules. That's where I lost my interest and switched the whole thing off. HTML Purifier has caused me more harm than good and until it gets a proper update, I don't think it's really worth it.

[Zahari M.]

Hi Teppo!

Thanks for the explanation. Much appreciated.

Somewhat sad as it means we are stuck with html4 content sandwiched between html5 frameworks!!

So I guess the moral to the story here is that if someone needs html purifier and html5, start learning Hanna codes

That being the case I shall join you and just switch the thing off just like you!

Thanks Teppo !

[kongondo]

Hi Teppo!

Thanks for the explanation. Much appreciated.

Somewhat sad as it means we are stuck with html4 content sandwiched between html5 frameworks!!

So I guess the moral to the story here is that if someone needs html purifier and html5, start learning Hanna codes

That being the case I shall join you and just switch the thing off just like you!

Thanks Teppo !

@Zahari,

Not sure that's what Teppo meant? How I understood this is that: 'the moral of the story, if you want to use HTML5, turn off HTML Purifier', no? You are then free to use CKEditor's extra content to add your extra tags. BUT. if using CKEditor's inline mode, IT IS HIGHLY (am not shouting ) recommended to use HTML Purifier

[cmscritic]

I'm unsure if anyone mentioned this or not but in the most recent dev release of PW you installed on my new site, Ryan, it defaults to using CK as the editor of choice. My issue here is that CK will wipe any basic div tags and other code you enter into HTML mode as soon as you go to save the page. The problem is there is no clean html mode that you can be in when you save so the wysiwyg editor begins to strip things. While Hanna code is a great module, it doesn't work well for instances like this and I've had to revert back to TinyMCE. 

I prefer the look and feel of CK but not if these issues persist.

My 2 cents.

[kongondo]

Mike, not sure you've read previous posts. To avoid wanton stripping of tags, in CKEditor, Turn off HMTL purifier and add add the extra code you want in the 'extra allowed content'....Disclaimer - not sure if this is the best way to go about this + Purifier important if you will be using inline editor mode...

[LostKobrakai]

If I understand the description right html purifier does only strip/change malicious and malformed content. So the allowedContentFilter of CKEditor would be the issue. With a look in the docs you find that adding "div[*]" allows for every kind of div to be present. Also there's a new option in the dev version, which converts divs to p tags. So this has to be disabled, too. 

[cmscritic]

Mike, not sure you've read previous posts. To avoid wanton stripping of tags, in CKEditor, Turn off HMTL purifier and add add the extra code you want in the 'extra allowed content'....Disclaimer - not sure if this is the best way to go about this + Purifier important if you will be using inline editor mode...

I actually didn't read them all admittedly as this is a long discussion and I was short on time but thank you for that. To be honest, I don't see a reason worthy of switching from TinyMCE if I have to disable switches and turn off options in order to make the editor work as intended, know what I mean?

[kongondo]

If I understand the description right html purifier does only strip/change malicious and malformed content. So the allowedContentFilter of CKEditor would be the issue. With a look in the docs you find that adding "div[*]" allows for every kind of div to be present. Also there's a new option in the dev version, which converts divs to p tags. So this has to be disabled, too. 

Well at least three of us (read above...) have tested this and HTML Purifier is stripping the 'benign' HTML5 tags that have been added to the extra allowed content field

I actually didn't read them all admittedly as this is a long discussion and I was short on time but thank you for that. To be honest, I don't see a reason worthy of switching from TinyMCE if I have to disable switches and turn off options in order to make the editor work as intended, know what I mean?

Sure

Edited September 2, 2014 by kongondo
Clarified that it is HTML5 tags being stripped out

[ryan]

If you turn off ACF and turn off HTML Purifier, you've essentially got what we had with TinyMCE. I grew increasingly uncomfortable with TinyMCE as ProcessWire has grown. The fact that it is open with regard to what markup it will allow also creates quality problems for a site especially over time. But an even bigger issue is security. An RTE without a strong filter behind it is a security hole because markup from RTEs is already entity encoded and ready for output. If a user with access to the RTE knows what they are doing, they can manipulate the POST request to the server, adding in some of their own markup (and XSS). This is particularly easy to do with TinyMCE. And once you can do that, you can get very creative indeed. A non-superuser with page edit access using TinyMCE could feasibly insert a script to make a front-end page render like a PW admin login screen. The next time the superuser views that page on autopilot, they type in their password and then the system is compromised. So CKEditor + HTML Purifier prevents that problem. ACF doesn't prevent that problem, but goes a long ways towards solving the other major RTE issue: markup quality and preventing markup degradation. You can turn those filters off, but it's important to understand the compromises that result. If your admin is limited to yourself or just superusers then you probably have no need for HTML purifier. But I sleep a lot better at night knowing we have a secure solution for the RTE. Since CKEditor can be configured to be as open-ended as TinyMCE (even if we don't recommend it for anyone but superusers), I don't necessarily see any reason to use TinyMCE any more... we now have a stronger feature set and much nicer plugin system for CKEditor than we ever had for TinyMCE. But I'll still be maintaining and supporting TinyMCE as a 3rd party module for a long time to come. On most of the sites where I'm already using TinyMCE, I'm likely to keep using it. But for any new installations CKEditor is definitely the way to go.