Uso matraz de CKEditor en el proyecto frasco integrado editor de texto enriquecido

Uso básico

instalar

El primero en utilizar herramientas tales como PIP o Pipenv instalar o actualizar:

$ pip install -U flask-ckeditor

extensión de inicialización

En circunstancias normales, sólo es necesario para la importación y la clase de CKEditor instantiate y pasar al ejemplo de programa:

from flask_ckeditor import CKEditor

app = Flask(__name__) ckeditor = CKEditor(app)

Si se utiliza una función de fábrica, también puede llamar a init_app () para inicializar:

from flask_ckeditor import CKEditor

ckeditor = CKEditor() def create_app(): app = Flask(__name__) ckeditor.init_app(app) return app

La introducción de los recursos CKeditor

Con el fin de usar CKEditor, introdujo por primera vez los archivos de CKEditor JavaScript y otros recursos en la plantilla. La práctica recomendada es escribir su propia declaración referencias de recursos, se puede proporcionar en CKEditor en línea del constructor para construir un paquete personalizado de los recursos, en virtud de catálogo descarga estática, descomprimir en el proyecto, y la introducción de archivo ckeditor.js en el paquete de recursos, tales como ( la trayectoria real ajuste según sea necesario):

<script src="{{ url_for('static', filename='ckeditor/ckeditor.js') }}"></script>

Si no necesita personalizar, también se puede cargar desde el CDN:

<script src="//cdn.ckeditor.com/4.9.2/standard/ckeditor.js"></script>

Por último, como una opción alternativa, también se puede utilizar matraz de CKEditor método ckeditor.load proporcionado () para generar una declaración de referencia:

{{ ckeditor.load() }}

Por defecto es recursos de carga de CDN, la variable de configuración se establece en True CKEDITOR_SERVE_LOCAL utilizará los recursos locales extendidas incorporado. Además, también se puede utilizar parámetros custom_url utilizar un paquetes de recursos personalizado:

{{ ckeditor.load(custom_url=url_for('static', filename='ckeditor/ckeditor.js')) }}

Crear un área de texto CKEditor

Matraz de CKEditor CKEditor ofrece dos maneras de área de texto:

1. Integración con WTForms / matraz de WTF

Matraz de CKEditor CKEditorField proporciona un campo de clase, y normalmente se introduce desde WTForms Stringfield, SubmitField mismo uso. De hecho, es a TextAreaField WTForms proporcionados por el embalaje.

A modo de ejemplo, podemos crear una clase de formulario para escribir artículos. Esta clase de formulario contiene un campo de cabecera (Stringfield), un campo de texto (CKEditorField) y un campo presentar (SubmitField). Verá que el campo cuerpo utiliza CKEditorField.

from flask_wtf import FlaskForm
from flask_ckeditor import CKEditorField from wtforms import StringField, SubmitField class PostForm(FlaskForm): title = StringField('Title') body = CKEditorField('Body') submit = SubmitField('Submit')

En el área de edición de texto de la plantilla de representación, podemos hacer que la forma como de costumbre:

<form method="post">
    {{ form.title.label }}{{ form.title() }}
    {{ form.body.label }}{{ form.body() }}
    {{ form.submit() }}
</form>

{{ ckeditor.load() }}
{{ ckeditor.config(name='body') }}

La única salvedad es que necesitamos método ckeditor.config () llamar después de la instrucción de recurso a hacen referencia a la configuración de CKEditor y la inicialización, y el valor del parámetro nombre se establece en los campos CKeditor nombre del atributo, es decir, aquí el cuerpo.

Cuando se envía el formulario, se puede llegar a los mismos datos a través de la propiedad form.attr.data al igual que otros campos, áreas de texto, donde los datos que se form.body.data.

2. Crear manualmente

Si no se utiliza WTForms / matraz de WTF, se puede utilizar directamente ckeditor.create matraz de CKEditor proporcionó () para crear área de edición de texto en la plantilla:

<form method="post">
    {{ ckeditor.create() }}
    <input type="submit">
</form>

{{ ckeditor.load() }}
{{ ckeditor.config() }}  <!-- 这时不用设置name参数 -->

Después de enviar el formulario, puede utilizar las teclas adquiridos como valores ckeditor correspondiente de los datos del formulario, es decir request.form.get ( 'CKEditor').

área de texto Ejemplo

Variables de configuración

Matraz de CKEditor proporciona estas variables de configuración (véase el formulario de texto aquí ):

Matraz de CKEditor apoyado configuración

Añadir fotos

Cuando se utiliza un editor de texto para escribir artículos, subir fotos es un requisito muy común. En CKEditor, las imágenes se pueden cargar a través de Explorador de archivos lograr plug-ins. programa de frasco en el lado del servidor, que tiene que hacer tres cosas:

Crear una función de fin de proceso y guardar el archivo de carga
Crear una función de vista de obtener un archivo de imagen, similar al matraz incorporada extremo estático
La variable de configuración CKEDITOR_FILE_UPLOADER ajustado a la dirección URL o puntos finales función de vista

El ejemplo de código completo se muestra a continuación:

from flask_ckeditor import upload_success, upload_fail app.config['CKEDITOR_FILE_UPLOADER'] = 'upload' @app.route('/files/<path:filename>') def uploaded_files(filename): path = '/the/uploaded/directory' return send_from_directory(path, filename) @app.route('/upload', methods=['POST']) def upload(): f = request.files.get('upload') # 获取上传图片文件对象 # Add more validations here extension = f.filename.split('.')[1].lower() if extension not in ['jpg', 'gif', 'png', 'jpeg']: # 验证文件类型示例 return upload_fail(message='Image only!') # 返回upload_fail调用 f.save(os.path.join('/the/uploaded/directory', f.filename)) url = url_for('uploaded_files', filename=f.filename) return upload_success(url=url) # 返回upload_success调用

Nota clave entrante request.files.get () debe ser 'subir', que es el valor de CKEditor nombre del campo de carga definida.

En el proceso de carga de archivos función de vista, debe devolver upload_success () llamadas, por el parámetro url para obtener la URL archivo subido. En circunstancias normales, además de guardar el archivo, es necesario subir fotos validación y procesamiento (tamaño, formato, procesamiento de nombre de archivo, etc., de acceso específico a esta "carga de archivos Frasco (a): nativo para lograr" la comprensión), en cuando la verificación falla, es necesario volver upload_fail () llamadas y usar los parámetros del mensaje aprobadas en el mensaje de error.

Cuando las variables de configuración CKEDITOR_FILE_UPLOADER SET, puede abrir el botón Imagen para abrir la ventana emergente ver los archivos subidos un nuevo punto de etiqueta en el área de edición. Además, también puede arrastrar y las imágenes de gotas directamente en el área de edición para cargar un archivo, o copiar y pegar en un área de carga de un archivo de texto (CKEditor> = 4.5).

ejemplo la subida de imágenes

Inclinar programa de ejemplo correspondiente de ejemplos / imagen-carga / directorio.

Si la versión de CKEditor que está utilizando es inferior a 4,5, utilice las siguientes maneras:

from flask import send_from_directory

app.config['CKEDITOR_FILE_UPLOADER'] = 'upload' # this value can be endpoint or url @app.route('/files/<filename>') def uploaded_files(filename): path = '/the/uploaded/directory' return send_from_directory(path, filename) @app.route('/upload', methods=['POST']) @ckeditor.uploader def upload(): f = request.files.get('upload') f.save(os.path.join('/the/uploaded/directory', f.filename)) url = url_for('uploaded_files', filename=f.filename) return url

solicitud de carga imagen para añadir protección CSRF

Si desea subir fotos de solicitudes para agregar protección CSRF puede lograrse mediante CSRFProtect (matraz de WTF construido), instale primero matraz de WTF:

$ pip install flask-wtf

A continuación, inicializar la extensión:

from flask_wtf import CSRFProtect

csrf = CSRFProtect(app)

Matraz de CKEditor versión 0.4.3 soporte integrado para CSRFProtect cuando se utiliza CSRFProtect, sólo hay que ajustar la variable de configuración `CKEDITOR_ENABLE_CSRF`` true` a la protección CSRF abierta:

app.config['CKEDITOR_ENABLE_CSRF'] = True

Por cierto, dentro de la necesidad matraz de CKEditor subir fotos CSRF fichas en el encabezado de la solicitud de AJAX, este recién añadida por la versión 4.9.0 CKEditor una opción de configuración fileTools_requestHeaders se dan cuenta, esta configuración se puede utilizar para querer insertar la solicitud de subida del archivo campos de cabecera definidos. Por lo tanto, si se quiere lograr la protección CSRF, CKEditor versión 4.9.0 o superior requiere.

resaltado de sintaxis Código

la sintaxis del código destacando por Fragmento de código logra (hightlight.js base) plug-in, puede configurar las variables CKEDITOR_ENABLE_CODESNIPPET Ture inició la apertura. Antes de esto, es necesario asegurarse de instalar este plugin (built-in paquete de recursos contiene este plugin).

A fin de hacer correctamente el bloque de código, también hay que introducir un archivo de recursos correspondientes, la forma más fácil es usar matraz de CKEditor método ckeditor.load_code_theme () proporciona:

<head>
 ...
 {{ ckeditor.load_code_theme() }}
</head>

Puede configurar la sintaxis tema CKEDITOR_CODE_THEME destacando a través de variables de configuración, el valor predeterminado es monokai_sublime, puede en esta página para ver todas las cadenas disponibles correspondientes tema.

ejemplos resaltado de sintaxis

Utilice el programa de ejemplo

proyecto de almacén ofrece cinco programa de ejemplo, que muestra el uso básico, carga de imágenes inserto el código resaltado de sintaxis, el modo de rebajas y no utiliza matraz de WTF / WTForms. programa de ejemplo básico, por ejemplo, lo puede conseguir y ejecute el comando siguiente:

$ git clone https://github.com/greyli/flask-ckeditor
$ cd flask-ckeditor/examples
$ pip install -r requirements.txt
$ python basic/app.py

Y luego acceder al navegador HTTP: // 127.0.0.1:5000 .