How to use froala-editor - 9 common examples

createEditor: function() {

        if (this.editorInitialized) {
          return;
        }

        this.currentConfig = this.config || this.defaultConfig;

        this.setContent(true);

        // Bind editor events.
        this.registerEvents();
        this.initListeners();

        this._editor = new FroalaEditor(this.$el, this.currentConfig)

        this.editorInitialized = true;

      },

this.element = this.el;

    if (this.props.model) {
      this.element.innerHTML = this.props.model;
    }

    this.setContent(true);

    // Default initialized.
    this.registerEvent('initialized', this.config.events && this.config.events.initialized);

    // Check if events are set.
    if (!this.config.events) this.config.events = {};
    this.config.events.initialized = () => this.initListeners();

    this.editor = new FroalaEditor(this.element, this.config);
    // Call init events.
    if (this._initEvents) {
      for (let i = 0; i < this._initEvents.length; i++) {
        this._initEvents[i].call(this.editor);
      }
    }
  }

if (!this._opts.events) this._opts.events = {}

      // Register initialized event.
      this.registerEvent('initialized', this._opts.events && this._opts.events.initialized);
      const existingInitCallback = this._opts.events.initialized;
      // Default initialized event.
      if (!this._opts.events.initialized || !this._opts.events.initialized.overridden) {
        this._opts.events.initialized = () => {
          this.initListeners();
          existingInitCallback && existingInitCallback.call(this._editor, this);
        };
        this._opts.events.initialized.overridden = true;
      }

      // Initialize the Froala Editor.
      this._editor = new FroalaEditor(
        this._element,
        this._opts
      );
    });
  }

// Set events.
		if (this.eventHandlers && this.eventHandlers.length != 0) {
			for(let eventHandlerName in this.eventHandlers) {
				let handler = this.eventHandlers[eventHandlerName];
				this.instance.addEventListener(`${eventHandlerName}`, function() {
					let p = arguments;
					return handler.apply(this, p)
				});

			}
		}
		this.instance.addEventListener('contentChanged', (e, editor) => this.value = editor.html.get());
		this.instance.addEventListener('blur', (e, editor) => this.value = editor.html.get())

    // Initialize editor.
		this.instance = new FroalaEditor(this.element, Object.assign({}, this.config));
	}

@action createEditor(element, [options]) {
    new FroalaEditor(element, options);
  }

this.instance.innerHTML = this.value;

		if (this.eventHandlers && this.eventHandlers.length != 0) {
			for (let eventHandlerName in this.eventHandlers) {
				let handler = this.eventHandlers[eventHandlerName];
				this.instance.addEventListener(`${eventHandlerName}`, function () {
					let p = arguments;
					return handler.apply(this, p);
				});
			}
		}
		this.instance.addEventListener('contentChanged', (e, editor) => this.value = editor.html.get());
		this.instance.addEventListener('blur', (e, editor) => this.value = editor.html.get());

		this.instance = new FroalaEditor(this.element, Object.assign({}, this.config));
	}

get argumentOptions() {
    let options = {};
    for (let argumentName in this.args) {
      if (FroalaEditor.DEFAULTS.hasOwnProperty(argumentName)) {
        options[argumentName] = this.args[argumentName];
      }
    }
    return options;
  }

ngOnInit () {
    FroalaEditor.DefineIcon('alert', { SVG_KEY: 'help' });
    FroalaEditor.RegisterCommand('alert', {
      title: 'Hello',
      focus: false,
      undo: false,
      refreshAfterCallback: false,

      callback: function () {
        alert('Hello!');
      }
    });
  }

ngOnInit () {
    FroalaEditor.DefineIcon('alert', { SVG_KEY: 'help' });
    FroalaEditor.RegisterCommand('alert', {
      title: 'Hello',
      focus: false,
      undo: false,
      refreshAfterCallback: false,

      callback: function () {
        alert('Hello!');
      }
    });
  }