CODEWITHSUNDEEP
pythonflaskckeditor
Jitendra
Jitendra

Reputation: 531

How to change width and height of CKEditorField of flask-ckeditor?

I tried this:

{% block tail %}
   {{ super() }}
   {{ ckeditor.load() }}
   {{ ckeditor.config(width=200) }}
{% endblock %}

I tried with different height and width values but it's not modifying.

Upvotes: 2

Views: 1161

Answers (3)

Ahmad
Ahmad

Reputation: 9658

You can append a script after loading CKEditor:

{% block tail %}
    {{ super() }}
    {{ ckeditor.load() }}
    {{ ckeditor.config(name='body') }}
  <script>
    CKEDITOR.addCss(".cke_editable{cursor:text; font-size: 16px; font-family: Arial, sans-serif;}");
  </script>
{% endblock %}

Upvotes: 0

pravoslav
pravoslav

Reputation: 78

When using Flask-Admin, you have to specify field name you overwritten with form_overrides = dict(text=CKEditorField) (docs). This also applies for wtf-forms - you have to specify name by field name, you made in form class . Well when you want to specify just width, it could be better way to adjust it with some css (may look better). Anyways code should look like this:

{% block tail %}
   {{ super() }}
   {{ ckeditor.load() }}
   {{ ckeditor.config(name='text',width=300) }}
{% endblock tail %}

Also you can use custom_config, to set it up.

{{ ckeditor.config(name='text',custom_config="width: '80%'") }}

If you wouldn't use flask-admin and you created ckeditor through ckeditor.create() the value of name is set in default to name="ckeditor" so you don't have to specify name in .config() (docs):

{{ ckeditor.load() }}
{{ ckeditor.create() }}
{{ ckeditor.config(width=200) }}

Upvotes: 2

Grey Li
Grey Li

Reputation: 12762

You can use config variable CKEDITOR_HEIGHT and CKEDITOR_WDITH, for example:

from flask import Flask
from flask_ckeditor import CKEditor

app = Flask(__name__)
app.config['CKEDITOR_HEIGHT'] = 1000  # px
app.config['CKEDITOR_WDITH'] = 400  # px

ckeditor = CKEditor(app)

See all available configuration in docs.

Upvotes: 1

Related Questions