python/fastapi-admin
1
0
Fork 0
mirror of https://github.com/fastapi-admin/fastapi-admin.git synced 2026-03-13 10:32:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

add editor input

Browse Source
This commit is contained in:
long2ice
2021-05-16 13:43:51 +08:00
parent 50ebd3d864
commit a398b55057
5 changed files with 113 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/en/docs/reference/widget/input.md
View File

@@ -30,12 +30,16 @@ Html email input.
## Json
Display a json editor widget.
Display a json editor widget, based on [jsoneditor](https://github.com/josdejong/jsoneditor).
## TextArea
Html textarea input.
## Editor
Based on [quilljs](https://github.com/quilljs/quill), display a rich editor input.
## DateTime
Html datetime input.

2
examples/resources.py
View File

@@ -92,7 +92,7 @@ class Content(Dropdown):
"is_reviewed",
"type",
Field(name="image", label="Image", display=displays.Image(width="40")),
"body",
Field(name="body", label='Body', input_=inputs.Editor()),
"created_at",
]

52
fastapi_admin/templates/widgets/inputs/editor.html Normal file
View File

@@ -0,0 +1,52 @@
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
<div class="form-group mb-3">
<label class="form-label">{{ label }}</label>
<input {% if not null %}required{% endif %} type="{{ input_type }}" class="form-control" name="{{ name }}"
{% if disabled %}disabled{% endif %} value="{{ value }}" hidden>
<div id="editor-{{ name }}">
</div>
{% if help_text %}
<small class="form-hint">
{{ help_text }}
</small>
{% endif %}
</div>
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<script>
Quill.prototype.getHTML = function () {
return this.container.querySelector('.ql-editor').innerHTML;
};
Quill.prototype.setHTML = function (html) {
this.container.querySelector('.ql-editor').innerHTML = html;
};
let toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}],
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}],
[{'indent': '-1'}, {'indent': '+1'}],
[{'direction': 'rtl'}],
[{'size': ['small', false, 'large', 'huge']}],
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{'color': []}, {'background': []}],
[{'font': []}],
[{'align': []}],
['clean']
];
let quill = new Quill('#editor-{{ name }}', {
modules: {
toolbar: toolbarOptions
},
placeholder: "{{ placeholder }}",
theme: 'snow'
});
{% if value %}
quill.setHTML('{{ value|safe }}');
{% endif %}
quill.on('text-change', function (delta, oldDelta, source) {
$('input[name={{ name }}]').val(quill.getHTML())
});
</script>

12
fastapi_admin/templates/widgets/inputs/select.html
View File

@@ -8,11 +8,13 @@
{% endif %} >{{ option[0] }}</option>
{% endfor %}
</select>
{% if help_text %}
<div class="mt-2">
<small class="form-hint">
{{ help_text }}
</small>
</div>
{% endif %}
</div>
{% include "components/select.html" %}
{% if help_text %}
<small class="form-hint">
{{ help_text }}
</small>
{% endif %}
{% endwith %}

92
fastapi_admin/widgets/inputs.py
View File

@@ -15,7 +15,7 @@ class Input(Widget):
template = "widgets/inputs/input.html"
def __init__(
self, help_text: Optional[str] = None, default: Any = None, null: bool = False, **context
self, help_text: Optional[str] = None, default: Any = None, null: bool = False, **context
):
super().__init__(null=null, help_text=help_text, **context)
self.default = default
@@ -44,12 +44,12 @@ class Text(Input):
input_type: Optional[str] = "text"
def __init__(
self,
help_text: Optional[str] = None,
default: Any = None,
null: bool = False,
placeholder: str = "",
disabled: bool = False,
self,
help_text: Optional[str] = None,
default: Any = None,
null: bool = False,
placeholder: str = "",
disabled: bool = False,
):
super().__init__(
null=null,
@@ -65,11 +65,11 @@ class Select(Input):
template = "widgets/inputs/select.html"
def __init__(
self,
help_text: Optional[str] = None,
default: Any = None,
null: bool = False,
disabled: bool = False,
self,
help_text: Optional[str] = None,
default: Any = None,
null: bool = False,
disabled: bool = False,
):
super().__init__(help_text=help_text, null=null, default=default, disabled=disabled)
@@ -91,12 +91,12 @@ class Select(Input):
class ForeignKey(Select):
def __init__(
self,
model: Type[Model],
default: Any = None,
null: bool = False,
disabled: bool = False,
help_text: Optional[str] = None,
self,
model: Type[Model],
default: Any = None,
null: bool = False,
disabled: bool = False,
help_text: Optional[str] = None,
):
super().__init__(help_text=help_text, default=default, null=null, disabled=disabled)
self.model = model
@@ -116,10 +116,10 @@ class ManyToMany(Select):
template = "widgets/inputs/many_to_many.html"
def __init__(
self,
model: Type[Model],
disabled: bool = False,
help_text: Optional[str] = None,
self,
model: Type[Model],
disabled: bool = False,
help_text: Optional[str] = None,
):
super().__init__(help_text=help_text, disabled=disabled)
self.model = model
@@ -144,13 +144,13 @@ class ManyToMany(Select):
class Enum(Select):
def __init__(
self,
enum: Type[EnumCLS],
default: Any = None,
enum_type: Type = int,
null: bool = False,
disabled: bool = False,
help_text: Optional[str] = None,
self,
enum: Type[EnumCLS],
default: Any = None,
enum_type: Type = int,
null: bool = False,
disabled: bool = False,
help_text: Optional[str] = None,
):
super().__init__(help_text=help_text, default=default, null=null, disabled=disabled)
self.enum = enum
@@ -174,10 +174,10 @@ class Json(Input):
template = "widgets/inputs/json.html"
def __init__(
self,
help_text: Optional[str] = None,
null: bool = False,
options: Optional[dict] = None,
self,
help_text: Optional[str] = None,
null: bool = False,
options: Optional[dict] = None,
):
"""
options config to jsoneditor, see https://github.com/josdejong/jsoneditor
@@ -199,6 +199,10 @@ class TextArea(Text):
input_type = "textarea"
class Editor(Text):
template = "widgets/inputs/editor.html"
class DateTime(Text):
input_type = "datetime"
@@ -211,12 +215,12 @@ class File(Input):
input_type = "file"
def __init__(
self,
upload: FileUpload,
default: Any = None,
null: bool = False,
disabled: bool = False,
help_text: Optional[str] = None,
self,
upload: FileUpload,
default: Any = None,
null: bool = False,
disabled: bool = False,
help_text: Optional[str] = None,
):
super().__init__(
null=null,
@@ -242,11 +246,11 @@ class Radio(Select):
template = "widgets/inputs/radio.html"
def __init__(
self,
options: List[Tuple[str, Any]],
help_text: Optional[str] = None,
default: Any = None,
disabled: bool = False,
self,
options: List[Tuple[str, Any]],
help_text: Optional[str] = None,
default: Any = None,
disabled: bool = False,
):
super().__init__(default=default, disabled=disabled, help_text=help_text)
self.options = options