DEV Community

artydev
artydev

Posted on

Jodit Mithril

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.4.11/jodit.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.4.11/jodit.min.js"></script>

<textarea id="editor"></textarea>
<script>

/* eslint-disable no-undef */
const apiusers = "https://randomuser.me/api/";

const genId = (
  function* genId() {
    let count = 0;
    while (true) {
      count += 1;
      yield count;
    }
  })();

async function getPhoto() {
  let users = await m.request(apiusers);
  return users.results[0].picture.medium;
}

let photoButton =  {
    text: "Photo",
    exec: async function (editor) {
      const id = genId.next().value;
      editor.s.insertHTML(`<img id=${id} />`);
      m.render(document.getElementById(id), m("span", "searching...."));
      let photo = await getPhoto();
      document.getElementById(id).setAttribute("src",  photo );
    }
}

// eslint-disable-next-line no-unused-vars
let editor = new Jodit("#editor", {
  buttons: [photoButton],
  buttonsMD: [photoButton],  
  buttonsSM: [photoButton],
  buttonsXS: [photoButton],
  enter: "div",
  language: "fr",
});

You can test here : FetchUsers

Oldest comments (0)