Module: CKEditor

[Travo]

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.

Thank you for the suggestion! Making a new textarea fixed my issue!

And during the creation... I think I found what caused the issue, I will try to explain it in points:

• When you've created a textarea field and its input type is still 'Textarea', you have different settings available. (http://i.imgur.com/M27haJB.png)
• One of these settings is 'Strip tags', which removes all HTML tags. (http://i.imgur.com/oQO9YCU.png)
• When you check the setting and switch to CKEditor, the 'Strip tags' setting is still enabled in the background, but you can no longer see or edit the setting.

That's what caused the problem for me. Sounds silly and frankly, even I don't know why I decided to enable it.

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

Hi Kongondo, thank you for moving my topic and for your concern. Could you please delete the double post that happened due to the move of my post? Thank you in advance.

PS: I love your Blog module! It is awesome in many ways and your work is greatly appreciated!

[Joss]

ooh, that is interesting. I cant think I have ever converted from one to the other like that so I had never noticed.

[pwFoo]

Nice. Works fine with form api as frontend page edit, but needs JqueryCore and JqueryUI modules as dependencies.

So I wouldn't use it as real frontend inline editor for logged in users because of the overhead of that two modules. Instead a edit link loads the editable page.

[nyo08]

Hello PWers

I work with PW 2.5.3 and have CKEditor Module (version 1.2.8) associated with the "body" field.

So, in back-office, when I edit the body, I have CKEditor Toolbar (that's ok) --> in it, I have the "source" button where I can put HTML directly... 

My problem is that some tags code arenot interpreted (I think that's not the right word...), and finally the html I add isnot included.

Example : 

I put 

<span style = "color:red;"> blablalbaa </span>

I click OK and Save and the red color doesn't appear... and if I take a look in the source code, "style="color:red;" had disappeared.

How can I activate the "style" tag inclusion in CKEditor ?

Thanks for your help

Edited January 21, 2015 by kongondo
Hi. I moved your thread here, the CKEditor support forum

[adrian]

In the "Extra Allowed Content" section on the Input tab of your field's settings, add the following:

span{!color}

That will allow span tags so long as the color style attribute is set. You can get more details here: http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules-section-2

If you want to allow span tags no matter what attributes they have, then use this:

span[*]{*}(*)

[nyo08]

In the "Extra Allowed Content" section on the Input tab of your field's settings, add the following:

span{!color}

That will allow span tags so long as the color style attribute is set. You can get more details here: http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules-section-2

If you want to allow span tags no matter what attributes they have, then use this:

span[*]{*}(*)

yes that's good Thanks. I'm studying CKEditor docs for more options

[Marty Walker]

I'm sorry if I've missed how to do this in this thread but is there any way to get rid of this horrible 'Link' popup when I go to edit a link?

[alan]

Hey Tom, did you ever find out the cleanest way to add auto grow to CKEditor by any chance?

ANSWER

As soon as I posted here asked Tom I of course found out For the build I am on at least (dev 2.5.18) it's as simple as download the plugin and install it per the PW Admin pointer.

Edited February 7, 2015 by alan

[Nico Knoll]

Is it possible to have CKEditor plugins in the "site -> modules" folder? Cause I'm working on a plugin for ckeditor which is combined with a ProcessPage modal (like pw_image) and don't want the user to have to move the plugin to the wire folder after install...

[Mike Rockett]

There's already a site folder for CKEditor... I place skins and plugins there...

[tuxy]

Hello,

For a basic-page a used CKEditor for the body-field in the template-file:

<div class="content">
   <?php echo $page->body; ?>
</div>

The content in the editor:

And here you see the result:

You can see that some markup is gone!

Here you see the source-code from the browser:

...
<div class="content">
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam officia, a! Ipsam qui, blanditiis reprehenderit molestias consequatur ad eaque quo? Minus beatae consequuntur ullam error ab repudiandae quos ipsum, reprehenderit!</p>

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam officia, a! Ipsam qui, blanditiis reprehenderit molestias consequatur ad eaque quo? Minus beatae consequuntur ullam error ab repudiandae quos ipsum, reprehenderit!</p>
</blockquote>

<p><br class="Apple-interchange-newline" /><img alt="Stieren" class="align_left" src="/site/assets/files/1014/serie-stier.jpg" style="line-height:22.3999996185303px;" /></p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam officia, a! Ipsam qui, blanditiis reprehenderit molestias consequatur ad eaque quo? Minus beatae consequuntur ullam error ab repudiandae quos ipsum, reprehenderit! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam officia, a! Ipsam qui, blanditiis reprehenderit molestias consequatur ad eaque quo? Minus beatae consequuntur ullam error ab repudiandae quos ipsum, reprehenderit!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam officia, a! Ipsam qui, blanditiis reprehenderit molestias consequatur ad eaque quo? Minus beatae consequuntur ullam error ab repudiandae quos ipsum, reprehenderit!</p>    	</div>
...

How can I made the same layout in the browser?

Ex: image left and the text right, italic quote, ...?

Editor version:

(I don't use htmlspecialchars)

What do I wrong??

Regards,

Christophe

[mr-fan]

Just to sort up the things you've mixed...

Frontend Look == Your Choice and your CSS under /site/templates

Backend Look / CSS Classes in CKE / Float right, left and so on.... == just Backend styling not related to the Frontend until you setup up all that stuff...

Let's go How to:

1. Frontend first - How your CSS get the HTML from the Wysiwyg?

2. Frontend CSS - What classes you use for your template image left, right and so on

3. What is CKE changing in the Source if you click on "Image left" -> take a look for that Output with the source button in CKE after changing something with the Style things

3. CKE modification to get the look like in the frontend -> 2 files are to setup/create/put the path in the field settings!

--> mystyles.js (may you create one in /site/templates/scripts)

--> contents.css (may you create one in /site/templstes/styles)

What? What do this files...ok this two files do two things...

4. mystyles.js

This could be set in your CKE Field to the path of your choice and "override" the items in the "styles" menu!! Really cool stuff to setup here.

Example from real Life (the labels in german but i think you get the idea how to use it...):

CKEDITOR.stylesSet.add( 'mystyles', [

	//images
    { name : 'Bild links mit Vorschau'        , element : 'img',  attributes : { 'class' : 'thumbnail align_left vorschau' }  },
    { name : 'Bild rechts mit Vorschau'        , element : 'img',  attributes : { 'class' : 'thumbnail align_right vorschau' }  },

	//lists
    //{ name : 'Liste mit Pfeil'        , element : 'ul',  attributes : { 'class' : 'pfeil' }  },
    //{ name : 'Liste mit Check'        , element : 'ul',  attributes : { 'class' : 'check' }  },

	//headings
	{ name : '3 Alt. Schrift'		, element : 'h3', attributes : { 'class' : 'extrafont' } },
	{ name : '4 Alt. Schrift'		, element : 'h4', attributes : { 'class' : 'extrafont' } },

	//tables
    { name : 'Tabelle normal'        , element : 'table',  attributes : { 'class' : 'pure-table' }  },
    { name : 'Tabelle mit Rahmen'        , element : 'table',  attributes : { 'class' : 'pure-table pure-table-bordered' }  },
    { name : 'Tabelle nur Zeilentrennung'        , element : 'table',  attributes : { 'class' : 'pure-table pure-table-horizontal' }  },

    /* Object Styles */
    //  This styles are only available when you select the defined objects. E.g. when selecting an image
    //  you can control here with the styles dropdown the styling.

    // Here you can define Divbox classes as well these are shown on "Create div Container"
    {
        name : 'Gruene Box',
        element : 'div',
        attributes :
        {
            'class' : 'alert alert-success',
        }
    },
    {
        name : 'Gelbe Box',
        element : 'div',
        attributes :
        {
            'class' : 'alert alert-warning',
        }
    },
	{
        name : 'Rote Box',
        element : 'div',
        attributes :
        {
            'class' : 'alert alert-danger',
        }
    }

]);

5. contents.css

The contents.css override the CSS of the content of the CKE field in the backend so this is the thing where you tell the CKE how to look like your frontendcontent...for example also the background image fo the frontend could shown up in the backend...

Example:

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

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

 /* WORKSPACE EDITOR SETUP */
body  {
	padding: 10px;

  }

/* CORRECT THE ORIGINAL STYLESHEET */

Oh this was the easy part just import your stylesheets in there and correct some wired things like add some padding in the CKE only to get some whitespace for the editor...

Some more Links on this topic:

https://processwire.com/talk/topic/8342-adding-css-classes-to-ckeditor/

http://docs.ckeditor.com/#!/guide/dev_styles

http://www.flamingruby.com/blog/processwire-weekly-13/#1-1

regards mr-fan

[tuxy]

Hi mr-fan,

Thanks for this fast and awesome info.

I try it and it works!!!!!! 

Christophe

[nyo08]

Hello, 

An other question for U : 

I want to add a specifc flash player in my source code : 

<object width='320' height='462'>
<param name='movie' value='http://www.balbala.fr/swf/flvplayer.swf'></param>
<param name='flashvars' value='skin=http://www.balbala.fr/swf/Skin_desc_play.swf&file=http://www.balbala.fr/rss/blabla_600.xml&playlist=bottom&playlistsize=250&stretching=uniform'></param>
<param name='allowfullscreen' value='true'></param><param name='allowscriptaccess' value='always'></param>
<embed src='http://www.balbala.fr/swf/flvplayer.swf' width='320' height='462' bgcolor='#000000' allowscriptaccess='always' allowfullscreen='true' flashvars='skin=http://www.balbala.fr/swf/Skin_desc_play.swf&file=http://www.balbala.fr/rss/blabla_600.xml&playlist=bottom&playlistsize=250&stretching=uniform'></embed>
</object>

but Ckeditor doesn't allow me to do that. I paste code in the source, save, and it disappears. I look into "extraallowedcontent" and add some parameters like object and embed but doesn't work...

It's cke ? or deeper than that.. like specific compatibility between flash and PW.

Thanks for help 

[mr-fan]

for CKE you will need some CKEEditor addon like this one:

http://ckeditor.com/addon/flash

be shure about the right settings have a read in this thread:

https://processwire.com/talk/topic/7854-iframes-are-being-stripped-from-ckeditor-field-even-when-explicitly-allowed/#entry76826

OR have a look at this textformatter:

http://modules.processwire.com/modules/textformatter-video-embed/

OR other way could be to work with HTML hannacode.

https://processwire.com/talk/topic/3745-hanna-code/

best regards mr-fan

[nyo08]

for CKE you will need some CKEEditor addon like this one:

http://ckeditor.com/addon/flash

be shure about the right settings have a read in this thread:

https://processwire.com/talk/topic/7854-iframes-are-being-stripped-from-ckeditor-field-even-when-explicitly-allowed/#entry76826

OR have a look at this textformatter:

http://modules.processwire.com/modules/textformatter-video-embed/

OR other way could be to work with HTML hannacode.

https://processwire.com/talk/topic/3745-hanna-code/

best regards mr-fan

That's work with Flash addon for CKE 

I'll look at hannacode, that seems really interesting module.

Thanks again 

[mr-fan]

A other interesting CKE addon is:

http://ckeditor.com/addon/widgettemplatemenu

intro + demo:

http://albatrossdigital.com/node/41

could be used for bootstrap widgets, own snippets, maps, templates and so on....very interesting for editors with massive use of Wysiwyg Content...

[formmailer]

Hi!

It sometimes happens that I need to include Javascript in the body field (using the source code editor). But after switching to CKEditor the Javascript gets removed when saving the page.

A work around for this is unchecking ACF and the HTML purifier, saving the page and activate these options again. But I rather would have a more user friendly solution. I assume I can do with Extra Allowed Content, but that didn't work.

Does anyone know how to allow javascript, without disabling HTML purifier (and ACF)?

Thanks!

//Jasper

[mr-fan]

Is it always the same JS snippet or just 2-3 variants??

In this case you could easy use Hanna Code for this like [[myjs]] in the wysiwyg.

[formmailer]

No, it's different code every time (eg. code from affiliate network).

/Jasper

[mr-fan]

...just fast from the mobile....

What about a extra field / two fields.

One check box for [ ] include js. - if checked show under the body the special field ( could be made with ace editor for syntaxhighlighting too) ....should work cleaner as code in the WYSIWYG?

Regards mr-fan

[bbeer]

I try to add a callto: or tel: link with CKEditor, but it is being cleaned out each time I save the Page. Is there a way to have CKEdtior accept such links.

I've tried with 

a[tel:,callto:] and href[tel:,callto:] in extra Allowed Content but that does not work.

[Mike Rockett]

@bbeer: Surely that's supposed to be a[href^=tel:], a[href^=callto:]?

[bbeer]

Hi Mike

it now wraps the numbre inside an a tag, but it does not output the proper link.

[Mike Rockett]

Sorry, I didn't actually test it, and can't do so right now because I'm recovering from a system refresh that was essentially forced upon me... If someone else hasn't helped you out by the time I'm up and running, I'll have a look to see what's wrong there. I have a feeling this might involve a CKE plugin, but I could be wrong. Extra Allowed Content should be able to do it...