All simditor options and method support Usage Doc
Event support with 'on' prefix like 'onValuechanged' == 'valuechanged'
ApplicationController.js
import Controller from '@ember/controller';
import { action, get } from '@ember/object';
export default class ApplicationController extends Controller {
constructor() {
super(...arguments);
this.editor = null;
}
@action
setValue() {
this.editor.setValue('<h1>hello simditor</h1>');
}
@action
getValue() {
window.alert(this.editor.getValue());
}
@action
sync() {
window.alert(this.editor.sync());
}
@action
focus() {
this.editor.focus();
}
@action
blur() {
this.editor.blur();
}
@action
hidePopover() {
this.editor.hidePopover();
}
@action
valuechanged(e, editor) {
console.log('valuechanged event: ' + editor.getValue());
}
toolbar = [
'title',
'bold',
'italic',
'underline',
'strikethrough',
'fontScale',
'color',
'ol', // ordered list
'ul', // unordered list
'blockquote',
'code', // code block
'table',
'link',
'image',
'hr', // horizontal ruler
'indent',
'outdent',
'alignment',
];
}
application.hbs
<SimditorEditor @value={{get this.model 'one'}} @update={{fn (mut this.model.one.content)}} @editor={{fn (mut this.editor)}} @toolbar={{this.toolbar}} @onValuechanged={{this.valuechanged}} ></SimditorEditor>
Model object must have one property called content for SimditorEditor component torender.
locale only support en-US(English) and zh-CN(Chinese)
<SimditorEditor @value={{get this.model 'two'}} @locale='zh-CN' @toolbar={{this.toolbar}}></SimditorEditor>
<SimditorEditor @value={{get model 'three'}} @name='html' @update={{fn (mut model.three.html}} ></SimditorEditor>