MMOframework
Pourquoi l'IA Playground Bibliothèques Documentation Rechercher Agence
FR EN
Index

mmo-editor

1 symbole · générée le 27 Oct 2026

element

mmo-editor

mmo-editor.jhs:1

A rich text (WYSIWYG) editor.

<mmo-editor tools readonly placeholder upload-url upload-token></mmo-editor>
Étend
CustomShadowElement
By default it is a form field: its content is the text to edit, and it gets a toolbar on top of it. With `inline`, it edits the page in place: every descendant marked `[mmo-editor]` becomes editable on a double click, with a toolbar floating above it. `[mmo-editor="inline"]` is a single line that only takes text formatting (a title, a caption). The text stays in the page (the light dom): the page's own styles apply to it, so what is edited looks like what is shown. The html it produces is plain and clean (`MMO.editor.sanitize`): no style but alignments and the theme's colours, no class, no script. Events: `input` on every change, `change` when the field loses the focus changed (or, `inline`, when a region stops being edited: `event.detail` is `{region, value}`), `edit` when an `inline` region starts being edited.

Index

toolsthe toolbar: tool names separated by ,, groups by | (MMO.editor.DEFAULT_TOOLS, MMO.editor.Tool.Register)
readonlyshows the text without letting it be changed
placeholderwhat an empty field shows
upload-urlwhere images are sent (POST, multipart, field file); the answer is json with a url (or data.url).
upload-tokenthe CSRF token sent with an upload, in the X-CSRF-Token header (mmo.edms: FileController::Token())
namethe name of the field in its form
inlineedit the [mmo-editor] descendants in place instead of being a field
formAssociated static readonly accessorThe element is a form field: its value is sent with its form, under its name.
tools accessorThe 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 accessorThe 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) asyncSend 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
.inlinethe inline attribute

Attributs7

tools

mmo-editor.jhs

the toolbar: tool names separated by ,, groups by | (MMO.editor.DEFAULT_TOOLS, MMO.editor.Tool.Register)

tools

readonly

mmo-editor.jhs

shows the text without letting it be changed

readonly

upload-url

mmo-editor.jhs

where 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.jhs

the CSRF token sent with an upload, in the X-CSRF-Token header (mmo.edms: FileController::Token())

upload-token

inline

mmo-editor.jhs

edit the [mmo-editor] descendants in place instead of being a field

inline

Propriétés10

formAssociated

staticreadonlyaccessormmo-editor.jhs:45

The element is a form field: its value is sent with its form, under its name.

static get formAssociated()
Type
boolean

tools

accessormmo-editor.jhs:192

The toolbar, as the tools attribute writes it

get tools() set tools(value)
Type
string

value

accessormmo-editor.jhs:282

The html of the text, clean. With inline, the html of the region being edited (getRegionValue).

get value() set value(value)
Type
string

Méthodes54

setupRegions()

mmo-editor.jhs:131

[internal] Find the regions, or make the field's one out of the content

setupRegions()

connectDocument()

mmo-editor.jhs:177

[internal] Listen to what happens outside of the element

connectDocument()

getRegionValue(region)

mmo-editor.jhs:310
getRegionValue(region)
regionHTMLElement
retournestringthe clean html of a region, '' when it is empty

setRegionHTML(region, html)

mmo-editor.jhs:319

[internal] Replace the html of a region, cleaned

setRegionHTML(region, html)
regionHTMLElement
htmlstring

isEmpty(region)

mmo-editor.jhs:333
isEmpty(region)
regionHTMLElement
retournebooleantrue when the region shows nothing

updateEmpty(region)

mmo-editor.jhs:341

[internal] Show the placeholder when the text is empty

updateEmpty(region = this.region)
region = this.region?HTMLElement

syncFormValue()

mmo-editor.jhs:348

[internal] Give the form the current value

syncFormValue()

regionOf(node)

mmo-editor.jhs:366
regionOf(node)
node?Node
retourne?HTMLElementthe region of this editor holding the node

edit(region, range)

mmo-editor.jhs:377

Start editing a region

edit(region, range = null)
regionHTMLElement
range = null?Rangewhere the caret goes; by default, where the region was last edited

stopEdit()

mmo-editor.jhs:400

Stop editing the current region (inline only: a field is always being edited).

stopEdit()Sends `change` when its html changed.

getRange()

mmo-editor.jhs:423

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).

getRange()
retourne?Range

restoreSelection()

mmo-editor.jhs:433

Give the focus back to the text, with the selection it had.

restoreSelection()

command(name, value)

mmo-editor.jhs:449

Run a browser editing command on the selection

command(name, value = null)
namestringdocument.execCommand
value = null?string
retournebooleanfalse when the browser refused it

exec(tool, args)

mmo-editor.jhs:461

Apply a tool on the selection, as one undo step.

exec(tool, ...args)
toolMMO.editor.Tool | stringthe tool or its name
...args...*MMO.editor.Tool#apply
retournebooleanfalse when the tool cannot be applied here

insertHTML(html)

mmo-editor.jhs:485

Insert html where the caret is, cleaned. The selection is replaced.

insertHTML(html)
htmlstring

insertNodes(nodes)

mmo-editor.jhs:499

Insert nodes where the caret is, as they are: nothing cleans them (insertHTML for html from elsewhere).

insertNodes(nodes)
nodesNodea 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.

cleanStyles()

changed()

mmo-editor.jhs:540

[internal] Tell the page and the form the text changed

changed()

toggleSource(show)

mmo-editor.jhs:566

Show the html source of the text, or go back to the text

toggleSource(show = null)
show = null?booleannull to toggle

fitSource()

mmo-editor.jhs:596

[internal] The source view grows with the html rather than scrolling inside the element

fitSource()

formatHTML(html)

mmo-editor.jhs:606

[internal] One block per line, so the source reads

formatHTML(html)
htmlstring
retournestring

selectImage(image)

mmo-editor.jhs:616

Show an image of the text as selected: the image tool then changes it, Delete removes it.

selectImage(image)
image?HTMLImageElementnull to unselect

insertFiles(files)

mmo-editor.jhs:628

Insert image files where the caret is: sent to upload-url when there is one, embedded otherwise.

insertFiles(files)
filesFileList | Array<File>what is not an image is ignored

sendFile(file, retry)

asyncmmo-editor.jhs:655

Send a file to upload-url, with upload-token and uploadHeaders.

async sendFile(file, retry = true)An `upload-url` of mmo.edms' api (`edms/files.json`, under `MMO.edms.config.url`) needs no `upload-token`: the page's own is sent, and asked for again once when the session changed since the page was made.
fileFile
retry = trueboolean- false: a refused token is not asked for again
retournePromise<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

edmsApi()

uploadFile(file)

mmo-editor.jhs:695

[internal] Show the image right away, from the file, and swap its address for the uploaded one

uploadFile(file)
fileFile

onTab(event)

mmo-editor.jhs:781

[internal] Tab nests a list item, or goes to the next cell of a table

onTab(event)
eventKeyboardEvent

applyMarkdown()

mmo-editor.jhs:844

[internal] What is typed at the start of a paragraph: # makes a heading, - a list, > a quote ...

applyMarkdown()

onSelectionChange()

mmo-editor.jhs:986

[internal] Keep the selection the text had, and show its state in the toolbar

onSelectionChange()

onDocumentMouseDown(event)

mmo-editor.jhs:999

[internal] A click outside of an open panel closes it

onDocumentMouseDown(event)
eventMouseEvent

buildToolbar(spec)

mmo-editor.jhs:1019

[internal] Build the toolbar

buildToolbar(spec)
specstringtools

updateToolbar()

mmo-editor.jhs:1046

Show the state of the selection in the toolbar. Several calls in a row update it once.

updateToolbar()

placeToolbar()

mmo-editor.jhs:1065

[internal] Put the floating toolbar above the region being edited, or under it when there is no room

placeToolbar()

closePopover(refocus)

mmo-editor.jhs:1105

Close the open panel

closePopover(refocus = false)
refocus = falsebooleantrue to give the focus back to the text

Slots1

Points d'accroche CSS1