Я использую редактор tinymce. Как я могу вставить ссылку на страницу из моей БД с автозаполнением..
Я наберу несколько букв, и редактор tinymce отфильтрует содержимое моей базы данных. Я выберу один, и он автоматически создаст ссылку.
https://jqueryui.com/autocomplete/
Автозаполнение Ajax и плагины tinymce. Я еще не нашел решения.
Нативной функции TinyMCE Автозаполнение должно быть достаточно.
Вы можете поместить любой HTML-код в автозаполнение. Например, этот код может автоматически добавлять ссылки на Amazon.com, Yahoo.com и Google.com:
const mySites = [
{ text: 'yahoo', name: 'Yahoo', value: '<a href = "https://yahoo.com">Yahoo!</a>' },
{ text: 'amazon', name: 'Amazon', value: '<a href = "https://amazon.com">Amazon!</a>' },
{ text: 'google', name: 'Google', value: '<a href = "https://google.com">Google!</a>' }
];
tinymce.init({
selector: 'textarea#autocompleter-cardmenuitem',
height: 250,
setup: (editor) => {
const onAction = (autocompleteApi, rng, value) => {
editor.selection.setRng(rng);
editor.insertContent(value);
autocompleteApi.hide();
};
const getMatchedChars = (pattern) => {
return mySites.filter(char => char.text.indexOf(pattern) !== -1);
};
/**
* An autocompleter that allows you to insert special characters.
* Items are built using the CardMenuItem.
*/
editor.ui.registry.addAutocompleter('mySites_cardmenuitems', {
ch: ':',
minChars: 1,
columns: 1,
highlightOn: ['char_name'],
onAction: onAction,
fetch: (pattern) => {
return new Promise((resolve) => {
const results = getMatchedChars(pattern).map(char => ({
type: 'cardmenuitem',
value: char.value,
label: char.text,
items: [
{
type: 'cardcontainer',
direction: 'vertical',
items: [
{
type: 'cardtext',
text: char.text,
name: 'char_name'
},
{
type: 'cardtext',
text: char.name
}
]
}
]
}));
resolve(results);
});
}
});
}
});
<script src = "https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js"></script>
<textarea id = "autocompleter-cardmenuitem">
<p>Type <b>-</b> below and then keep typing to reduce further matches. For example, typing <b>:goo</b> should show the "Google" item in the menu. Pressing esc should close the autocomplete menu.</p>
<p></p>
</textarea>
Здесь он не запустится, но вы можете протестировать его на CodePen.
Я не понимаю, чего вы пытаетесь достичь. Не могли бы вы описать его поэтапно?
Спасибо Дмитрий все работает и очень функционально. Но мне нужно выбрать слово и нажать кнопку вставки ссылки, а затем ввести имя страницы, как в вашем примере: goo. Могу ли я сделать так?