Fading Coder

One Final Commit for the Last Sprint

Home > Tech > Content

Integrating Emoji Support in FastAdmin Summernote Editor

Tech May 10 13

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

  1. The Config global variable defined in the GitHub library's JavaScript may conflict with FastAdmin's existing Config. If issues arise, rename the variable in config.js and update references in tam-emoji.js accordingly.

  2. FastAdmin loads JavaScript based on the debug setting in the environment file. When debug mode is enabled, it loads require-frontend.js; otherwise, it loads the minified version require-frontend.min.js. Therfeore, after modifying require-frontend.js for production, you must compress and replace require-frontend.min.js.

Related Articles

Comprehensive Guide to SSTI Explained with Payload Bypass Techniques

Introduction Server-Side Template Injection (SSTI) is a vulnerability in web applications where user input is improper handled within the template engine and executed on the server. This exploit can r...

Implement Image Upload Functionality for Django Integrated TinyMCE Editor

Django’s Admin panel is highly user-friendly, and pairing it with TinyMCE, an effective rich text editor, simplifies content management significantly. Combining the two is particular useful for bloggi...

SBUS Signal Analysis and Communication Implementation Using STM32 with Fus Remote Controller

Overview In a recent project, I utilized the SBUS protocol with the Fus remote controller to control a vehicle's basic operations, including movement, lights, and mode switching. This article is aimed...

Leave a Comment

Anonymous

◎Feel free to join the discussion and share your thoughts.