New Plugin: plugin_ckeditor

[Ross Peoples]

This will be my second public plugin release. I will put it up on BitBucket soon, but for now, I thought I would introduce a new plugin I've been working on. Sometimes you just need a WYSIWYG editor. This plugin integrates CKEditor into web2py. It acts much like the Auth object in its usage. For example, in your model, you need to import and initialize it:

from plugin_ckeditor import CKEditor

ckeditor = CKEditor(db)

ckeditor.define_tables()

It's most basic usage is to assign it to a Field widget:

db.define_table('content',

    Field('title', length=255),

    Field('public', 'boolean', default=True),

    Field('text', 'text', widget=ckeditor.widget)

)

The CKEditor now automatically becomes available every time SQLFORM is used. This is a screen shot of it in action:

This is great by itself, however, I decided to take it a few steps further. First of all, also supports edit in place. This is a test page to demonstrate:

To make this content editable, all it takes is the following line in the view:

{{=ckeditor.edit_in_place('.editable', URL())}}

This makes any element with the 'editable' class editable in place. It also requires a URL to save the data to when the save button is clicked. Here's what it looks like in edit mode:

It is all AJAX enabled, spellchecks as you type, and it's fast. Edit in place is another great feature, but I also took it a step further than that and integrated upload and browse functionality for images and Flash movies:

The upload and browse functionality is all taken care of by the plugin and does not require you to do anything on your end once you have initialized the plugin in your model as demonstrated above.

I used the following resources in developing this plugin, so a special thanks to the authors of these for providing the ground work required to make this possible:

http://www.web2pyslices.com/main/slices/take_slice/18

http://www.bitsntuts.com/jquery/ckeditor-edit-in-place-jquery-plugin

I have a couple other issues to resolve before I post the code, but I'd love to get some feedback to see if the community finds this plugin useful.

[Anthony]

This looks great. I would certainly find it useful. Thanks for contributing.

 

Anthony

[mart]

I think this is awesome and really like the "double-click & edit"
feature! I'm sure this will be of great use to many.

Good on you!

Mart :)

On Jul 8, 12:00 pm, Ross Peoples <ross.peop...@gmail.com> wrote:
> This will be my second public plugin release. I will put it up on BitBucket
> soon, but for now, I thought I would introduce a new plugin I've been
> working on. Sometimes you just need a WYSIWYG editor. This plugin integrates
> CKEditor into web2py. It acts much like the Auth object in its usage. For
> example, in your model, you need to import and initialize it:
>
> from plugin_ckeditor import CKEditor
> ckeditor = CKEditor(db)
> ckeditor.define_tables()
>
> It's most basic usage is to assign it to a Field widget:
>
> db.define_table('content',
>     Field('title', length=255),
>     Field('public', 'boolean', default=True),
>     Field('text', 'text', widget=ckeditor.widget)
> )
>
> The CKEditor now automatically becomes available every time SQLFORM is used.
> This is a screen shot of it in action:
>

> <https://lh4.googleusercontent.com/-HLLFte_tXCw/ThclwgF-TtI/AAAAAAAAAC...>

>
> This is great by itself, however, I decided to take it a few steps further.
> First of all, also supports edit in place. This is a test page to
> demonstrate:
>

> <https://lh4.googleusercontent.com/-bsWPwiuQg20/Thcl_C0sraI/AAAAAAAAAD...>

> To make this content editable, all it takes is the following line in the
> view:
>
> {{=ckeditor.edit_in_place('.editable', URL())}}
>
> This makes any element with the 'editable' class editable in place. It also
> requires a URL to save the data to when the save button is clicked. Here's
> what it looks like in edit mode:
>

> <https://lh3.googleusercontent.com/-9kv2lFa4JjA/ThcmcWAGF5I/AAAAAAAAAD...>

> It is all AJAX enabled, spellchecks as you type, and it's fast. Edit in
> place is another great feature, but I also took it a step further than that
> and integrated upload and browse functionality for images and Flash movies:
>

> <https://lh4.googleusercontent.com/-XtkEW2sXXyU/Thcm-IwkZ8I/AAAAAAAAAD...>
>
> <https://lh3.googleusercontent.com/-mBjk0bs_-Z8/ThcnEixpCDI/AAAAAAAAAD...>
>
> <https://lh5.googleusercontent.com/-M4ddg9Dz9Kg/ThcnH0dubEI/AAAAAAAAAD...>
>
> <https://lh4.googleusercontent.com/-8DKGzp3qqbs/ThcnV3GNCOI/AAAAAAAAAD...>

> The upload and browse functionality is all taken care of by the plugin and
> does not require you to do anything on your end once you have initialized
> the plugin in your model as demonstrated above.
>
> I used the following resources in developing this plugin, so a special
> thanks to the authors of these for providing the ground work required to
> make this possible:
>

> http://www.web2pyslices.com/main/slices/take_slice/18http://www.bitsntuts.com/jquery/ckeditor-edit-in-place-jquery-plugin

[Bruno Rocha]

Congrats, this is a very useful plugin, and certainly will be one of most importants and for sure it is very wanted.

I would like to use, let me know if you want some help testing.

(i am curious to see how it integrates with FormWizard plugin)

I am working a lot to finish the web2pyslices 2. In the new site you will be able to create a page for the plugin and host an example app.

I need your to use as the default htmk editor for web2pyslices too.

Thank you for sharing.

Bruno

http://zerp.ly/rochacbruno

Em 08/07/2011 13:00, "Ross Peoples" <ross.p...@gmail.com> escreveu:
> This will be my second public plugin release. I will put it up on BitBucket
> soon, but for now, I thought I would introduce a new plugin I've been
> working on. Sometimes you just need a WYSIWYG editor. This plugin integrates
> CKEditor into web2py. It acts much like the Auth object in its usage. For
> example, in your model, you need to import and initialize it:
>
> from plugin_ckeditor import CKEditor
> ckeditor = CKEditor(db)
> ckeditor.define_tables()
>
> It's most basic usage is to assign it to a Field widget:
>
> db.define_table('content',
> Field('title', length=255),
> Field('public', 'boolean', default=True),
> Field('text', 'text', widget=ckeditor.widget)
> )
>
> The CKEditor now automatically becomes available every time SQLFORM is used.
> This is a screen shot of it in action:
>

> <https://lh4.googleusercontent.com/-HLLFte_tXCw/ThclwgF-TtI/AAAAAAAAAC8/cu3qqcUuDeE/Screen%252520shot%2525202011-07-08%252520at%25252011.01.36%252520AM.png>

>
> This is great by itself, however, I decided to take it a few steps further.
> First of all, also supports edit in place. This is a test page to
> demonstrate:
>

> <https://lh4.googleusercontent.com/-bsWPwiuQg20/Thcl_C0sraI/AAAAAAAAADE/73qIJK9_OS8/Screen%252520shot%2525202011-07-08%252520at%25252011.02.06%252520AM.png>

> To make this content editable, all it takes is the following line in the
> view:
>
> {{=ckeditor.edit_in_place('.editable', URL())}}
>
> This makes any element with the 'editable' class editable in place. It also
> requires a URL to save the data to when the save button is clicked. Here's
> what it looks like in edit mode:
>

> <https://lh3.googleusercontent.com/-9kv2lFa4JjA/ThcmcWAGF5I/AAAAAAAAADM/UAwhM6LxoeQ/Screen%252520shot%2525202011-07-08%252520at%25252011.02.16%252520AM.png>

> It is all AJAX enabled, spellchecks as you type, and it's fast. Edit in
> place is another great feature, but I also took it a step further than that
> and integrated upload and browse functionality for images and Flash movies:
>

> <https://lh4.googleusercontent.com/-XtkEW2sXXyU/Thcm-IwkZ8I/AAAAAAAAADU/uyPo2FTMob0/Screen%252520shot%2525202011-07-08%252520at%25252011.33.28%252520AM.png>
>
> <https://lh3.googleusercontent.com/-mBjk0bs_-Z8/ThcnEixpCDI/AAAAAAAAADc/_xH6sWwgs6o/Screen%252520shot%2525202011-07-08%252520at%25252011.35.29%252520AM.png>
>
> <https://lh5.googleusercontent.com/-M4ddg9Dz9Kg/ThcnH0dubEI/AAAAAAAAADk/9WzdPj1ZiVE/Screen%2Bshot%2B2011-07-08%2Bat%2B11.35.06%2BAM.png>
>
> <https://lh4.googleusercontent.com/-8DKGzp3qqbs/ThcnV3GNCOI/AAAAAAAAADs/A6_-CGOM8-g/Screen%252520shot%2525202011-07-08%252520at%25252011.35.42%252520AM.png>

[Ross Peoples]

Ok, I have posted the source code on BitBucket. I don't have time to put any documentation up there yet other than what's here in this thread. I will update with more documentation hopefully this weekend when I have time. Until then, enjoy!

https://bitbucket.org/PhreeStyle/web2py_ckeditor

[cjrh]

Very nice. I'm thinking how this is going to be immediately useful in a blog context for non-technical authors.

[Tito Garrido]

How to install it?

Regards,

Tito

On Sat, Jul 9, 2011 at 3:35 PM, cjrh <caleb.h...@gmail.com> wrote:

Very nice. I'm thinking how this is going to be immediately useful in a blog context for non-technical authors.

--

Linux User #387870
.........____
.... _/_õ|__|
..º[ .-.___.-._| . . . .
.__( o)__( o).:_______

[Ross Peoples]

From BitBucket, download the model, the controller, the view, and the static plugin_ckeditor folder to your project.

[Tito Garrido]

Thanks! I was able to install it!

I'm not sure why but flash player doesn't work for me... I've uploaded planets.flv (available on Massimo plugin page) and it didn't work... anybody able to put flash videos to work using ckeditor?

Regards,

tito

On Fri, Jul 15, 2011 at 8:41 AM, Ross Peoples <ross.p...@gmail.com> wrote:

From BitBucket, download the model, the controller, the view, and the static plugin_ckeditor folder to your project.

[Bruno Rocha]

I found an issue, as issues is disabled in your bitbucket, I created a wiki page.

https://bitbucket.org/PhreeStyle/web2py_ckeditor/wiki/issue

[António Ramos]

I need that plugin or i´m a dead man!

 

:)

2011/8/3 Bruno Rocha <rocha...@gmail.com>

[tomt]

Hi,

I was having trouble editing existing data with web2py_ckeditor until
I applied Bruno's patch.

Before applying this patch, the plugin could save new data, but it
wouldn't edit existing data. It always started with an empty
textarea. Now it works as I would expect. (I'm using web2py Version
1.98.2 (2011-08-04 00:47:09 and Python 2.7.2)

Thanks for the great plugin Ross, and thanks to Bruno for the patch.

I looking forward to using this plugin a lot.

[António Ramos]

Where can i download this pluging from?

It is not in the plugin area of web2py

Thank you

António

2011/8/6 tomt <tom_t...@yahoo.com>

[Marin Pranjic]

https://bitbucket.org/PhreeStyle/web2py_ckeditor

2011/8/7 António Ramos <ramst...@gmail.com>:

[Tito Garrido]

Is it stable? Is that patch mentioned before already applied?

Regards,

Tito

[Ross Peoples]

Sorry for not responding sooner. I was on vacation last week. I'll check into Bruno's patch as soon as possible.

[Ross Peoples]

I have applied Bruno's patch to the plugin on BitBucket. Thanks again Bruno for that. Don't know how I missed it. Also, I have enabled issue tracking in case anyone finds something else.

[Bruno Rocha]

I enabled a different set of toolbar buttons. I will send a patch which provides an python API to deal with toolbar set.

http://zerp.ly/rochacbruno

[Ross Peoples]

Bruno,

That would be awesome. Allowing the developer to choose buttons was on my todo list, but I haven't had time to implement it yet. If you've already got something started, I would certainly accept a patch for it. Thanks Bruno.

[tomt]

FYI: I ran into a problem using plugin_ckeditor when running web2py
on python 2.5.2. It generates an error associated with modules/
plugin_ckeditor.py at line 44:

43 *self.settings.extra_fields.get(upload_name, []),
44 migrate = migrate,

When I upgraded python to 2.7.2 everything worked as designed with no
errors.

Just thought others might want to know. - Tom

[Massimo Di Pierro]

Those two lines need to be exchanged since the syntax is only
supported in 2.7 and later.

[António Ramos]

I did this """

download the model, the controller, the view, and the static plugin_ckeditor folder to your project.

"""

and when i browse  to default/index i get this error

Traceback (most recent call last):
File "gluon/restricted.py", line 192, in restricted
File "D:/web2py198_2/web2py/applications/a1/models/db.py", line 83, in <module>
File "gluon/custom_import.py", line 280, in __call__
File "gluon/custom_import.py", line 74, in __call__
ImportError: No module named plugin_ckeditor

What am i missing?

thank you

2011/7/15 Ross Peoples <ross.p...@gmail.com>

[Ross Peoples]

Are you trying to initialize the plugin in db.py? If so, then the problem is that db.py is being read before plugin_ckeditor.py (web2py loads models in alphabetical order). So what I usually do is make a tables.py model where I define my tables. You can initialize the plugin in this file, as it will be loaded after the plugin's model.

[António Ramos]

sorry to disturb but cant get it to work. 

now this error

Traceback (most recent call last):
File "gluon/restricted.py", line 192, in restricted

File "D:/web2py198_2/web2py/applications/Demo1/models/table.py", line 83, in <module>
File "gluon/custom_import.py", line 276, in __call__

File "gluon/custom_import.py", line 74, in __call__

File "applications\Demo1\modules\plugin_ckeditor.py", line 44
migrate = migrate,
^
SyntaxError: invalid syntax

Can you post a simple appliance with ckeditor?

2011/9/1 Ross Peoples <ross.p...@gmail.com>

[Ross Peoples]

You must be using Python 2.5. I think tomt was the first to report this problem. The problem is coming from this code:

        self.settings.table_upload = self.db.define_table(upload_name,

            Field('title', length=255),

            Field('filename', length=255),

            Field('length', 'integer'),

            Field('mime_type', length=128),

            Field('upload', 'upload'),

            *self.settings.extra_fields.get(upload_name, []),

            migrate = migrate,

            fake_migrate = fake_migrate,

            format = '%(title)s'

        )

Python 2.5 doesn't support the syntax used for the *self.settings.extra_fields.... line. Does anyone know how to make that line work with Python 2.5? I didn't know there was a language compatibility problem until Massimo said something.

[tomt]

Hi,

Does plugin_ckeditor work with internet explorer? It works great with
firefox, but I have problems using it with IE.

When I call up the application with IE8 like this:
http://server:8000/application/default/editthis
The text area doesn't load the ckeditor
Surprisingly, when I call it like this:
http://192.168.1.1:8000/application/default/editthis
ckeditor initalizes on the text field and works as desired.

Maybe this is a problem with the configuration on my network, but I'd
be interested to know if other users have problems with IE and
plugin_ckeditor.

- Tom

[tomt]

I found out that I had caused my own problem. This plugin now works
as expected on IE7, IE8 and firefox. (I had modified the toolbar to
add a few items and remove the scayt_autostartup. I left a comma after
the toolbar's closing bracket ], Firefox was ok with this, but IE
wasnt')

- Tom
On Sep 3, 10:12 pm, tomt <tom_tren...@yahoo.com> wrote:
> Hi,
>
> Doesplugin_ckeditorwork with internet explorer? It works great with