...
| Code Block | ||
|---|---|---|
| ||
<template>
<Editor v-model="content" aria-label="My editor" />
</template>
<script>
import Editor from 'tui/components/editor/Editor';
import { EditorContent, Format } from 'tui/editor';
export default {
components: { Editor },
data() {
return {
content: new EditorContent({
// Optional: pass `format` to lock in a format. Weka is the only editor supporting JSON_EDITOR, so it will be used.
// If format is left out, <Editor> will pick the most preferred editor that has Tui support. Currently this is just Weka and the plain text fallback editor.
format: Format.JSON_EDITOR,
// optional: pass fileItemId to enable file uploads
fileItemId: this.draftId,
}),
// If you have existing content, you can pass it in like this:
content: new EditorContent({
content: this.description,
format: this.descriptionFormat, // format must always be passed when providing content
fileItemId: this.draftId,
}),
};
},
};
</script> |
...
EditorContent is an opaque wrapper for the editor content. It has .format and .fileItemId properties, and the content can be retrieved by calling .getContent(). This has a small performance cost so you should not do it on every change - instead, convert when the value is needed, e.g. to submit to the server.
You should always pass either aria-label or aria-labelledby. If using the editor inside a FormRow, you can get the labelId to pass to aria-labelledby from the slot.
You can also use Weka directly if needed:
| Code Block | ||
|---|---|---|
| ||
<template>
<Weka v-model="doc" :file-item-id="draftFile" aria-label="My editor" />
</template>
<script>
import Weka from 'editor_weka/components/Weka';
import WekaValue from 'editor_weka/WekaValue';
export default {
components: { Weka },
data() {
return {
doc: WekaValue.empty(),
// or from existing content:
doc: WekaValue.fromDoc(JSON.parse(this.description))
};
},
}
</script> |
...