How to get larger editing window?

421 views
Skip to first unread message

Roy Smith

unread,
Sep 29, 2011, 10:47:23 PM9/29/11
to django-cms
I've just started playing around with django-cms. So far, looks
pretty neat.

One problem I'm having is that the editor widget is too small. I only
get about 6 lines by 40 characters of text in the editing window, no
matter how big I make the surrounding window.

I can see in the generated HTML that the table element enclosing the
editor widget has style="width: 313px; height: 136px;". Is there
someplace in django-cms where I can adjust that?

Jonas Obrist

unread,
Oct 7, 2011, 4:16:33 AM10/7/11
to djang...@googlegroups.com
Which editor are you using? WYMEditor or TinyMCE? They both have settings to configure them. Unfortunately those settings are currently undocumented (which is a bug, please open a ticket for this on github). So your best bet is either to ask on irc (#djangocms on freenode) or read the defaults in the source (sorry), they're in cms/plugins/text/settings.py or something like that.

Jonas

Roy Smith

unread,
Oct 7, 2011, 9:26:35 AM10/7/11
to djang...@googlegroups.com
On Oct 7, 2011, at 4:16 AM, Jonas Obrist wrote:

> Which editor are you using? WYMEditor or TinyMCE?

I was using TinyMCE, but have no particular preference, so I gave WMY a try. This at least got me a text editor widget which was full-width and resizes as I resize the browser window.

The next problem is that the editor is only 168px high (about 10 lines of text). I'm trying to figure out where I can make that larger. I found cms/static/cms/css/wymeditor.css, but there's nothing in there which looks like it does anything about setting the iframe height. Ditto for cms/plugins/text/settings.py.

I'll ask around on #djangocms.

Thanks for your help.

> They both have settings to configure them. Unfortunately those settings are currently undocumented (which is a bug, please open a ticket for this on github). So your best bet is either to ask on irc (#djangocms on freenode) or read the defaults in the source (sorry), they're in cms/plugins/text/settings.py or something like that.
>
> Jonas


--
Roy Smith
r...@panix.com

Tomas Neme

unread,
Oct 7, 2011, 5:11:01 PM10/7/11
to djang...@googlegroups.com
The dimensions of the editor widget depends on the TextArea widget it's based on, which is defined in django.forms.widgets
class Textarea(Widget):
    def __init__(self, attrs=None):
        # The 'rows' and 'cols' attributes are required for HTML correctness.
        default_attrs = {'cols': '40', 'rows': '10'}
        if attrs:
            default_attrs.update(attrs)
        super(Textarea, self).__init__(default_attrs)

    def render(self, name, value, attrs=None):
        if value is None: value = ''
        final_attrs = self.build_attrs(attrs, name=name)
        return mark_safe(u'<textarea%s>%s</textarea>' % (flatatt(final_attrs),
                conditional_escape(force_unicode(value))))



You need to pass the widget an attrs parameter with more 'rows':'30' or whatever, the way you hack this in, can vary.. I've done this, but I don't remember the easiest way I'd found, and I can't find the code right now. I'd subclass TextPlugin, change get_editor_widget, and pass an attrs kwarg to it.

Tomas

Frank Becker

unread,
Oct 7, 2011, 7:22:34 PM10/7/11
to djang...@googlegroups.com

On 07.10.2011, at 23:11, Tomas Neme wrote:

Hi,

> The dimensions of the editor widget depends on the TextArea widget it's
> based on, which is defined in django.forms.widgets

In your settings.py for tinymce if you want it to be 600px high:

TINYMCE_DEFAULT_CONFIG = {
...
"width": "100%",
"height": "600px",
...
}

Bye,

Frank

Roy Smith

unread,
Apr 8, 2012, 11:34:54 PM4/8/12
to djang...@googlegroups.com

I'm just getting back to this project after a bit of a hiatus.  I tried your suggestion above, but that results in "Caught KeyError while rendering: 'theme'" when I try to edit some text.  After a little experimenting, I think the answer turns out that the "..." part is important :-)  The following seems to work:

TINYMCE_DEFAULT_CONFIG = {
    "width": "100%",
    "height": "600px",
    "theme": "simple",
    "relative_urls": False,
    }

 

jrief

unread,
Sep 8, 2012, 8:52:25 AM9/8/12
to djang...@googlegroups.com
If you use CMS_PLUGIN_TEXT_TINYMCE_CONFIG instead of TINYMCE_DEFAULT_CONFIG you can even override them in your own settings.py 

vilos

unread,
Sep 21, 2012, 5:49:54 AM9/21/12
to djang...@googlegroups.com
For the record, when using WYMEditor, it's possible to adjust the height of editing window in wymeditor skin styles. 
Just clone static/cms/js/wymeditor/skins/django to a new static location,  copy the templates/cms/plugins/widgets/wymeditor.html template to project templates  and modify it, so that the skinPath option in wymeditor initialization points to the new skin location:

// init wysiwyg

$('#id_{{ name }}').wymeditor({

  ...

  skinPath: "{{ STATIC_URL }}js/wymeditor/skins/django/",

  ...

   
Then, in skin.css change the height for  .wym_skin_django .wym_iframe iframe  selector to your preference.

Viliam

Reply all
Reply to author
Forward
0 new messages