Config the UI

[fmp-martins]

Is it possible to config the UI, like the buttons that are shown?

[acdha]

I've customized the editor in the past using a template override for your editor of choice and customizing the django_wysiwyg_config block to add extra JavaScript initialization code. Each editor is also stored in django_wysiwyg.editors so your JavaScript can call the editor's native API to register event handlers, change the config, etc.

The best way to see what's supported is to look at the template blocks defined in https://github.com/pydanny/django-wysiwyg/blob/master/django_wysiwyg/templates/django_wysiwyg/and then review your editor's native config docs for the features which you care about.

[fmp-martins]

Can't seem to make it work...

I've tried {% load wysiwyg %}

{% block django_wysiwyg_editor_config %} var django_wysiwyg_editor_config = { height: "100px", width: "100px", ... {% endblock %}

And an even with my editor ID: {% load wysiwyg %} {% block django_wysiwyg_editor_config %} var django_wysiwyg_editor_configs ['id_description'] = { height: "100px", width: "100px", ... {% endblock %}

I've debugged the includes.html, function django_wysiwyg_enable, with alert function and I've found out that none of my tries override the original configuration (alert('config:' + config.height); always return the original 400px instead of my 100px, plus the django_wysiwyg_editor_configs is an empty array, which is the original value).

What am I doing wrong?

[acdha]

Are you getting JavaScript errors in the browser console? Also: I'd check the source to confirm that the template override matched the right path.

Chris

Sent from my iPhone

On Mar 9, 2012, at 9:43 AM, fmp-martins reply@reply.github.com wrote:

Can't seem to make it work...

I've tried {% block django_wysiwyg_editor_config %} var django_wysiwyg_editor_config = { height: "100px", width: "100px", ... {% endblock %}

And an even with my editor ID: {% block django_wysiwyg_editor_config %} var django_wysiwyg_editor_configs ['id_description'] = { height: "100px", width: "100px", ... {% endblock %}

What am I doing wrong?

---

Reply to this email directly or view it on GitHub: https://github.com/pydanny/django-wysiwyg/issues/20#issuecomment-4420970

[fmp-martins]

I'm getting no JavaScript errors on the console. What do you meand with "Also: I'd check the source to confirm that the template override matched the right path."?

After putting the django-wysiwyg working, all I've done was to include the {% block django_wysiwyg_editor_config %} var django_wysiwyg_editor_config = { height: "100px", width: "100px", ... {% endblock %}

On the same html template page where it is being used...

[acdha]

I just meant to check the source of the page to make sure your JS is present - it's easy to have TEMPLATE_DIRS set so your template isn't actually the one being rendered.

Chris

Sent from my iPhone

On Mar 9, 2012, at 10:00 AM, fmp-martins reply@reply.github.com wrote:

I'm getting no JavaScript errors on the console. What do you meand with "Also: I'd check the source to confirm that the template override matched the right path."?

After putting the django-wysiwyg working, all I've done was to include the {% block django_wysiwyg_editor_config %} var django_wysiwyg_editor_config = { height: "100px", width: "100px", ... {% endblock %}

On the same html template page where it is being used...

---

Reply to this email directly or view it on GitHub: https://github.com/pydanny/django-wysiwyg/issues/20#issuecomment-4421247

[fmp-martins]

My templates was working fine, then I installed django_wysiwyg following the documentation info, and everything is working just fine. Then, I tried to override the configuration inserting my own django_wysiwyg_editor_config inside the django_wysiwyg_editor_config block.

Here's a snippet of my current template (which is working fine except the configuration override where I've changed the size and eliminated the items insertion):

{% extends "base_index.html" %}
{% load i18n dajaxice_templatetags %}
{% load wysiwyg %}

{% block django_wysiwyg_editor_config %}
    var django_wysiwyg_editor_config = {
        height: "100px",
        width: "100px",
        animate: true,
        autoHeight: true,
        // BUG: handleSubmit breaks contrib.admin's save-and-continue-editing feature - we can avoid by listening for blur events
        // This will cause the rich editor to update the original textarea's value when the containing form submit event fires
        handleSubmit: true,
        focusAtStart: false,
        toolbar: {
            //collapse: true,
            //titlebar: 'Body',
            draggable: false,
            buttons: [
            {
                group: 'fontstyle',
                label: '{% trans "Font Name and Size" %}',
                buttons: [
                    { type: 'select', label: 'Arial', value: 'fontname', disabled: true,
                      menu: [
                        { text: 'Arial', checked: true },
                        { text: 'Arial Black' },
                        { text: 'Comic Sans MS' },
                        { text: 'Courier New' },
                        { text: 'Georgia' },
                        { text: 'Impact' },
                        { text: 'Lucida Console' },
                        { text: 'Tahoma' },
                        { text: 'Times New Roman' },
                        { text: 'Trebuchet MS' },
                        { text: 'Verdana' }
                      ]
                    },
                    { type: 'spin', label: '13', value: 'fontsize', range: [9, 75], disabled: true }
                ]
            },
            {
                type: 'separator'
            },
            {
                group: 'textstyle',
                label: '{% trans "Font Style" %}',
                buttons: [
                    { type: 'push', label: '{% trans "Bold CTRL + SHIFT + B" %}', value: 'bold' },
                    { type: 'push', label: '{% trans "Italic CTRL + SHIFT + I" %}', value: 'italic' },
                    { type: 'push', label: '{% trans "Underline CTRL + SHIFT + U" %}', value: 'underline' },
                    { type: 'separator' },
                    { type: 'color', label: '{% trans "Font Color" %}', value: 'forecolor', disabled: true },
                    { type: 'color', label: '{% trans "Background Color" %}', value: 'backcolor', disabled: true }
                ]
            },
            {
                type: 'separator'
            },
            {
                group: 'indentlist',
                label: '{% trans "Lists" %}',
                buttons: [
                    { type: 'push', label: '{% trans "Create an Unordered List" %}', value: 'insertunorderedlist' },
                    { type: 'push', label: '{% trans "Create an Ordered List" %}', value: 'insertorderedlist' }
                ]
            }
            ]
        }
    };
{% endblock %}

{% block ajax %}
<script src="/media/website/dajax/jquery.dajax.core.js" type="text/javascript" charset="utf-8"></script>
{% dajaxice_js_import %}
{% endblock ajax %}

{% block extrahead %}
{{ block.super }}
<link type="text/css" href="/media/website/jquery/css/smoothness/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="/media/website/jquery/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/media/website/jquery/development-bundle/ui/i18n/jquery.ui.datepicker-{{request.LANGUAGE_CODE}}.js"></script>
<script type="text/javascript" src="/media/website/jquery/js/jquery-ui-1.8.18.custom.min.js"></script>
{% endblock %}

{% block content %}
    <h1>{{operation_title}}</h1>
    <form enctype="multipart/form-data" action='.' method='post'>
        {% csrf_token %}
        <table>
        {% wysiwyg_setup %}
        {{ form.as_table }}
        {% wysiwyg_editor "id_description" %}
        </table>
        <input type="submit" value="{% trans "Save" %}" />
        {% if is_edit %}
        <input type="reset" value="{% trans "Reset" %}" />
        {% endif %}
        <input type="button" value="{% trans "Cancel" %}" onclick="javascript:history.back()" />
    </form>
{% endblock %}

{% block end_page_block %}
    {{ block.super }}
    <script>
    $(function() {
        $( "#id_start_date" ).datepicker();
        $( "#id_end_date" ).datepicker();
    });
    </script>
{% endblock %}

[fmp-martins]

Still haven´t solve this... Any help?...

[acdha]

I just updated the test project with an example of this:

1. Custom template here: https://github.com/pydanny/django-wysiwyg/blob/master/test_project/templates/fun/admin/fancyplayground/change_form.html#L9
2. Example of the override here: note that you could also copy and paste in a huge block but I find it easier to update the array and make it obvious exactly what you're changing from the defaults: https://github.com/pydanny/django-wysiwyg/blob/master/test_project/templates/fun/admin/fancyplayground/django_wysiwyg_includes.html

[fmp-martins]

Great! :)

I'll give it a try as soon as possible and let you know about the results.

On Wed, Mar 14, 2012 at 16:39, Chris Adams < reply@reply.github.com

wrote:

I just updated the test project with an example of this:

1. Custom template here:

https://github.com/pydanny/django-wysiwyg/blob/master/test_project/templates/fun/admin/fancyplayground/change_form.html#L9

1. Example of the override here: note that you could also copy and paste in a huge block but I find it easier to update the array and make it obvious exactly what you're changing from the defaults:

https://github.com/pydanny/django-wysiwyg/blob/master/test_project/templates/fun/admin/fancyplayground/django_wysiwyg_includes.html

---

Reply to this email directly or view it on GitHub: https://github.com/pydanny/django-wysiwyg/issues/20#issuecomment-4502073

Fernando Martins

http://www.vilma-fernando.net/fernando/ "In Dreams Begin... http://m6onsoftware.blogspot.com/ Responsability"

[fmp-martins]

I cannot use the "extend" in 2. because I already extend my own template... Plus, I was unnable to run the test_project in Django 1.4, it gave me Error importing template source loader django.template.loaders.filesystem.load_template_source: "'module' object has no attribute 'load_template_source'"

I tried {% load wysiwyg %} followed by {% block django_wysiwyg_editor_config %} {{ block.super }} django_wysiwyg_editor_config.width = "100px"; django_wysiwyg_editor_config.autoHeight = true;

var buttons = django_wysiwyg_editor_config.toolbar.buttons,
    newButtons = [];
for (var i = 0; i < buttons.length; i++) {
    if (buttons[i].group != "insertitem") {
        newButtons.push(buttons[i]);
    }
};
django_wysiwyg_editor_config.toolbar.buttons = newButtons;

{% endblock %} But with no luck...

Still stucked!

[acdha]

If you already have your own template, you can simply add the django_wysiwyg_editor_config block override as shown in that example to your existing template rather than creating a new one.

I've updated the test project to use the newer Django template loader syntax.

[fmp-martins]

That is precisely what I'm trying to do from the begining, but somehow it seems to be ignoring the django_wysiwyg_editor_config block override. Here's the snippet of my template:

---

{% extends "base_index.html" %} {% load i18n dajaxice_templatetags %} {% load wysiwyg %}

{% block django_wysiwyg_editor_config %} {{ block.super }} django_wysiwyg_editor_config.width = "100px"; django_wysiwyg_editor_config.autoHeight = true; var buttons = django_wysiwyg_editor_config.toolbar.buttons, newButtons = []; for (var i = 0; i < buttons.length; i++) { if (buttons[i].group != "insertitem") { newButtons.push(buttons[i]); } }; django_wysiwyg_editor_config.toolbar.buttons = newButtons; {% endblock %}

---

It doesn't modify the django-wysiwyg, what evere I do, it always shows the same UI, not even the width is modified to 100px...

The test application returns: Exception Type: ImproperlyConfigured at / Exception Value: Error importing template source loader django.template.loaders.filesystem.load_template_source: "'module' object has no attribute 'load_template_source'"

[fmp-martins]

I've got it! :)

Here's what I was doing wrong: I was setting the parameters on the HTML <head>. To make it work, I had to set the parameters on the bottom of the HTML page, just before closing the <body> tag:

---

<script>
{% block django_wysiwyg_editor_config %}
{{ block.super }}
django_wysiwyg_editor_config.width = "450px";
django_wysiwyg_editor_config.height = "200px";
//django_wysiwyg_editor_config.autoHeight =  true;
var buttons = [
        {
            group: 'fontstyle',
            label: '{% trans "Font Name and Size" %}',
            buttons: [
                { type: 'select', label: 'Arial', value: 'fontname', disabled: true,
                  menu: [
                    { text: 'Arial', checked: true },
                    { text: 'Arial Black' },
                    { text: 'Comic Sans MS' },
                    { text: 'Courier New' },
                    { text: 'Georgia' },
                    { text: 'Impact' },
                    { text: 'Lucida Console' },
                    { text: 'Tahoma' },
                    { text: 'Times New Roman' },
                    { text: 'Trebuchet MS' },
                    { text: 'Verdana' }
                  ]
                },
                { type: 'spin', label: '13', value: 'fontsize', range: [9, 75], disabled: true }
            ]
        },
        {
            type: 'separator'
        },
        {
            group: 'textstyle',
            label: '{% trans "Font Style" %}',
            buttons: [
                { type: 'push', label: '{% trans "Bold CTRL + SHIFT + B" %}', value: 'bold' },
                { type: 'push', label: '{% trans "Italic CTRL + SHIFT + I" %}', value: 'italic' },
                { type: 'push', label: '{% trans "Underline CTRL + SHIFT + U" %}', value: 'underline' },
                { type: 'separator' },
                { type: 'color', label: '{% trans "Font Color" %}', value: 'forecolor', disabled: true },
                { type: 'color', label: '{% trans "Background Color" %}', value: 'backcolor', disabled: true }
            ]
        },
        {
            type: 'separator'
        },
        {
            group: 'indentlist',
            label: '{% trans "Lists" %}',
            buttons: [
                { type: 'push', label: '{% trans "Create an Unordered List" %}', value: 'insertunorderedlist' },
                { type: 'push', label: '{% trans "Create an Ordered List" %}', value: 'insertorderedlist' }
            ]
        }
        ];

django_wysiwyg_editor_config.toolbar.buttons = buttons;
{% endblock %}
</script>

---

I hope this helps other. Maybe this tip should be included in the documentation...

[acdha]

Interesting - I suspect that means that something else in that template is changing the normal Django admin JS load order. We should definitely document that note for people making aggressive changes.

[fmp-martins]

I've documented it on Hexónio's Blog: http://blog.hexonio.com/2012/04/12/django-wysiwyg-editor/