Jump to content

Module: CKEditor


ryan

Recommended Posts

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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?

Link to comment
Share on other sites

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());
  • Like 2
Link to comment
Share on other sites

  • 2 months later...

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)

i4HJaVd.png

 ul2g326.png

This didn't fix it

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 4 weeks later...

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.

Link to comment
Share on other sites

  • 1 month later...

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:

post-3713-0-29846500-1444398508_thumb.pn

In the Regular Editor it looks how expected:

post-3713-0-12627000-1444398751_thumb.pn

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)

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

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.

Link to comment
Share on other sites

  • 2 months later...

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 :)

Link to comment
Share on other sites

>_< 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).

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...

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.

  • Like 2
Link to comment
Share on other sites

  • 2 months later...

Hi all,

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

post-1513-0-25817900-1464784896_thumb.pn

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 - ?

Link to comment
Share on other sites

  • 3 months later...
  • 4 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...