How to use the mobiledoc-kit.Editor function in mobiledoc-kit

To help you get started, we’ve selected a few mobiledoc-kit examples, based on popular ways it is used in public projects.

github alidcastano / vue-mobiledoc-editor / src / MobiledocEditor.vue View on Github external
_initEditorWithEventEmitters () {
      this.$emit('willCreateEditor')

      this.editor = new Mobiledoc.Editor(this.editorOptions)

      if (this.enableEditing === false) this.toggleEditMode()

      this.$emit('didCreateEditor', this.editor)

      this.editor.inputModeDidChange(() => {
        this._updateActiveMarkupTags()
        this._updateActiveSectionTags()
      })

      this.editor.postDidChange(() => {
        // serialize the editor's post to the mobiledoc version format
        // any cards or atoms present in doc, will be ommited
        const mobiledoc = this.editor.serialize(this.serializeVersion)
        this.$emit('postWasUpdated', mobiledoc)
      })
github knownasilya / ember-template-input / addon / components / template-input-field / component.js View on Github external
// Parse pasted/initial templates and convert to tag atoms
    // see https://github.com/bustlelabs/mobiledoc-kit#dom-parsing-hooks
    let pastedTextPlugin = function(node, builder, { addMarkerable, nodeFinished }) {
      if (node.nodeType === Node.TEXT_NODE) {
        let text = node.textContent;
        let markerables = createMarkerables(text, builder);
       
        markerables.forEach((markerable) => {
          addMarkerable(markerable);
        });

        nodeFinished();
      }
    };
    
    let editor = new Mobiledoc.Editor({
      html: template,
      autofocus: false,
      parserPlugins: [pastedTextPlugin],
      atoms: [
        // tag atom implementation for the editor
        {
        	name: 'tag',
          type: 'dom',
          render: ({ value, env, payload }) => {
            // Remove select when tag erased
            // TODO: Only remove select if open for current tag, might not be able to get into this state any way
            env.onTeardown(() => {
            	closeAllDropdowns(true);
            });
            let container = document.createElement('span');
            let inner = document.createElement('span');
github TryGhost / Ghost-Admin / lib / gh-koenig / addon / components / gh-koenig.js View on Github external
mobiledoc,
            // temp
            cards: createCard(editorCards.concat(userCards)),
            atoms: [{
                name: 'soft-return',
                type: 'dom',
                render() {
                    return document.createElement('br');
                }
            }],
            spellcheck: true,
            autofocus: this.get('shouldFocusEditor'),
            placeholder: 'Click here to start ...'
        };

        this.editor = new Mobiledoc.Editor(options);
    },
github joshfrench / react-mobiledoc-editor / src / components / Container.js View on Github external
componentWillMount() {
    if (typeof this.props.willCreateEditor === 'function') {
      this.props.willCreateEditor();
    }

    const { atoms, autofocus, cardProps, cards, html, placeholder, serializeVersion, spellcheck } = this.props;
    const mobiledoc = this.props.mobiledoc || (html ? undefined : EMPTY_MOBILEDOC);

    const editorOptions = { ...this.props.options, atoms, autofocus, cardOptions: { cardProps }, cards, html, mobiledoc, placeholder, serializeVersion, spellcheck };
    this.editor = new Mobiledoc.Editor(editorOptions);

    this.editor.inputModeDidChange(this.setActiveTags);

    if (typeof this.props.onChange === 'function') {
      this.editor.postDidChange(() => {
        const mobiledoc = this.editor.serialize(this.props.serializeVersion);
        this.props.onChange(mobiledoc);
      });
    }

    if (typeof this.props.didCreateEditor === 'function') {
      this.props.didCreateEditor(this.editor);
    }
  }