Skip to content

Commit 525f596

Browse files
2ik2ik
committed
README
1 parent 9845a52 commit 525f596

File tree

1 file changed

+131
-50
lines changed

1 file changed

+131
-50
lines changed

‎README.md‎

Lines changed: 131 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# Editor.js for Django
22

33
Django plugin for using [Editor.js](https://editorjs.io/)
4+
45
> This plugin works fine with JSONField in Django >= 3.1
56
67
[![Django Editor.js](https://i.ibb.co/r6xt4HJ/image.png)](https://github.com/2ik/django-editorjs-fields)
@@ -42,7 +43,31 @@ class Post(models.Model):
4243

4344
```
4445

45-
Or add custom Editor.js plugins and configs ([List plugins](https://github.com/editor-js/awesome-editorjs))
46+
#### New in version 0.2.1. Django Templates support
47+
48+
```html
49+
<!-- template.html -->
50+
51+
<!DOCTYPE html>
52+
<html lang="en">
53+
<head>
54+
<meta charset="UTF-8" />
55+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
56+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
57+
<title>Document</title>
58+
</head>
59+
<body>
60+
{% load editorjs %}
61+
{{ post.body_default }}
62+
{{ post.body_editorjs | editorjs}}
63+
{{ post.body_editorjs_text | editorjs}}
64+
</body>
65+
</html>
66+
```
67+
68+
## Additionally
69+
70+
You can add custom Editor.js plugins and configs ([List plugins](https://github.com/editor-js/awesome-editorjs))
4671

4772
Example custom field in models.py
4873

@@ -53,7 +78,7 @@ from django_editorjs_fields import EditorJsJSONField
5378

5479

5580
class Post(models.Model):
56-
body_custom = EditorJsJSONField(
81+
body_editorjs_custom = EditorJsJSONField(
5782
plugins=[
5883
"@editorjs/image",
5984
"@editorjs/header",
@@ -75,19 +100,35 @@ class Post(models.Model):
75100
}
76101
}
77102
},
103+
i18n={
104+
'messages': {
105+
'blockTunes': {
106+
"delete": {
107+
"Delete": "Удалить"
108+
},
109+
"moveUp": {
110+
"Move up": "Переместить вверх"
111+
},
112+
"moveDown": {
113+
"Move down": "Переместить вниз"
114+
}
115+
}
116+
},
117+
}
78118
null=True,
79119
blank=True
80120
)
81121

82122
```
83123

84-
**django-editorjs-fields** includes this list of Editor.js plugins by default:
124+
**django-editorjs-fields** support this list of Editor.js plugins by default:
125+
<a name="plugins"></a>
85126

86127
<details>
87-
<summary>DEFAULT_PLUGINS</summary>
128+
<summary>EDITORJS_DEFAULT_PLUGINS</summary>
88129

89130
```python
90-
DEFAULT_PLUGINS = [
131+
EDITORJS_DEFAULT_PLUGINS = (
91132
'@editorjs/paragraph',
92133
'@editorjs/image',
93134
'@editorjs/header',
@@ -103,47 +144,45 @@ DEFAULT_PLUGINS = [
103144
'@editorjs/link',
104145
'@editorjs/marker',
105146
'@editorjs/table',
106-
]
147+
)
107148
```
149+
108150
</details>
109151

110152
<details>
111-
<summary>DEFAULT_CONFIG_PLUGINS</summary>
153+
<summary>EDITORJS_DEFAULT_CONFIG_TOOLS</summary>
112154

113155
```python
114-
DEFAULT_CONFIG_PLUGINS = {
115-
'@editorjs/image': {
116-
'Image': {
117-
'class': 'ImageTool',
118-
'inlineToolbar': True,
119-
"config": {"endpoints": {"byFile": "/editorjs/image_upload/"}},
120-
}
156+
EDITORJS_DEFAULT_CONFIG_TOOLS = {
157+
'Image': {
158+
'class': 'ImageTool',
159+
'inlineToolbar': True,
160+
"config": {"endpoints": {"byFile": "/editorjs/image_upload/"}},
121161
},
122-
'@editorjs/header': {
123-
'Header': {
124-
'class': 'Header',
125-
'inlineToolbar': True,
126-
'config': {
127-
'placeholder': 'Enter a header',
128-
'levels': [2, 3, 4],
129-
'defaultLevel': 2,
130-
},
162+
'Header': {
163+
'class': 'Header',
164+
'inlineToolbar': True,
165+
'config': {
166+
'placeholder': 'Enter a header',
167+
'levels': [2, 3, 4],
168+
'defaultLevel': 2,
131169
}
132170
},
133-
'@editorjs/checklist': {'Checklist': {'class': 'Checklist', 'inlineToolbar': True}},
134-
'@editorjs/list': {'List': {'class': 'List', 'inlineToolbar': True}},
135-
'@editorjs/quote': {'Quote': {'class': 'Quote', 'inlineToolbar': True}},
136-
'@editorjs/raw': {'Raw': {'class': 'RawTool'}},
137-
'@editorjs/code': {'Code': {'class': 'CodeTool'}},
138-
'@editorjs/inline-code': {'InlineCode': {'class': 'InlineCode'}},
139-
'@editorjs/embed': {'Embed': {'class': 'Embed'}},
140-
'@editorjs/delimiter': {'Delimiter': {'class': 'Delimiter'}},
141-
'@editorjs/warning': {'Warning': {'class': 'Warning', 'inlineToolbar': True}},
142-
'@editorjs/link': {'LinkTool': {'class': 'LinkTool'}},
143-
'@editorjs/marker': {'Marker': {'class': 'Marker', 'inlineToolbar': True}},
144-
'@editorjs/table': {'Table': {'class': 'Table', 'inlineToolbar': True}},
171+
'Checklist': {'class': 'Checklist', 'inlineToolbar': True},
172+
'List': {'class': 'List', 'inlineToolbar': True},
173+
'Quote': {'class': 'Quote', 'inlineToolbar': True},
174+
'Raw': {'class': 'RawTool'},
175+
'Code': {'class': 'CodeTool'},
176+
'InlineCode': {'class': 'InlineCode'},
177+
'Embed': {'class': 'Embed'},
178+
'Delimiter': {'class': 'Delimiter'},
179+
'Warning': {'class': 'Warning', 'inlineToolbar': True},
180+
'LinkTool': {'class': 'LinkTool'},
181+
'Marker': {'class': 'Marker', 'inlineToolbar': True},
182+
'Table': {'class': 'Table', 'inlineToolbar': True},
145183
}
146184
```
185+
147186
</details>
148187

149188
`EditorJsJSONField` accepts all the arguments of `JSONField` class.
@@ -152,14 +191,23 @@ DEFAULT_CONFIG_PLUGINS = {
152191

153192
Additionally, it includes arguments such as:
154193

155-
| Args | Description | Default |
156-
| --------------- | ------------------------------------------------------------------------------------------------- | ------------------------ |
157-
| `plugins` | List plugins Editor.js | `DEFAULT_PLUGINS` |
158-
| `tools` | Set config `tools` for Editor.js [See docs](https://editorjs.io/configuration#passing-saved-data) | `DEFAULT_CONFIG_PLUGINS` |
159-
| `use_editor_js` | Enables or disables the Editor.js plugin for the field | `True` |
160-
161-
162-
### Image uploads
194+
| Args | Description | Default |
195+
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- |
196+
| `plugins` | List plugins Editor.js | `EDITORJS_DEFAULT_PLUGINS` |
197+
| `tools` | Map of Tools to use. Set config `tools` for Editor.js [See docs](https://editorjs.io/configuration#passing-saved-data) | `EDITORJS_DEFAULT_CONFIG_TOOLS` |
198+
| `use_editor_js` | Enables or disables the Editor.js plugin for the field | `True` |
199+
| `autofocus` | If true, set caret at the first Block after Editor is ready | `False` |
200+
| `hideToolbar` | If true, toolbar won't be shown | `False` |
201+
| `inlineToolbar` | Defines default toolbar for all tools. | `True` |
202+
| `readOnly` | Enable read-only mode | `False` |
203+
| `minHeight` | Height of Editor's bottom area that allows to set focus on the last Block | `300` |
204+
| `logLevel` | Editors log level (how many logs you want to see) | `ERROR` |
205+
| `placeholder` | First Block placeholder | `Type text...` |
206+
| `defaultBlock` | This Tool will be used as default. Name should be equal to one of Tool`s keys of passed tools. If not specified, Paragraph Tool will be used | `paragraph` |
207+
| `i18n` | Internalization config | `{}` |
208+
| `sanitizer` | Define default sanitizer configuration | `{ p: true, b: true, a: true }` |
209+
210+
## Image uploads
163211

164212
If you want to upload images to the editor then add `django_editorjs_fields.urls` to `urls.py` for your project with `DEBUG=True`:
165213

@@ -193,18 +241,51 @@ urlpatterns = [
193241

194242
See an example of how you can work with the plugin [here](https://github.com/2ik/django-editorjs-fields/blob/main/example)
195243

244+
## Forms
245+
246+
```python
247+
from django import forms
248+
from django_editorjs_fields import EditorJsWidget
249+
250+
251+
class TestForm(forms.ModelForm):
252+
class Meta:
253+
model = Post
254+
exclude = []
255+
widgets = {
256+
'body_editorjs': EditorJsWidget(config={'minHeight': 100}),
257+
'body_editorjs_text': EditorJsWidget(plugins=["@editorjs/image", "@editorjs/header"])
258+
}
259+
```
260+
261+
## Theme
262+
263+
### Default Theme
264+
265+
![image](https://user-images.githubusercontent.com/6692517/124242133-7a7dad00-db2d-11eb-812f-84a5c44e88c9.png)
266+
267+
### Dark Theme
268+
269+
plugin use css property [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) to define a dark theme in browser
270+
271+
![image](https://user-images.githubusercontent.com/6692517/124240864-3dfd8180-db2c-11eb-85c1-21f0faf41775.png)
272+
196273
## Configure
197274

198275
The application can be configured by editing the project's `settings.py`
199276
file.
200277

201-
| Key | Description | Default |
202-
| ------------------------------ | ------------------------------------------------------------------------------- | ------------------------------------------------------ |
203-
| `EDITORJS_IMAGE_UPLOAD_PATH` | Path uploads images | `settings.MEDIA_URL + 'uploads/images/'` |
204-
| `EDITORJS_IMAGE_NAME_ORIGINAL` | To use the original name of the image file? | `False` |
205-
| `EDITORJS_IMAGE_NAME_POSTFIX` | Image file name postfix. Ignored when `EDITORJS_IMAGE_NAME_ORIGINAL` is `True` | `token_urlsafe(5) # from secrets import token_urlsafe` |
206-
| `EDITORJS_IMAGE_NAME` | Image file name postfix. Ignored when `EDITORJS_IMAGE_NAME_ORIGINAL` is `False` | `token_urlsafe(8) # from secrets import token_urlsafe` |
207-
| `EDITORJS_VERSION` | Version Editor.js | `2.19.1` |
278+
| Key | Description | Default |
279+
| ------------------------------- | ------------------------------------------------------------------------------- | ---------------------------------------- |
280+
| `EDITORJS_DEFAULT_PLUGINS` | List of plugins names Editor.js from npm | [See above](#plugins) |
281+
| `EDITORJS_DEFAULT_CONFIG_TOOLS` | Map of Tools to use | [See above](#plugins) |
282+
| `EDITORJS_IMAGE_UPLOAD_PATH` | Path uploads images | `settings.MEDIA_URL + 'uploads/images/'` |
283+
| `EDITORJS_IMAGE_NAME_ORIGINAL` | To use the original name of the image file? | `False` |
284+
| `EDITORJS_IMAGE_NAME_POSTFIX` | Image file name postfix. Ignored when `EDITORJS_IMAGE_NAME_ORIGINAL` is `True` | `token_urlsafe(5)` |
285+
| `EDITORJS_IMAGE_NAME` | Image file name postfix. Ignored when `EDITORJS_IMAGE_NAME_ORIGINAL` is `False` | `token_urlsafe(8)` |
286+
| `EDITORJS_VERSION` | Version Editor.js | `2.22.1` |
287+
288+
For `EDITORJS_IMAGE_NAME_POSTFIX` and `EDITORJS_IMAGE_NAME` was used `from secrets import token_urlsafe`
208289

209290
## Support and updates
210291

0 commit comments

Comments
 (0)