Module: CKEditor

[titanium]

Is there a reason why the "magicline" plugin is disabled by default? I would like to use it. I enabled it by removing the entry from "Removed Plugins" and setting it in "Extra Plugins". After this, the magicline seems to work at first sight. But if you click the red square on the right, console shows an error. 

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.

[Neeks]

Thanks Martijin,

It is amazing how fast you this project develops. Bugs fixed faster then I can find them ;-)

I'll double check the most updated version before I post next time. 

[juhis]

It seem's that when you add link in link field to another site and leave "http://" from the start the link doesn't work. I use PW 3.0.

[titanium]

It seem's that when you add link in link field to another site and leave "http://" from the start the link doesn't work. I use PW 3.0.

How should CKEditor or ProcessWire get to know if you want to insert a link to another site? For example, www.mysite.de/testpage.html could be another website, or simply a relative link to the page "testpage.html" in the folder "ww.mysite.de" of my own site.

[Macrura]

@J1312 - titanium is right, the option would be that you always have absolute URLs there, but a lot of us use page paths for internal links, so it would be annoying to have to put the absolute url there, especially since the first part of the url might change from development to launch (like you might develop on a dev.example.com and then move to a www.example.com) so i always tell editors to copy the full URL from the page they want to link to if it is external...

[Joe]

Hi everyone!
I would like to provide inline WYSIWYG on-the-page editing. Ideally I would like my pages to be editable like in this example:

http://nightly.ckeditor.com/13-12-19-07-06/standard/samples/inlineall.html

The CKEditor option for inline editing is based on the HTML5 contenteditable attribute

(like in http://html5demos.com/contenteditable)

But with the editor there are the usual editing options, rather than only being able to change the text.

Before coming to PW I´ve been toying with this little CMS: http://gpeasy.com/

I had chosen gpeasy exactly because it provides intuitive front-end editing (to me their previous version was almost more intuitive).
It is a flat-file CMS and I would say it´s geared towards small projects only. I didn´t get on so well with adapting various aspects, mainly the back-end, and I´ve come to PW for its flexibility and scalability after looking at about 20 different CMSs earlier this year. (None of them provide front-end editing that way, except for gpeasy)

So my aim is to build PW-sites that are editable like in the CKEditor example mentioned above. (Just the page content, not other things for which I find the current PW back-end pretty perfect.)

So far I haven´t really worked out how to save the editable content on the pages to the DB. Actually I´m not quite clear on whether this would be only a simple tweak or a major project.

Has anyone looked into this already? What are your thoughts?

P.S.: I´ve looked at the Fredi module. It´s nice but doesn´t really seem to provide complete WYSIWYG on-the-page editing like I´m envisioning. I´ve also seen  the Page Frontend Edit module, but somehow have not been able to make it work - I don´t expect it´s what I´m looking for.

EDIT:

I´ve just seen that they´re working on something sort of like this over at Drupal, using the Aloha Editor. From what the project looks like there I get a feeling getting this to run is not just a "simple tweak", even if it might be easier to implement in PW...  => ...looking at the API now I think maybe it is not all too difficult to accomplish, we´ll see.

Also with TinyMCE something similar is possible I see here. But I suppose whichever editor you use the same issue to solve is how to transfer the edits from the front-end to the DB.

Edited December 20, 2013 by Joe

[teppo]

@Joe: I'm not entirely sure if there's something helpful there, but Aloha editor and integrating it into PW was discussed in the Adminbar thread some time ago and Ryan even provided some sample code that might be helpful. You might want to check that discussion out.

[Joe]

Thank you teppo, I hadn´t seen that thread. They are discussing exactly what I´m talking about. The option to do the same thing with CKEditor is likely newer than the thread, so now this would be an additional possibility. I haven´t had time yet to read through everything there but I find it very interesting.

They also seem to be discussing the usefulness of this kind of front-page editing. I´m sure it very much depends on the kind of site and the kind of editors/users. But for a site with fairly straight-forward text and image content and for users who don´t have much computer knowledge I think it would be a very good thing. Of course it´s necessary to strictly limit the editor options so they can´t mess up the page. (Here´s a link to a page where some problems related to inline editing are being discussed.)

I really want to implement this for a certain kind of site and I think it can probably be done already. And if it could be offered by PW as an out-of-the box module solution I think that would be a great additional selling point for PW.

[Joe]

Ok, I got inline WYSIWYG on-the-page editing working now , here´s how:
(This is only for one field so far, but it should be the same for multiple ones. It works, but some changes and improvements need to be made still.)

In the page template file, or rather the included "head.inc":

<!-- The paths to the scripts, CKEditor may already be in site/modules
     and jquery.min.js in site/templates/scripts, I use v1.6.4 - not sure what earlier versions work -->
        <script src="path_to/ckeditor.js"></script>
        <script src="path_to/jquery.min.js"></script>

<script>
// I saw this script here: http://gazpo.com/2011/09/contenteditable/

    $(document).ready(function() {
        
        $("#save").click(function (e) {            
            var content = $('#editable').html();
                
            $.ajax({
                // save.php and db.php currently are located in site/templates-admin - this may not be the best place for them.
                // I am still looking for a way to save the edited content though a built-in PW mechanism if possible rather than this way
                url: '<?php echo"{$config->urls->adminTemplates}"; echo "save.php"; echo "?page=$page"; ?>',
                type: 'POST',
                data: {
                content: content
                },                
                success:function (data) {
                            
                    if (data == '1')
                    {
                        $("#status")
                        .addClass("success")
                        .html("Data saved successfully")
                        .fadeIn('fast')
                        .delay(3000)
                        .fadeOut('slow');    
                    }
                    else
                    {
                        $("#status")
                        .addClass("error")
                        .html("An error occured, the data could not be saved")
                        .fadeIn('fast')
                        .delay(3000)
                        .fadeOut('slow');    
                    }
                }
            });   
            
        });
        
        $("#editable").click(function (e) {
            $("#save").show();
            e.stopPropagation();
        });
    
        $(document).click(function() {
            $("#save").hide();  
        });
    
    });

</script>

<!-- Now the editable div with the content, in this case the body field content - only editable for logged-in users: -->
<div id="editable"<?php if($user->isLoggedin() ):    echo " contentEditable=\"true\""; endif ?>>
echo $page->body; // THE CONTENT
</div>

<!-- And the status bar and the save button: -->
<?php if($user->isLoggedin() ):    echo "<div id=\"status\"></div><button id=\"save\">save</button>"; endif ?>

Using CKEditor for inline editing is described here. The same approach should work with various other editors as well.

Now for saving the changed content. It works, but I am not sure if this is the best way of doing it - PW may provide a better way built-in already.
Both save.php and db.php also come from there: http://gazpo.com/2011/09/contenteditable/

THIS IS save.php:

<?php

$page=$_GET['page'];

    include("db.php");
    $content = $_POST['content']; //get posted data
    
    $content = mysql_real_escape_string($content);    //escape string    
    
    $sql = "UPDATE `PW_test`.`field_body` SET `data` = '$content' WHERE `field_body`.`pages_id` =$page;";
    
    if (mysql_query($sql))
    {
        echo 1;
    }
?>

AND THIS IS db.php

<?php
    //database connection
    mysql_connect("localhost", "PW_test", "PW_test") or die(mysql_error());
    mysql_select_db("PW_test") or die(mysql_error());
    
        mysql_query("SET NAMES 'utf8'");
    mysql_query("SET CHARACTER SET 'utf8'");

?>

That´s it. With this I get CKEditor as an inline-editor on the front-page body field and I can save the content via the save-button. To be able to edit the page the user has to be logged in.

Some things remain to be adjusted:
- The editor configuration
- possibly it is necessary to sanitize the content, have to work out yet how to do it in this context
- It might be nice to integrate the save-button into the editor if possible

Also there is this security issue to be resolved: In order to use save.ph and db.php in site/templates-admin I had to remove the following line in .htaccess:

  RewriteCond %{REQUEST_URI} (^|/)(wire|site|site-[^/]+)/templates-admin($|/|/.*\.(php|html?|tpl|inc))$ [OR]

 - Of course this needs to be done differently. These two files can be placed anywhere else. I think save.php needs to be protected
from being used in an unauthorized way by some script. - Assuming I do not find a better way of saving the content through PW and don´t need these files at all.

[teppo]

Just a quick heads-up: like you've already pointed out above yourself, you really shouldn't do this, as it seems to open a ton of new security issues.

There are probably even better ways to do it, but why don't you at least create a new page (or Process module) and use PW API to handle the saving? It should be pretty straightforward, i.e. something like this:

<?php
if ($user->hasRole('admin')) {
    $target_page_id = (int) $input->get->page;
    if ($target_page_id) {
        $target_page = $pages->get($target_page_id);
        if ($target_page->id) {
            if ($user->hasPermission('page-edit', $target_page)) {
                $content = $input->post->content;
                $target_page->of(false);
                $target_page->body = $content;
                $target_page->save();
            } else throw new WireException("Permission issue");
        } else throw new WireException("Page not found");
    } else throw new WireException("Missing page ID");
} else throw new WireException("Missing role");

Generally speaking, whenever you find yourself fetching (or, even worse, storing) data to/from native PW database tables, it's likely that you're doing something wrong

(Exceptions above exist mostly to demonstrate couple of things you'll want to take care of if you do this at template level. Process modules have their own method of handling permissions, which makes that part less complex. Note that this was written in browser and I've no idea if that code works straight away, but I hope you'll get the point..)

[Joe]

Thank you, teppo!

Generally speaking, whenever you find yourself fetching (or, even worse, storing) data to/from native PW database tables, it's likely that you're doing something wrong

Oh, of course I would not use this on a public server, this is just local testing. I was just pleased to get it working for a starter, already had the notion that this should be done via the PW API, just didn´t know how offhand.

Thank you for your code, I will look at it and try to make it work._> Works great!    => I created a hidden page and used it there almost as is, except for role and permission checking, because only logged in users who are allowed to edit pages anyway get to use this edit function.

Edited December 27, 2013 by Joe

[teppo]

@Joe: good to hear that you got it working

@ryan: in order to be even remotely consistent, I'm posting here to say that I just suggested a small change in the Hanna Code thread regarding the default config.js of CKEditor shipped with this module.

[ryan]

@ryan: in order to be even remotely consistent, I'm posting here to say that I just suggested a small change in the Hanna Code thread regarding the default config.js of CKEditor shipped with this module.

Module has been updated for this change (config.entities=false)

[ryan]

I've pushed some updates to the CKEditor Inputfield fixing some bugs and updating to the latest version of CKEditor (4.3.2). I recommend upgrading if you are already using a past version. 

I've also added a couple of detailed tutorials to the README file including:

• How to make your own custom styles menu
• How to customize the appearance of the editor

While you are upgrading, be sure to grab the latest version of the HTML Purifier module as well. 

[alan]

Wow. Wow. Wow. I am SO totally grateful to you Ryan (and helpers) who have made it possible to customize and use CKEditor inline mode (or regular mode) with custom style of how content typed into a textarea looks (to me in the Admin as I edit) and also begin to develop and apply custom styles that also allow me to change how content looks on the site to visitors by allowing the editor to apply custom styles.

Sorry, I am making this sound more complex than it is.

I just stumbled on those two write-ups you did from the links in the Field > Input (the two links noted in your post).

This REALLY value-adds the editor side of PW for me, allows me to allow clients to add custom styles to contents and is a GREAT benefit.

Thanks!

[Joe]

Hi everyone!

I´ve been struggling to use CKEditor as a front-page inline editor for quite a while now. I´ve so far been able to integrate it so logged in users can edit texts right on the pages. (I´ve asked some questions and got some answers about it here before, thanks to everyone!)

However for the life of me I can´t seem to get the PWimage and PWlink plugins to work from there:

I got the latest version of the CKEditor module installed. From the page template I´m conditionally calling "/modules/InputfieldCKEditor/ckeditor-4.3.2/ckeditor.js" (only "if($user->isLoggedin()").

Now CKEditor and all the plugins work fine, except for PWimage and PWlink. I have the line "CKEDITOR.config.extraPlugins = 'pwimage,pwlink';" in the template and I´m also referencing both plugins, so they show up in the toolbar. They are visible there, but when I click their buttons nothing happens.

What I do get when I look at the console in Firebug and click the button for PWimage is:

ReferenceError: config is not defined
var modalUri = config.urls.admin + 'page/image/'; plugin.js?t=E0LB (line 106)

I can fix that by putting in the full path there (in /modules/InputfieldCKEditor/ckeditor-4.3.2/plugins/pwimage/plugin.js - line 106), only to get the next ReferenceError.

I am really out of ideas about what to do here. I´m just not clear about why these modules don´t work here when they work perfectly in the admin area. If someone knows how to reference them correctly in this context I will very much appreciate the hint. Thanks!

[Soma]

You're on the right track, but not sure what all would be required to make ckeditor work on front-end. 

There's many js config vars used in the backend for certain fields like TinyMCE or CKeditor.  If you look at admin source code you'll see the var config = { .... } in head, that can then be read by js scrpts and plugins. All this stuff is dynamic and pulls configs needed from the field configurations.  This is populated via $config->js(); and output in the admin theme (default.php) before any scripts are includes.

Also the scripts and styles needed for a particular Inputfield is loaded via $config->scripts and $config->styles, this is then again output in the admin theme (default.php) in the head. 

All these play together to make admin backend work in it's modularity. 

[Joe]

Thank you Soma!

Your information is helpful, also in as much as it confirms that this is fairly difficult to achieve and not just some small thing I have missed. I will look more closely at the admin source code, though it might prove beyond my capabilities to duplicate that functionality in a page template ;-)

[ryan]

Joe, to re-create PW's javascript 'config' variable on your front end, you could just duplicate what's being output by this function. There's not much to it. To ensure that all the right JS and CSS files get loaded you only need to do this:

foreach(wire('config')->styles as $url) echo "<link rel='stylesheet' type='text/css' href='$url' />";
foreach(wire('config')->scripts as $url) echo "<script src='$url'></script>";

Also for anyone else reading, this has nothing to do with CKEditor. This is just generally how you'd duplicate PW's admin vars/styles/scripts on the front end. 

[rouge]

hi,

I defined my own style like:

{ 
   name: 'Blockelement', 
   element: 'div', 
   attributes: { 'class': 'block' } 
 } 

now when I add two blockelements one after an other then the divs getting nested after a save like:

before save:

<div class='block'> test </div>
<div class='block'> test </div> 

after save:

<div class='block'> test 
<div class='block'> test </div>
</div> 

Does somebody has an idea what's going wrong?

[ryan]

I would bet that's got something to do with this line. That line may not be necessary anymore now that we've got CKEditor's ACF working properly. Try commenting it out to see if that fixes the issue? Please let us know. 

[sozoclive]

Is there a way to update PWlink to include mailto links. I feel dirty when i have to explain to clients that they have to put mailto: in the Link to URL.

I've taken a look but not sure where the modal content is being pulled from.

Thanks for your time.

[MadeMyDay]

I have a weird issue. I (or rather my client) want to use the indent plugin for block elements. While understanding that this requires both, the indent and the indentblock plugin, I just can't get it to work. I added both plugins to the addtional plugin loading field as well as in the plugins folder. The buttons do appear but I can only indent list elements, not block elements. Totally weird since the indentlist plugin is a separate one which I don't have neither in the plugins folder nor configured in the field config.

Any ideas?

 

 

[Sinmok]

What are the licensing restrictions on the CKEditor pwlink and pwimage plugins?

I'm working on a new front end editor and the only thing that doesn't work is the linking and image selecting. I reckon i could get it to work by modifying the existing plugins to work with the module I am building instead.

Am I allowed to do this? I don't see any license files

Cheers

[Pete]

They'll be covered by the license of ProcessWire itself, so go ahead and do as you like

@ryan - can we make CKEditor the default editor for new installations in the next version of ProcessWire please? It's just that it's soooooooooooooo much nicer than TinyMCE