ember-cli-simditor cli

Ember component wrapper for simditor editor.

Github Wecatch

How to use

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.

Editor methods


Editor

hello simditor

Html content

<h1>hello simditor</h1>

Locale

locale only support en-US(English) and zh-CN(Chinese)

          
      
<SimditorEditor @value={{get this.model 'two'}} @locale='zh-CN' @toolbar={{this.toolbar}}></SimditorEditor>

    
    

哈喽世界

Custome content property name

          
      
<SimditorEditor @value={{get model 'three'}} @name='html' @update={{fn (mut model.three.html}} ></SimditorEditor>

    
    

I am html content