How to use easymde - 10 common examples

}, 1)
          return 'Loading...'
        },
      }, this.configs)
      // 同步 value 和 initialValue 的值 \ Synchronize the values of value and initialValue
      if (configs.initialValue) {
        this.$emit('input', configs.initialValue)
      }
      // 判断是否开启代码高亮 \ Determine whether to enable code highlighting
      if (this.highlight) {
        configs.renderingConfig.codeSyntaxHighlighting = true
      }
      // 设置是否渲染输入的html \ Set whether to render the input html
      // marked.setOptions({ sanitize: this.sanitize })
      // 实例化编辑器 \ Instantiated editor
      this.easymde = new EasyMDE(configs)
      // 添加自定义 previewClass \ Add a custom previewClass
      const className = this.previewClass || ''
      this.addPreviewClass(className)
      // 绑定事件 \ Binding event
      this.bindingEvents()
    },
    bindingEvents() {

mounted() {
    this.editor = new EasyMDE({
      element: this.$refs.editor,
      initialValue: this.notes,
      forceSync: true,
      autoDownloadFontAwesome: false,
      renderingConfig: {
        codeSyntaxHighlighting: true
      },
      spellChecker: false,
      hideIcons: ['side-by-side', 'guide'],
      showIcons: ['code'],
      status: false,
      toolbar: [
        {
          name: 'bold',
          action: EasyMDE.toggleBold,
          className: 'fas fa-bold',

$("textarea.markdown").each(function(_i, e) {
    if (e.hasOwnProperty("mde") === false) {
      let mde = new EasyMDE({
        autoDownloadFontAwesome: false,
        toolbar: [
          "bold",
          "italic",
          "heading",
          "|",
          "quote",
          "unordered-list",
          "ordered-list",
          "|",
          "link",
          "image",
          "|",
          "preview",
          "guide"
        ],

componentDidMount () {
    this.easymde = new Easymde({
      element: this.element,
      forceSync: true,
      minHeight: this.props.height,
      toolbar: EasyMDE.getMdeToolbarItems(),
      autoDownloadFontAwesome: false,
      status: false,
      spellChecker: false
    })

    this.easymde.codemirror.on('change', () => {
      this.onTextareaChanged(this.easymde.value())
    })

    if (this.easymde && this.props.allowImageUpload) {
      if (!this.props.inlineImageUploadUrl) return Log.error('Invalid inlineImageUploadUrl Prop.')

{
          name: 'unordered-list',
          action: EasyMDE.toggleUnorderedList,
          className: 'fas fa-list-ul',
          title: 'Unordered List'
        },
        {
          name: 'ordered-list',
          action: EasyMDE.toggleOrderedList,
          className: 'fas fa-list-ol',
          title: 'Ordered List'
        },
        '|',
        {
          name: 'link',
          action: EasyMDE.drawLink,
          className: 'fas fa-link',
          title: 'Link'
        },
        {
          name: 'image',
          action: EasyMDE.drawImage,
          className: 'fas fa-image',
          title: 'Image'
        },
        '|',
        {
          name: 'preview',
          action: EasyMDE.togglePreview,
          className: 'fas fa-eye',
          title: 'Preview'
        },

{
        name: 'Generic List',
        action: Easymde.toggleUnorderedList,
        className: 'material-icons mi-list no-ajaxy',
        title: 'Generic List'
      },
      {
        name: 'Numbered List',
        action: Easymde.toggleOrderedList,
        className: 'material-icons mi-numlist no-ajaxy',
        title: 'Numbered List'
      },
      '|',
      {
        name: 'Create Link',
        action: Easymde.drawLink,
        className: 'material-icons mi-link no-ajaxy',
        title: 'Create Link'
      },
      '|',
      {
        name: 'Toggle Preview',
        action: Easymde.togglePreview,
        className: 'material-icons mi-preview no-disable no-mobile no-ajaxy',
        title: 'Toggle Preview'
      }
    ]
  }

{
        name: 'Title',
        action: Easymde.toggleHeadingSmaller,
        className: 'material-icons mi-title no-ajaxy',
        title: 'Title'
      },
      '|',
      {
        name: 'Code',
        action: Easymde.toggleCodeBlock,
        className: 'material-icons mi-code no-ajaxy',
        title: 'Code'
      },
      {
        name: 'Quote',
        action: Easymde.toggleBlockquote,
        className: 'material-icons mi-quote no-ajaxy',
        title: 'Quote'
      },
      {
        name: 'Generic List',
        action: Easymde.toggleUnorderedList,
        className: 'material-icons mi-list no-ajaxy',
        title: 'Generic List'
      },
      {
        name: 'Numbered List',
        action: Easymde.toggleOrderedList,
        className: 'material-icons mi-numlist no-ajaxy',
        title: 'Numbered List'
      },
      '|',

{
          name: 'heading',
          action: EasyMDE.toggleHeadingSmaller,
          className: 'fas fa-heading',
          title: 'Heading'
        },
        '|',
        {
          name: 'code',
          action: EasyMDE.toggleCodeBlock,
          className: 'fas fa-code',
          title: 'Code'
        },
        {
          name: 'quote',
          action: EasyMDE.toggleBlockquote,
          className: 'fas fa-quote-left',
          title: 'Quote'
        },
        {
          name: 'unordered-list',
          action: EasyMDE.toggleUnorderedList,
          className: 'fas fa-list-ul',
          title: 'Unordered List'
        },
        {
          name: 'ordered-list',
          action: EasyMDE.toggleOrderedList,
          className: 'fas fa-list-ol',
          title: 'Ordered List'
        },
        '|',

static getMdeToolbarItems () {
    return [
      {
        name: 'bold',
        action: Easymde.toggleBold,
        className: 'material-icons mi-bold no-ajaxy',
        title: 'Bold'
      },
      {
        name: 'italic',
        action: Easymde.toggleItalic,
        className: 'material-icons mi-italic no-ajaxy',
        title: 'Italic'
      },
      {
        name: 'Title',
        action: Easymde.toggleHeadingSmaller,
        className: 'material-icons mi-title no-ajaxy',
        title: 'Title'
      },
      '|',

this.editor = new EasyMDE({
      element: this.$refs.editor,
      initialValue: this.notes,
      forceSync: true,
      autoDownloadFontAwesome: false,
      renderingConfig: {
        codeSyntaxHighlighting: true
      },
      spellChecker: false,
      hideIcons: ['side-by-side', 'guide'],
      showIcons: ['code'],
      status: false,
      toolbar: [
        {
          name: 'bold',
          action: EasyMDE.toggleBold,
          className: 'fas fa-bold',
          title: 'Bold'
        },
        {
          name: 'italic',
          action: EasyMDE.toggleItalic,
          className: 'fas fa-italic',
          title: 'Italic'
        },
        {
          name: 'heading',
          action: EasyMDE.toggleHeadingSmaller,
          className: 'fas fa-heading',
          title: 'Heading'
        },
        '|',