<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