Module: CKEditor

[bbeer]

Mike

I appreciate your help. Hope the system recovery goes smooth.

[mr-fan]

Next one that could solved with HannaCode like

[[a nr=012345/67891]] should create a working a tag (don't tested just thought loud).

If i've time i could create a Hanna on this - but it should be not that hard.

[Mike Rockett]

Right, this doesn't seem to be a CKE thing... This is more of a ProcessWire thing, by the looks of it. Granted, I'm just assuming that's the case as the trimming still happens when ACF is turned off, and there are no text formatters assigned. My guess is that the field is being parsed, and when an anchor tag is found, it's being sent through a URL filter. If it isn't a URL, then it's trimmed/sanitised.

At this point, I would recommend a module that converts it for you. So, in your field you'd have something like [phone:+27101231234] (just using an example South African number in there), which would be converted accordingly. You could also use Hanna Code, I guess - though I don't use it, and so am not very familiar with how it works.

Side note: I wouldn't recommend using callto, unless you're targeting Skype users... tel is the best route to take, I believe,

Edit - here's a simple Hanna Code for converting this: [[a tel=+27101231234]]

<?php print '<a href="tel:' . $tel . '">' . $tel . '</a>';

The Hanna Code name should be "a" and you should add the "tel" attribute. Also don't forget to add the Hanna Code text formatter to your field.

[dewwwald]

Hi guys. I am looking for a way to use the multi-site plugin along with this. The issue I encountered is, when I navigate to a sub domain the link, since it is relative points to the subdomain path, even when the page being referenced is on the naked domain. Can I configure the CKEditor to use absolute paths?

[dewwwald]

Make CKEditor use absolute paths.

Solved:

I created a copy of the wire/modules/Inputfield/InputfieldCKEditor/pwlink plugin and named it site/modules/InputfieldCKEditor/pwlink, then I enabled it instead of pwlink.

added a function to CKEDITOR inside of newMod/plugin.js :

CKEDITOR.absoluteLink = function (href) {
    var reg = /^https?:\/\//i;
    if (!reg.test(href)) {
      var link = document.createElement("a");
      link.href = href;

      if (href.indexOf(link.host) > -1) { //ie subdomain
        src = link.protocol+"/"+link.pathname+link.search+link.hash;
      }
      else {
        src = link.protocol+"//"+link.host+link.pathname+link.search+link.hash;
      }
      return src;
    }
    return href;
  } 

Then I went ahead and passed the link into the function:

var url = CKEDITOR.absoluteLink($("#link_page_url", $i).val());

[Noedel]

Seems I found the reason. (I was searching for hours literally, and shortly after posting my question here I found it. That's the way life is.)

It was the line "'enterMode' => 'CKEDITOR.ENTER_P'" in "InputfieldCKEditor.module". Removing it brings "magicline" fully back to life.

Ryan: Do we need this line? According to the CKEditor documentation, it's the default setting anyway.

I'm getting the same error in IE11 when using a custom combo dropdown box plugin when i click it (not in other browsers)

 

This didn't fix it

[Michael van Laar]

Anyone has experiences with substituting the CKEditor JS-part with a newer version?

I’d like to try CKEditor 4.5 Beta because it finally allows nested widgets – which could be key for easy creation of some advanced content pieces (like acordions, tabs, etc.) right inside the usual body copy field. But I have not dealt with modifying ProcessWire’s CKEditor module yet.

[cb2004]

The latest dev version of Processwire uses CKEditor 4.5.1.

[Michael van Laar]

The latest dev version of Processwire uses CKEditor 4.5.1.

Ah great. I use the latest dev version anyway. But instead of looking at my server I checked here: https://github.com/ryancramerdesign/InputfieldCKEditor

OK, then I gotta dive into widget development for CKEditor now.

[asbjorn]

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' ];
};

Did you ever managed to get this working? I have been trying with config.templates_files and config.templates without luck. Both in /site/modules/CKEditor and /site/templates, different ways each place. The only thing I've got working is if I replace the code in /wire/modules/Inputfield/InputfieldCKEditor/ckeditor-4.4.6/plugins/templates/templates/default.js

And as mentioned all over, never code or place anything in wire. So no luck here as well.

[Henrik]

I'm having an issue with list-style-type in Inline Editor. A normal list ...

<ul>
  <li>...</li>
  <li>...</li>
</ul>

looks in my Inline Editor like this:

In the Regular Editor it looks how expected:

I tried to modify the contents-inline.css with the following code to let the bullet points appear and the spaces between list-points disappear but no result. 

ul li {
  list-style-type: disc;
  margin: 0;
  padding: 0;
}

Has anyone an idea whats going wrong here?

Thank you!

(ProcessWire 2.6.1, CKEditor 4.4.6)

[diogo]

Maybe you can inspect the code to know where the style is coming from.

[Henrik]

Thanks, Diogo! Brilliant idea   This way I realized that I somehow mixed up the stylesheets. My contents-inline.css was basically the same like contents.css. Don't know how this happened   I've copied now the right one out of the wire-directory and the bullet-points show up. Just a few small changes yet and we are ready to go 

Thanks again!

[Robguy]

Not too sure where to post this but i'll just drop it in here.

Found a bug with ckedtior in my latest project [using pw 2.6.1 and CkEditor 1.4.3]

A fieldtype of textarea, ckeditor doesn't display any options (font size etc.) under the following conditions (that I know of)

Template_1
  - FieldTypeImage
  - FieldTypeTextarea [ckeditor]

But displays perfectly fine in these two cases

Template_1
  - FieldTypeTextarea[ckeditor]
  - FieldTypeImage

Template_2
  - FieldTypeTextarea [ckeditor]
  - FieldTypeImage
  - FieldTypeTextarea [ckeditor]

Template 2 will display both ckeditors with full options.

I tested this with mutliple options on the image field. This only started happening after I upgraded pw to latest version.

[adrian]

Hi Robguy - any chance you could check with the latest dev version of PW - it should be release at 2.7 in the next couple of weeks. Would be nice to know if this is still a problem.

Thanks!

[alan]

Perchance, does anyone know how to change the position type of the CKEditor toolbar to 'fixed' so that as a page of copy is scrolled and edits made, the author does not need to scroll away to use the toolbar? Tks for any tips

[LostKobrakai]

If I recall it correctly the inline mode will just do that.

[alan]

>_< DOH!

I tried that and it didn't work. So I went back to check, and, of course, it's working! Thanks, must have been I refreshed too little or something (weird, I had the alternate toolbar only visible when clicked into field, but it scrolled out of view before).

[Christophe]

I'm trying to add a data-uk-lightbox (UIKit) attribute to a <a> tag (in a multilingual body field).

I've allowed it in Allowed Content Rules: a[data-uk-lightbox]. I've even tried with a[*].

When I add it in the source code, go back to the wysiwyg editor, and then go back to the source code, it is there as data-uk-lightbox="".

When the page is saved, it is removed...

Is there a way to add a custom attribute like this one? Do I have to add it to another list somewhere?

Edit: I've also tried with a[data-uk-lightbox]{*}.

data-uk-lightbox="" gets removed only after saving the page.

[tpr]

How to add custom format tags to CKEditor?

Maybe this was posted before but here it is if somebody is in a desperate need of this.

Here I add 'section' and 'small' tags to the Format dropdown.

Entering additional tags in the field's settings in the admin ("Format Tags") doesn't work, results in a JS error:

Uncaught TypeError: Cannot read property 'type' of undefined

Drama.

Searching for a solution everybody suggest two things:

• adding extra config options to config.js ("config.format_section = {element: 'section'}")
• plus editing language file (eg. "en.js") and add strings to these new tags that will appear in the dropdown

I started this route but soon turned out that PW is not picking up languages from "/site/modules/InputfieldCKEditor/lang/" directory. Editing ones in "wire" dir works, but that's more of a drama as they will be wiped out on next update.

Adding extra config options to config.js worked, but the new tags didn't have names (they were only empty lines in the dropdown, however, they worked).

Finally I found that adding a "name" along with the element works (in "/site/modules/InputfieldCKEditor/config.js"):

CKEDITOR.editorConfig = function (config) {
    config.format_section = {element: 'section', name: 'Section'};
    config.format_small = {element: 'small', name: 'Small'};
};

Now these extra tags will appear in the Format dropdown and they'll also have names (titles).

Also you'll need to add the extra tags in the "Format Tags" field in the admin (found on the ckeditor field's "Input" tab):

p;h2;h3;h4;h5;h6;address;section;small

The best would be if we could set these either only in the admin or in config.js, so not in two separate locations. I couldn't find a way to achieve this but it's still relatively easy to add.

[ottogal]

Hi all,

I've got a problem with combo boxes like here:

Since the German word for heading is longer, the box is too narrow and cuts off the entries.

So I looked how i could modify the width.

I spotted a file named editor_gecko.css with this definition and thought it might be the relevant one:

.cke_combopanel {
	width:150px;
	height:170px
}

Hence I added the following to my contents.css in /site/modules/InputfieldCKEditor:

.cke_combopanel {
	width:200px;
	height:240px;
}

But nothing changed. Obviously the wrong idea.

Some of you might have a better one - ?

[Galo]

I was trying the how to create a plugin by CKEditor on their site and put it in Processwire CKEditor having trouble adding the "abbr" plugin.

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

how can i implement a plugin that can call a modal to get attributes to be placed?

[mr-fan]

@Galo for abbr options you have two "semiautomatic" modules that provide abbr support:

 

without CKE working on all Processwire textfields you choose and a central managment of all your abbr's

regards mr-fan

[Galo]

@mr-fan

Thanks, will try those 2.

[cappuccino]

Is there a possibility to add a definition list?

<dl> 
  <dt>Stichwort</dt>
  <dd>Erklärung</dd>
</dl>

If yes, how I have to do that?