Integrating Emoji Support in FastAdmin Summernote Editor
Clone the repository from GitHub:
https://github.com/trinhtam/summernote-emoji.git
Copy the downloaded folder into the project directory:
project/public/assets/libs/
Edit the file project/public/assets/js/require-frontend.js:
// Under paths section add:
'emoji-tam': '../libs/tam-emoji/js/tam-emoji.min',
'emoji-config': '../libs/tam-emoji/js/config'
// Under shim configuration:
'emoji-tam': {
deps: ['emoji-config', 'css!../libs/tam-emoji/css/emoji.css'],
exports: 'TamEmoji'
}
Define the initialization module by adding the following JavaScript to the page:
$(document).ready(function () {
// Set emoji image source path
document.emojiSource = '/assets/libs/tam-emoji/img/';
// Initialize Summernote editor
$('.comment_content').summernote({
height: 150,
minHeight: null,
maxHeight: null,
focus: true,
toolbar: [
['insert', ['emoji', 'picture', 'video']]
]
});
var editorContainer = $('.comment_content').next('.note-editor');
var addButton = $('<button>')
.addClass('btn btn-info add-btn')
.html('<i class="fa fa-comment"></i> 添加')
.css({
position: 'absolute',
bottom: '10px',
right: '10px',
zIndex: 10
})
.click(function () {
var content = prompt('请输入要添加的内容:');
if (content) {
editorContainer.find('.note-editable').append('<p>' + content + '</p>');
}
});
editorContainer.css('position', 'relative');
editorContainer.append(addButton);
});
Important Notes
-
The
Configglobal variable defined in the GitHub library's JavaScript may conflict with FastAdmin's existingConfig. If issues arise, rename the variable inconfig.jsand update references intam-emoji.jsaccordingly. -
FastAdmin loads JavaScript based on the
debugsetting in the environment file. When debug mode is enabled, it loadsrequire-frontend.js; otherwise, it loads the minified versionrequire-frontend.min.js. Therfeore, after modifyingrequire-frontend.jsfor production, you must compress and replacerequire-frontend.min.js.