No WISYWIG support

[tbicr]

I don't find WYSIWYG/markup support. I found https://github.com/jhollingworth/bootstrap-wysihtml5/ WYSIWYG editor for twitter bootstrap and implement this issue for me:

Python

I add custom model_form_converter which applying by field name

class WysiwygTextAreaWidget(TextArea):

    def __call__(self, *args, **kwargs):
        return super(WysiwygTextAreaWidget, self).__call__(class_='wysiwyg',
                                                           *args, **kwargs)

class WysiwygTextAreaField(TextAreaField):
    widget = WysiwygTextAreaWidget()

class WysiwygCustomModelConverter(CustomModelConverter):
    wysiwig_fields = ()

    @orm.converts('StringField')
    def conv_String(self, model, field, kwargs):
        if field.name in self.wysiwig_fields:
            return WysiwygTextAreaField(**kwargs)
        return CustomModelConverter.conv_String(self, model, field, kwargs)

class JobModelConverter(WysiwygCustomModelConverter):
    wysiwig_fields = ('description',)

class JobModelView(ModelView):
    model_form_converter = JobModelConverter
    create_template = 'admin/model/wysiwyg-create.html'
    edit_template = 'admin/model/wysiwyg-edit.html'

Templates

I add wysiwyg-create.html and wysiwyg-edit.html templates extended by create.html and edit.html:

{% extends 'admin/model/create.html' %}

{% block head %}
    {{ super() }}
    <link href="{{ url_for('static', filename='admin/css/bootstrap-wysihtml5-0.0.2.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='admin/css/styles.css') }}" rel="stylesheet">
{% endblock %}

{% block tail %}
    {{ super() }}
    <script src="{{ url_for('static', filename='admin/js/wysihtml5-0.3.0.min.js') }}"></script>
    <script src="{{ url_for('static', filename='admin/js/bootstrap-wysihtml5-0.0.2.min.js') }}"></script>
    <script src="{{ url_for('static', filename='admin/js/script.js') }}"></script>
{% endblock %}

JS

!(function($) {
    $(function () {
        $('.wysiwyg').wysihtml5({
            html: true,
            stylesheets: null
        });
    });
})(jQuery);

CSS

.form-horizontal input[type="text"] {
    width: 100%;
}

.form-horizontal textarea {
    width: 100%;
    height: 100%;
    min-height: 400px;
}  

Maybe it's not good code, but to have base or/and easy extending solution for WYSWYG support look good idea. For me it's site content editing.

UPD. Sorry, not found #15 at first. UPD 2. Updated examples with custom templates by @mrjoes comment.

[mrjoes]

You can customise templates to include extra JS/CSS without changing model converter.

For example:

  {% extends 'admin/model/edit.html' %}
  {% block head %}
    {{ super() }}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/master.css') }}" />
  {% endblock %}
  {% block tail %}
    <script src="{{ url_for('static', filename='js/myeditor.js') }}"></script>
    <script language="javascript">
      alert('foo');
    </script>
  {% endblock %}

and then use it instead of standard template:

  class MyModelAdmin(ModelView):
    create_template = 'myedit.html'
    edit_template = 'myedit.html'

then just inherit your models from this base class.

[mrjoes]

I made gist which illustrates how you can integrate CKEditor. For now, I think it is better to keep it separate and don't integrate with the Flask-Admin core.

Gist in question: https://gist.github.com/mrjoes/5189850

[tbicr]

Probably better add to examples?

[mrjoes]

Good idea, will do.