Я использую tinymce 5.
Я использую диалог для добавления данных в текстовое поле, например:
Следующий код добавлен в мое текстовое поле:
<span data-function="addWord" data-options="[ word2, word3]"> <span style="background-color: yellow;">word1</span> </span>
Я хотел бы открыть диалоговое окно, нажав на помеченное желтое слово с конфигурации, которые я вставил заранее, например, следующие:
Найдите ниже моего минимального жизнеспособного примера:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
var wordConfig = {
title: 'Add word',
body: {
type: 'panel',
items: [
{
type: 'input',
name: 'wordData',
label: 'Enter words comma seperated'
}
]
},
buttons: [
{
type: 'cancel',
name: 'closeButton',
text: 'Cancel'
},
{
type: 'submit',
name: 'submitButton',
text: 'Submit',
primary: true
}
],
initialData: {
wordData: 'word1, word2, word3',
},
onSubmit: function (api) {
var data = api.getData();
var dataArr = data.wordData.split(',');
var restArr = dataArr.slice(1);
// var stringData = dataArr.join('\",\"')
tinymce.activeEditor.execCommand('mceInsertContent', false, '<span data-function="addWord" data-options="[' + restArr.join(',') + ']"> <span style="background-color: yellow;">' + dataArr[0] + '</span> </span>');
api.close();
}
};
tinymce.init({
selector: '#mytextarea',
plugins: "code",
toolbar: ['dialog-example-btn', 'code'],
setup: function (editor) {
editor.ui.registry.addButton('dialog-example-btn', {
text: 'Add word',
onAction: function () {
editor.windowManager.open(wordConfig)
}
})
}
});
</script>
</head>
<body>
<form method="post">
<textarea id="mytextarea">Hello, World!</textarea>
</form>
</body>
</html>
Любой предложения, как это сделать?
Я ценю ваши ответы!