Yes, it is possible to integrate any of the libraries mentioned above with TinyMCE editor. TinyMCE is a rich text editor that can be easily extended to include custom functionality. By using the TinyMCE API, you can bind any of these autocomplete libraries to the TinyMCE editor and provide a dropdown list of choices to users as they type.
Here's a simple example of how you can integrate Select2 with TinyMCE:
- Include the Select2 library and its CSS in your HTML file.
- Initialize TinyMCE and bind Select2 to the editor.
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script>
tinymce.init({
selector: 'textarea',
plugins: 'autocomplete',
init_instance_callback: function (editor) {
$(editor.getBody()).on('keydown', function (e) {
if (e.which === 50 && e.ctrlKey) {
var caretPos = editor.selection.getRng().startOffset;
var content = editor.getContent({ format: 'text' });
var currentLine = content.substr(0, caretPos).split('\n').pop();
var trigger = currentLine.match(/@\w+$/);
if (trigger) {
var items = ['apple', 'banana', 'cherry', 'date'];
var $dropdown = $('<select>').appendTo('body');
$dropdown.select2({
data: items,
width: '100%',
dropdownParent: $('body'),
minimumInputLength: 0,
maximumSelectionLength: 1,
placeholder: 'Type to search...'
});
$dropdown.on('select2:select', function (e) {
var value = e.params.data.id;
var start = caretPos - trigger[0].length;
var end = start + value.length;
editor.selection.setRng({ start: start, end: end });
editor.insertContent('@' + value);
$dropdown.remove();
});
$dropdown.select2('open');
}
}
});
}
});
</script>
This code binds Select2 to the TinyMCE editor so that when the user presses "Ctrl + 2" in the editor, a Select2 dropdown will appear with a list of choices. When the user selects a choice, it will be inserted into the editor.
