首页 > 其他分享 >fastadmin summernote 增加 emoji

fastadmin summernote 增加 emoji

时间:2024-11-29 11:37:42浏览次数:9  
标签:summernote js content fastadmin libs tam css emoji

github:https://github.com/trinhtam/summernote-emoji.git

 将文件夹黏贴到 project\public\assets\libs 文件夹下

 

编辑:project\public\assets\js\require-frontend.js

# paths 下新增
'emoji-tam': '../libs/tam-emoji/js/tam-emoji.min',
'emoji-config': '../libs/tam-emoji/js/config'
# shim 依赖配置
'emoji-tam': {
     deps: ['emoji-config', 'css!../libs/tam-emoji/css/emoji.css'],
     exports: 'TamEmoji'
}

定义初始化模块

 页面新增js

$(document).ready(function () {
  // 配置加载emoji图片路径
  document.emojiSource = '/assets/libs/tam-emoji/img/'
  // 初始化Summernote编辑器
  $('.comment_content').summernote({
    height: 150, // 设置编辑器的高度
    minHeight: null, // 最小高度(null表示没有限制)
    maxHeight: null, // 最大高度(null表示没有限制)
    focus: true, // 是否自动聚焦
    toolbar: [
      // 自定义工具栏
      ['insert', ['emoji', 'picture', 'video']] // 插入功能
    ]
    // lang: Config.lang              // 本地化语言
  })
  var editorContainer = $('.comment_content').next('.note-editor') // 获取 Summernote 编辑器容器
  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)
})

效果

 

标签:summernote,js,content,fastadmin,libs,tam,css,emoji
From: https://www.cnblogs.com/chenjiangbin/p/18576201

相关文章

  • fastadmin更改上传附件数据库为附件ID
    1.后台返回值加入IDapplication/admin/controller/Ajax.php文件中upload()方法,2处返回值加上附件ID 这样上传文件后,返回值便会多出file_id字段 2.比如添加商品页面上传商品图,得到file_id;<divclass="form-group"><labelclass="control-labelcol-xs-12co......
  • 说说你对emoji表情的理解,前端如何处理emoji表情?它的运用场景有哪些?
    我对emoji表情的理解是,它们是一种视觉上的符号语言,用于在数字交流中表达情感、概念和想法。它们超越了文本的限制,能够更有效地传达细微的语气和情感,使沟通更丰富、更具个性化。从前端开发的角度来看,emoji表情本质上是Unicode字符。这意味着它们可以像其他文本字符一样被处理和显......
  • Fastadmin框架短视频知识付费系统存在任意文件读取漏洞
    免责声明:本文旨在提供有关特定漏洞的深入信息,帮助用户充分了解潜在的安全风险。发布此信息的目的在于提升网络安全意识和推动技术进步,未经授权访问系统、网络或应用程序,可能会导致法律责任或严重后果。因此,作者不对读者基于本文内容所采取的任何行为承担责任。读者在使用本......
  • Java 冒泡排序 (Bubble Sort) ✨ 代码版 + Emoji讲解
    冒泡排序的基本思想就是让“大泡泡”不断往上浮,直到整个数组像泡泡浴一样排序好!......
  • Fastadmin 在列表页window.top.open打开新页面操作表单后保持表单验证回调操作
    //列表页click事件$(document).on('click','#add_customer',function(){varurl="ap/controller/add";vardata={area:["1050px","588px"],......
  • fastadmin 文件上传腾讯云
    1-安装腾讯云SDKcomposerrequireqcloud/cos-sdk-v52-腾讯云配置<?phpnamespaceapp\common\controller;useQcloud\Cos\Client;usethink\Controller;usethink\Db;classTencentextendsController{/***上传文件*@param$config*@p......
  • fastadmin 搭建项目,gitignore忽略文件配置,避免在操作git时产生代码冲突
    当多人进行开发fastadmin项目时,在提交代码到git仓库前,有一些文件如果不进行git忽略的话,在开发过程中很容易导致git冲突~以下是我在开发fastadmin项目时常用的gitignore文件的写法,在新项目提交到git仓库前可以进行替换(替换项目根目录的.gitignore文件内容)#BuildandReleaseFo......
  • FastAdmin前端开发——词条生成二维码
    一、前端开发基础文件序号文件路径功能1application/index/controller控制器文件2application/index/lang/zh-cn语言包3application/index/model模型文件4application/index/view/common/sidenav.html左侧菜单栏5application/index/view/index.html右侧列表视图6application/i......
  • FastAdmin目录穿越 CVE-2024-7928
    0x01漏洞描述:FastAdmin是一款基于ThinkPHP+Bootstrap开发的快速后台开发框架。FastAdmin基于Apache2.0开源协议发布,免费且不限制商业使用,目前被广泛应用于各大行业应用后台管理。其接口lang存在目录穿越漏洞,攻击者可通过该漏洞获取系统库敏感信息。0x02影响版本:FastAdmin......
  • FastAdmin+Element+UNIAPP旅游管理系统
    本文来自:FastAdmin+Element+UNIAPP旅游管理系统-源码1688应用介绍旅游管理系统是一款基于FastAdmin+Element+UNIAPP开发的多端(微信小程序、公众号、H5)旅游管理系统,拥有丰富的装修组件、多端分享、模板消息、电子合同、旅游攻略、旅游线路及相关保险预订等功能,提供Uniapp+......