-
Notifications
You must be signed in to change notification settings - Fork 182
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
54 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
You can customize the templates and add custom javascript code to enable CKEditor to your fields. | ||
In order to use `CKEditor` you need to inject some JS code into the SQLAdmin and that works by customizing the templates. | ||
|
||
Let's say you have the following model: | ||
|
||
```py | ||
class Post(Base): | ||
id = Column(Integer, primary_key=True) | ||
content = Column(Text, nullable=False) | ||
``` | ||
|
||
- First create a `templates` directory in your project. | ||
- Then add a file `custom_edit.html` there with the following content: | ||
```html name="custom_edit.html" | ||
{% extends "edit.html" %} | ||
{% block tail %} | ||
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script> | ||
<script> | ||
ClassicEditor | ||
.create(document.querySelector('#content')) | ||
.catch(error => { | ||
console.error(error); | ||
}); | ||
</script> | ||
{% endblock %} | ||
``` | ||
|
||
- Use the `custom_edit.html` template in your admin: | ||
|
||
```py | ||
class PostAdmin(ModelView, model=Post): | ||
edit_template = "custom_edit.html" | ||
``` | ||
|
||
Now whenever editing a Post object in admin, the CKEditor will be applied to the `content` field of the model. | ||
You can do the same thing with `create_template` field. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,22 +1,27 @@ | ||
There are different approaches when it comes to working with templates in SQLAdmin. | ||
You can simply replace a template file and implement it yourself, | ||
or you could customize parts of the template without implementing the whole page. | ||
The template uses `Jinja2` template engine and by default looks for a `templates` directory in your project. | ||
|
||
## Replacing templates | ||
If your `templates` directory has the default template files like `list.html` or `create.html` then they wiill be used. | ||
Otherwise you can create custom templates and use them. | ||
|
||
You can create a directory called `templates` in your project | ||
and create relevant template files in it. | ||
## Customizing templates | ||
|
||
If you name your files the same way SQLAdmin does, for example `list.html` or `details.html` | ||
then you don't have to do anything else. They will be picked up by SQLAdmin automatically. | ||
As the first step you should create a `templates` directory in you project. | ||
|
||
But if you name the files something else, | ||
then you need to specify the name in your ModelView classes. | ||
Since `Jinja2` is modular, you can override your specific template file and do your changes. | ||
For example you can create a `custom_details.html` file which overrides the `details.html` from | ||
SQLAdmin and in the `content` block it adds custom HTML tags: | ||
|
||
!!! example | ||
|
||
```python | ||
```html name="custom_details.html" | ||
{% extends "details.html" %} | ||
{% block content %} | ||
{{ super() }} | ||
<p>Custom HTML</p> | ||
{% endblock %} | ||
``` | ||
|
||
```python name="admin.py" | ||
class UserAdmin(ModelView, model=User): | ||
details_template = "details.html" | ||
list_template = "custom_list.html" | ||
details_template = "custom_details.html" | ||
``` |