Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide a ability that can customize some toolbar-button, and provide… #613

Open
wants to merge 4 commits into
base: development
Choose a base branch
from

Conversation

daihere1993
Copy link

Provide a ability that can customize some toolbar-button(I read documentation, just support customize the entire toolbar, that not enough), and provide a hook 'whenEleCreate' for every toolbar-button.

@daihere1993
Copy link
Author

I can initialize SimpleMDE like that(I want realize image upload when i click image button):

this.smde = new SimpleMDE({
  initialValue: this.content,
  element: element,
  spellChecker: false,
  toolbar: {
    image: {
      action: null,
      className: 'md-upload-img fa fa-picture-o',
      whenEleCreate: function (el) {
        let self = this
        // add custom class
        el.classList.add('md-upload-img')
        // append input element
        let inputEle = document.createElement('input')
        inputEle.setAttribute('type', 'file')
        inputEle.setAttribute('multiple', true)
        inputEle.setAttribute('accept', 'image/*')
        el.appendChild(inputEle)

        inputEle.onchange = (evt) => {
          let imgs = evt.currentTarget.files
          if (imgs.length) {
            let xhr = new window.XMLHttpRequest()
            let formData = new window.FormData()
            for (let i = 0; i < imgs.length; i++) {
              formData.append('upload_img_' + i, imgs[i])
            }
            xhr.open('POST', 'http://localhost:3000/upload', true)
            xhr.onload = (event) => {
              if (xhr.status === 200) {
                let cm = self.codemirror
                let stat = self.getState()
                let options = self.options
                let res = JSON.parse(event.target.response)
                let urls = res.urls

                urls.forEach((url) => {
                  self.replaceSelection(cm, stat.iamge, options.insertTexts.image, url)
                })
              } else {
                console.log('fail')
              }
            }
            xhr.send(formData)
          }
        }

        return el
      }
    }
  }
})

@daihere1993
Copy link
Author

Like that:
2017-07-19 19_24_14

@msangel
Copy link

msangel commented Apr 19, 2018

I want this! (sorry for non-constructive comment)

@elixirgraphics
Copy link

This needs to be a built-in option for SME. Any chance we'll see this incorporated into SME soon?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

3 participants