Passed in when instantiating the engine
//Instantiate the engineconst engine = new Engine(render node, {... configuration items,});
string
zh-CN
zh-CN
, en-US
. Can use locale
configurationconst engine = new Engine(render node, {lang:'zh-CN',});
object
zh-CN
Language pack, default language pack https://github.com/big-camel/am-editor/blob/master/locale
const engine = new Engine(render node, {locale: {'zh-CN': {test:'Test',a: {b: "B"}},}});console.log(engine.language.get<string>('test'));
string
null
number
null
Node
Array<Plugin>
[]
Plugin
Array<Card>
[]
Card
abstract class{ [key: string]: PluginOptions }
or (editor) => { [key: string]: PluginOptions }
{}
Some plugins require the configuration of additional properties:
// upload picture[ImageUploader.pluginName]: {file: {action: `${DOMAIN}/upload/image`,headers: {Authorization: 213434 },},remote: {action: `${DOMAIN}/upload/image`,},isRemote: (src: string) => src.indexOf(DOMAIN) <0,},// File Upload[FileUploader.pluginName]: {action: `${DOMAIN}/upload/file`,},// video upload[VideoUploader.pluginName]: {action: `${DOMAIN}/upload/video`,},// Mathematical formula generation address, the project is at: https://drawing.aomao.com[Math.pluginName]: {action: `https://g.aomao.com/latex`,parse: (res: any) => {if (res.success) return {result: true, data: res.svg };return {result: false };},},// Submit plugin configuration[Mention.pluginName]: {action: `${DOMAIN}/user/search`,onLoading: (root: NodeInterface) => {// Vue can be rendered using createAppreturn ReactDOM.render(<Loading />, root.get<HTMLElement>()!);},onEmpty: (root: NodeInterface) => {// Vue can be rendered using createAppreturn ReactDOM.render(<Empty />, root.get<HTMLElement>()!);},onClick: (root: NodeInterface,{key, name }: {key: string; name: string },) => {console.log('mention click:', key,'-', name);},onMouseEnter: (layout: NodeInterface,{name }: {key: string; name: string },) => {// Vue can be rendered using createAppReactDOM.render(<div style={{ padding: 5 }}><p>This is name: {name}</p><p>Configure the onMouseEnter method of the mention plugin</p><p>Use ReactDOM.render to customize rendering here</p><p>Use ReactDOM.render to customize rendering here</p></div>,layout.get<HTMLElement>()!,);},},// Font size configuration[Fontsize.pluginName]: {//Configure the font size to be filtered after pastingfilter: (fontSize: string) => {return (['12px','13px','14px','15px','16px','19px','22px','24px','29px','32px','40px','48px',].indexOf(fontSize)> -1);},},// Font configuration[Fontfamily.pluginName]: {//Configure the font to be filtered after pastingfilter: (fontfamily: string) => {const item = fontFamilyDefaultData.find((item) =>fontfamily.split(',').some((name) =>item.value.toLowerCase().indexOf(name.replace(/"/,'').toLowerCase())>-1,),);return item? item.value: false;},},// Row height configuration[LineHeight.pluginName]: {//Configure the row height to be filtered after pastingfilter: (lineHeight: string) => {if (lineHeight === '14px') return '1';if (lineHeight === '16px') return '1.15';if (lineHeight === '21px') return '1.5';if (lineHeight === '28px') return '2';if (lineHeight === '35px') return '2.5';if (lineHeight === '42px') return '3';// Remove if the conditions are not metreturn (['1', '1.15', '1.5', '2', '2.5', '3'].indexOf(lineHeight)> -1);},},
string
None
boolean
false
The difference with View
rendering is that you can still see the editor's edits after readonly
is set to read-only status.
After rendering, View
loses all editing capabilities and collaboration capabilities, View
can render a card
plugin with interactive effects
engine.getHtml()
can only get static html
and cannot restore the interaction effect of card
component, but it is very friendly to search engines
Node | (() => Node | null)
overflow
or overflow-y
is auto
or scroll
, if not, take document.documentElement
scroll
event to set the floating position of the bomb layer and actively set the scroll to the editor target positionboolena
true
Record<'url' | 'format', string>[] | string | false
url('//at.alicdn.com/t/font_1456030_lnqmc6a6ca.woff2?t=1638071536645') format('woff2'), url('//at.alicdn.com/t/font_1456030_lnqmc6a6ca.woff ?t=1638071536645') format('woff'), url('//at.alicdn.com/t/font_1456030_lnqmc6a6ca.ttf?t=1638071536645') format('truetype')
const engine = new Engine(container, {iconFonts: [{url: '//at.alicdn.com/t/font_1456030_lnqmc6a6ca.woff2?t=1638071536645',format: 'woff2',// ...},],// oriconFonts:"url('//at.alicdn.com/t/font_1456030_lnqmc6a6ca.woff2?t=1638071536645') format('woff2'), url('//at.alicdn.com/t/font_1456030_lnqmc6a6ca.woff?t=1638071536645') format('woff'), url('//at.alicdn.com/t/font_1456030_lnqmc6a6ca.ttf?t=1638071536645') format('truetype')",});
boolean
true
boolean
true
type:
markdown?: {/*** In markdown mode, by default, if the check function returns true, it will be converted directly* 1. Use confirm mode, call engine.messageConfirm to confirm and convert again* 2. false to turn off all markdown functions*/mode?: 'confirm' | false;/*** Detect whether it is markdown syntax, if true, convert the makrdown and paste it, if the default detection does not meet the requirements, you can use this function for custom detection*/check?: (text: string, html: string) => Promise<string | false>;};
undefined
confirm
mode, you need to call engine.messageConfirm
to confirm and then convert.