mmo-editor
1 symbole · générée le 27 Oct 2026
mmo-editor
mmo-editor.jhs:1A rich text (WYSIWYG) editor.
- Étend
CustomShadowElement
Index
| tools | the toolbar: tool names separated by ,, groups by | (MMO.editor.DEFAULT_TOOLS, MMO.editor.Tool.Register) | |
| readonly | shows the text without letting it be changed | |
| placeholder | what an empty field shows | |
| upload-url | where images are sent (POST, multipart, field file); the answer is json with a url (or data.url). | |
| upload-token | the CSRF token sent with an upload, in the X-CSRF-Token header (mmo.edms: FileController::Token()) | |
| name | the name of the field in its form | |
| inline | edit the [mmo-editor] descendants in place instead of being a field | |
| formAssociated static readonly accessor | The element is a form field: its value is sent with its form, under its name. | |
| tools accessor | The toolbar, as the tools attribute writes it | |
| readonly accessor | ||
| placeholder accessor | ||
| uploadUrl accessor | ||
| uploadToken accessor | ||
| inline readonly accessor | ||
| isInlineRegion readonly accessor | ||
| history readonly accessor | ||
| value accessor | The html of the text, clean. | |
| constructor() | ||
| init() | ||
| setupRegions() | [internal] Find the regions, or make the field's one out of the content | |
| connectedCallback() | ||
| disconnectedCallback() | ||
| connectDocument() | [internal] Listen to what happens outside of the element | |
| getRegionValue(region) | ||
| setRegionHTML(region, html) | [internal] Replace the html of a region, cleaned | |
| isEmpty(region) | ||
| updateEmpty(region) | [internal] Show the placeholder when the text is empty | |
| syncFormValue() | [internal] Give the form the current value | |
| formResetCallback() | ||
| formDisabledCallback(disabled) | ||
| regionOf(node) | ||
| edit(region, range) | Start editing a region | |
| stopEdit() | Stop editing the current region (inline only: a field is always being edited). | |
| getRange() | The selection in the region being edited: the live one when it is in the text, else the one it had when the focus left it (for a panel's input). | |
| restoreSelection() | Give the focus back to the text, with the selection it had. | |
| command(name, value) | Run a browser editing command on the selection | |
| exec(tool, args) | Apply a tool on the selection, as one undo step. | |
| insertHTML(html) | Insert html where the caret is, cleaned. | |
| insertNodes(nodes) | Insert nodes where the caret is, as they are: nothing cleans them (insertHTML for html from elsewhere). | |
| cleanStyles() | [internal] A browser keeps the look of what it inserts with inline styles: they go, the theme decides. | |
| changed() | [internal] Tell the page and the form the text changed | |
| undo() | Undo the last change of the region being edited | |
| redo() | Redo the last change undone | |
| toggleSource(show) | Show the html source of the text, or go back to the text | |
| fitSource() | [internal] The source view grows with the html rather than scrolling inside the element | |
| formatHTML(html) | [internal] One block per line, so the source reads | |
| selectImage(image) | Show an image of the text as selected: the image tool then changes it, Delete removes it. | |
| insertFiles(files) | Insert image files where the caret is: sent to upload-url when there is one, embedded otherwise. | |
| sendFile(file, retry) async | Send a file to upload-url, with upload-token and uploadHeaders. | |
| edmsApi() | [internal] @return {?MMO.edms.Api} mmo.edms' api, when upload-url is one of its routes and the page has it | |
| uploadFile(file) | [internal] Show the image right away, from the file, and swap its address for the uploaded one | |
| onKeyDown(event) | ||
| onTab(event) | [internal] Tab nests a list item, or goes to the next cell of a table | |
| onBeforeInput(event) | ||
| onInput(event) | ||
| applyMarkdown() | [internal] What is typed at the start of a paragraph: # makes a heading, - a list, > a quote ... | |
| onPaste(event) | ||
| onDragOver(event) | ||
| onDrop(event) | ||
| onMouseDown(event) | ||
| onFocusIn(event) | ||
| onFocusOut(event) | ||
| onSelectionChange() | [internal] Keep the selection the text had, and show its state in the toolbar | |
| onDocumentMouseDown(event) | [internal] A click outside of an open panel closes it | |
| onViewportChange() | [internal] | |
| buildToolbar(spec) | [internal] Build the toolbar | |
| updateToolbar() | Show the state of the selection in the toolbar. | |
| placeToolbar() | [internal] Put the floating toolbar above the region being edited, or under it when there is no room | |
| togglePopover(tool, button) | Open a tool's panel under its button, or close it when it is open | |
| closePopover(refocus) | Close the open panel | |
| placePopover() | [internal] Under its button, inside the window | |
| (default) | the text to edit | |
| .inline | the inline attribute |
Attributs7
tools
mmo-editor.jhsthe toolbar: tool names separated by ,, groups by | (MMO.editor.DEFAULT_TOOLS, MMO.editor.Tool.Register)
tools
readonly
mmo-editor.jhsshows the text without letting it be changed
readonly
placeholder
mmo-editor.jhswhat an empty field shows
placeholder
upload-url
mmo-editor.jhswhere images are sent (POST, multipart, field file); the answer is json with a url (or data.url). Without it, images are embedded in the html. mmo.edms takes them as they are: upload-url="<?= FileController::DirectUploadUrl('"_TAGS/pages"') ?>", with its upload-token
upload-url
upload-token
mmo-editor.jhsthe CSRF token sent with an upload, in the X-CSRF-Token header (mmo.edms: FileController::Token())
upload-token
name
mmo-editor.jhsthe name of the field in its form
name
inline
mmo-editor.jhsedit the [mmo-editor] descendants in place instead of being a field
inline
Propriétés10
formAssociated
staticreadonlyaccessormmo-editor.jhs:45The element is a form field: its value is sent with its form, under its name.
- Type
boolean
tools
accessormmo-editor.jhs:192The toolbar, as the tools attribute writes it
- Type
string
readonly
accessormmo-editor.jhs:205- Type
boolean
placeholder
accessormmo-editor.jhs:224- Type
string
uploadUrl
accessormmo-editor.jhs:236- Type
string
uploadToken
accessormmo-editor.jhs:247- Type
string
inline
readonlyaccessormmo-editor.jhs:258- Type
boolean
isInlineRegion
readonlyaccessormmo-editor.jhs:265- Type
boolean
history
readonlyaccessormmo-editor.jhs:272value
accessormmo-editor.jhs:282The html of the text, clean. With inline, the html of the region being edited (getRegionValue).
- Type
string
Méthodes54
constructor()
mmo-editor.jhs:49init()
mmo-editor.jhs:82setupRegions()
mmo-editor.jhs:131[internal] Find the regions, or make the field's one out of the content
connectedCallback()
mmo-editor.jhs:160disconnectedCallback()
mmo-editor.jhs:166connectDocument()
mmo-editor.jhs:177[internal] Listen to what happens outside of the element
getRegionValue(region)
mmo-editor.jhs:310| region | HTMLElement | |
| retourne | string | the clean html of a region, '' when it is empty |
setRegionHTML(region, html)
mmo-editor.jhs:319[internal] Replace the html of a region, cleaned
| region | HTMLElement | |
| html | string |
isEmpty(region)
mmo-editor.jhs:333| region | HTMLElement | |
| retourne | boolean | true when the region shows nothing |
updateEmpty(region)
mmo-editor.jhs:341[internal] Show the placeholder when the text is empty
| region = this.region | ?HTMLElement |
syncFormValue()
mmo-editor.jhs:348[internal] Give the form the current value
formResetCallback()
mmo-editor.jhs:352formDisabledCallback(disabled)
mmo-editor.jhs:356| disabled |
regionOf(node)
mmo-editor.jhs:366| node | ?Node | |
| retourne | ?HTMLElement | the region of this editor holding the node |
edit(region, range)
mmo-editor.jhs:377Start editing a region
| region | HTMLElement | |
| range = null | ?Range | where the caret goes; by default, where the region was last edited |
stopEdit()
mmo-editor.jhs:400Stop editing the current region (inline only: a field is always being edited).
getRange()
mmo-editor.jhs:423The selection in the region being edited: the live one when it is in the text, else the one it had when the focus left it (for a panel's input).
| retourne | ?Range |
restoreSelection()
mmo-editor.jhs:433Give the focus back to the text, with the selection it had.
command(name, value)
mmo-editor.jhs:449Run a browser editing command on the selection
| name | string | document.execCommand |
| value = null | ?string | |
| retourne | boolean | false when the browser refused it |
exec(tool, args)
mmo-editor.jhs:461Apply a tool on the selection, as one undo step.
| tool | MMO.editor.Tool | string | the tool or its name |
| ...args | ...* | MMO.editor.Tool#apply |
| retourne | boolean | false when the tool cannot be applied here |
insertHTML(html)
mmo-editor.jhs:485Insert html where the caret is, cleaned. The selection is replaced.
| html | string |
insertNodes(nodes)
mmo-editor.jhs:499Insert nodes where the caret is, as they are: nothing cleans them (insertHTML for html from elsewhere).
| nodes | Node | a node, or a DocumentFragment |
cleanStyles()
mmo-editor.jhs:525[internal] A browser keeps the look of what it inserts with inline styles: they go, the theme decides.
changed()
mmo-editor.jhs:540[internal] Tell the page and the form the text changed
undo()
mmo-editor.jhs:549Undo the last change of the region being edited
redo()
mmo-editor.jhs:557Redo the last change undone
toggleSource(show)
mmo-editor.jhs:566Show the html source of the text, or go back to the text
| show = null | ?boolean | null to toggle |
fitSource()
mmo-editor.jhs:596[internal] The source view grows with the html rather than scrolling inside the element
formatHTML(html)
mmo-editor.jhs:606[internal] One block per line, so the source reads
| html | string | |
| retourne | string |
selectImage(image)
mmo-editor.jhs:616Show an image of the text as selected: the image tool then changes it, Delete removes it.
| image | ?HTMLImageElement | null to unselect |
insertFiles(files)
mmo-editor.jhs:628Insert image files where the caret is: sent to upload-url when there is one, embedded otherwise.
| files | FileList | Array<File> | what is not an image is ignored |
sendFile(file, retry)
asyncmmo-editor.jhs:655Send a file to upload-url, with upload-token and uploadHeaders.
| file | File | |
| retry = true | boolean | - false: a refused token is not asked for again |
| retourne | Promise<string> | the address the answer gives it |
edmsApi()
mmo-editor.jhs:682[internal] @return {?MMO.edms.Api} mmo.edms' api, when upload-url is one of its routes and the page has it
uploadFile(file)
mmo-editor.jhs:695[internal] Show the image right away, from the file, and swap its address for the uploaded one
| file | File |
onKeyDown(event)
mmo-editor.jhs:729| event | KeyboardEvent |
onTab(event)
mmo-editor.jhs:781[internal] Tab nests a list item, or goes to the next cell of a table
| event | KeyboardEvent |
onBeforeInput(event)
mmo-editor.jhs:809| event | InputEvent |
onInput(event)
mmo-editor.jhs:819| event | InputEvent |
applyMarkdown()
mmo-editor.jhs:844[internal] What is typed at the start of a paragraph: # makes a heading, - a list, > a quote ...
onPaste(event)
mmo-editor.jhs:878| event | ClipboardEvent |
onDragOver(event)
mmo-editor.jhs:906| event | DragEvent |
onDrop(event)
mmo-editor.jhs:916| event | DragEvent |
onMouseDown(event)
mmo-editor.jhs:937| event | MouseEvent |
onFocusIn(event)
mmo-editor.jhs:958| event | FocusEvent |
onFocusOut(event)
mmo-editor.jhs:966| event | FocusEvent |
onSelectionChange()
mmo-editor.jhs:986[internal] Keep the selection the text had, and show its state in the toolbar
onDocumentMouseDown(event)
mmo-editor.jhs:999[internal] A click outside of an open panel closes it
| event | MouseEvent |
onViewportChange()
mmo-editor.jhs:1008[internal]
buildToolbar(spec)
mmo-editor.jhs:1019[internal] Build the toolbar
| spec | string | tools |
updateToolbar()
mmo-editor.jhs:1046Show the state of the selection in the toolbar. Several calls in a row update it once.
placeToolbar()
mmo-editor.jhs:1065[internal] Put the floating toolbar above the region being edited, or under it when there is no room
togglePopover(tool, button)
mmo-editor.jhs:1082Open a tool's panel under its button, or close it when it is open
| tool | MMO.editor.PopoverTool | |
| button | HTMLElement |
closePopover(refocus)
mmo-editor.jhs:1105Close the open panel
| refocus = false | boolean | true to give the focus back to the text |
placePopover()
mmo-editor.jhs:1118[internal] Under its button, inside the window
Slots1
(default)
mmo-editor.jhsthe text to edit
<slot>
Points d'accroche CSS1
.inline
mmo-editor.jhsthe inline attribute
.inline