FastAdmin动态创建一个富文本编辑器(summernote)

news2024/11/5 20:42:06

话多说直接看效果:
在这里插入图片描述

<!-- 动态创建的一个富文本,请注意本人是为了方便所以把js放在了这里,使用者可以结合自身需求修改 -->
 <div class="form-group">
     <!-- 这里博主使用临时路径,需要自行修改 -->
     <script src="http://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
     <!-- 创建一个按钮,点击后会动态添加富文本编辑器 -->
     <label class="control-label col-xs-12 col-sm-2" id="dynamicCreateEditorBtn">创建富文本</label>
     <!-- 容器,用于存放动态生成的 Summernote 编辑器 -->
     <div id="dynamicCreateEditor" class="col-xs-12 col-sm-8"></div>
     <script>
         $(document).ready(function () {
             // 监听点击按钮事件
             $('#dynamicCreateEditorBtn').click(function () {
                 // 动态创建一个textarea,并将其插入到#editor-container中
                 const textarea = $(`<textarea textarea id="dynamicSummernote" name="row[dynamicEditor]" class="form-control editor" rows="10" ></textarea >`);
                 // 将textarea添加到容器中
                 $('#dynamicCreateEditor').append(textarea);
                 // 初始化 Summernote 编辑器
                 textarea.summernote({
                     height: 300,
                     lang: 'zh-CN',
                     fontNames: [
                         'Arial', 'Arial Black', 'Serif', 'Sans', 'Courier',
                         'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande',
                         "Open Sans", "Hiragino Sans GB", "Microsoft YaHei",
                         '微软雅黑', '宋体', '黑体', '仿宋', '楷体', '幼圆',
                     ],
                     fontNamesIgnoreCheck: [
                         "Open Sans", "Microsoft YaHei",
                         '微软雅黑', '宋体', '黑体', '仿宋', '楷体', '幼圆'
                     ],
                     toolbar: [
                         ['style', ['style', 'undo', 'redo']],
                         ['font', ['bold', 'underline', 'strikethrough', 'clear']],
                         ['fontname', ['color', 'fontname', 'fontsize']],
                         ['para', ['ul', 'ol', 'paragraph', 'height']],
                         ['table', ['table', 'hr']],
                         ['insert', ['link', 'picture', 'video']],
                         ['select', ['image', 'attachment']],
                         ['view', ['fullscreen', 'codeview', 'help']],
                     ],
                 })
             });
         });
     </script>
 </div>

注:该动态生成仅在已有富文本的页面创建,因为我没有引入😅

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2233804.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

网络层5——IPV6

目录 一、IPv6 vs IPv4 1、对IPv6主要变化 2、IPv4 vs IPv6 二、IPv6基本首部 1、版本——4位 2、通信量类——8位 3、流标号——20位 4、有效载荷长度——16位 5、下一个首部——8位 6、跳数限制——8位 7、源 、 目的地址——128位 8、扩展首部 三、IPv6地址 1…

C++STL——list

C教学总目录 list 1、list简介2、构造函数3、迭代器4、访问和容量函数5、修改类函数6、操作类函数 1、list简介 list是带头双向循环链表&#xff0c;也是模板类&#xff0c;使用时要指明类型&#xff0c;包含于头文件<list> 由于list是双向循环链表&#xff0c;在任意位置…

DMRl-Former用于工业过程预测建模和关键样本分析的数据模式相关可解释Transformer网络

DMRl-Former用于工业过程预测建模和关键样本分析的数据模式相关可解释Transformer网络 Liu, Diju, et al. “Data mode related interpretable transformer network for predictive modeling and key sample analysis in industrial processes.” IEEE Transactions on Indust…

JS渗透(安全)

JS逆向 基本了解 作用域&#xff1a; 相关数据值 调用堆栈&#xff1a; 由下到上就是代码的执行顺序 常见分析调试流程&#xff1a; 1、代码全局搜索 2、文件流程断点 3、代码标签断点 4、XHR提交断点 某通js逆向结合burp插件jsEncrypter 申通快递会员中心-登录 查看登录包…

Redis为什么用跳表实现有序集合

Redis为什么用跳表实现有序集合 手写一个跳表 为了更好的回答上述问题以及更好的理解和掌握跳表&#xff0c;这里可以通过手写一个简单的跳表的形式来帮助读者理解跳表这个数据结构。 我们都知道有序链表在添加、查询、删除的平均时间复杂都都是 O(n) 即线性增长&#xff0c…

影刀RPA实战:嵌入python,如虎添翼

1. 影刀RPA与Python的关系 影刀RPA与Python的关系可以从以下几个方面来理解&#xff1a; 技术互补&#xff1a;影刀RPA是一种自动化工具&#xff0c;它允许用户通过图形化界面创建自动化流程&#xff0c;而Python是一种编程语言&#xff0c;常用于编写自动化脚本。影刀RPA可以…

GR2——在大规模视频数据集上预训练且机器人数据上微调,随后预测动作轨迹和视频(含GR1详解)

前言 上个月的24年10.9日&#xff0c;我在朋友圈看到字节发了个机器人大模型GR2&#xff0c;立马去看了下其论文(当然了&#xff0c;本质是个技术报告) 那天之后&#xff0c;我就一直想解读这个GR2来着 然&#xff0c;意外来了&#xff0c;如此文《OmniH2O——通用灵巧且可全…

HarmonyOS NEXT应用元服务开发组合场景

在一些场景中&#xff0c;一个功能上完整的UI对象可能是由若干个更小的UI组件组合而成的。若每一个小的UI组件都可以获焦并朗读&#xff0c;则会造成信息冗余和效率降低。同时由于可聚焦的组件过多过细&#xff0c;也会影响触摸浏览时走焦的性能体验。在这种情况下&#xff0c;…

2024双11高端家用投影仪哪个牌子好?当贝因何力压极米坚果

随着生活水平的日益提升与科技的飞速进步&#xff0c;人们不只通过外出游玩来获得身心的愉悦&#xff0c;也通过提升家庭娱乐生活的品质&#xff0c;来获得足不出户的快乐。在2024年双11购物狂欢节之际&#xff0c;很多家庭都纷纷将高端家用投影仪加入购物清单&#xff0c;但各…

SpringBoot day 1104

ok了家人们这周学习SpringBoot的使用&#xff0c;和深入了解&#xff0c;letgo 一.SpringBoot简介 1.1 设计初衷 目前我们开发的过程当中&#xff0c;一般采用一个单体应用的开发采用 SSM 等框架进行开发&#xff0c;并在 开发的过程当中使用了大量的 xml 等配置文件&#x…

HCIP(7)-边界网关协议BGP基本配置(对等体peer,宣告network,引入import)

边界网关协议&#xff08;Border Gateway Protocol&#xff0c;BGP&#xff09;是一种用来在路由选择域之间交换网络层可达性信息&#xff08;Network Layer Reachability Information&#xff0c;NLRI&#xff09;的路由选择协议。由于不同的管理机构分别控制着他们各自的路由…

算法: 链表题目练习

文章目录 链表题目练习两数相加两两交换链表中的节点重排链表合并 K 个升序链表K 个一组翻转链表 总结 链表题目练习 两数相加 坑: 两个链表都遍历完后,可能需要进位. class Solution {public ListNode addTwoNumbers(ListNode l1, ListNode l2) {ListNode cur1 l1;ListNode…

HTML 基础标签——元数据标签 <meta>

文章目录 1. `<meta>` 标签概述2. 属性详解2.1 `charset` 属性2.2 `name` 属性2.3 `content` 属性2.4 `http-equiv` 属性3. 其他常见属性小结在 HTML 文档中,元数据标签 <meta> 是一种重要的标签,用于提供关于文档的信息,这些信息不直接显示在网页内容中,但对于…

新闻稿件管理系统:SpringBoot框架深度解析

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

【网络】自定义协议——序列化和反序列化

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;了解什么是序列化和分序列&#xff0c;并且自己能手撕网络版的计算器。 > 毒鸡汤&#xff1a;有些事情&#xff0c;总是不明白&#xff0c;所以我不…

CTFshow之信息收集第1关到10关。详细讲解

得而不惜就该死&#xff01; --章总 开始新的篇章&#xff01; 零、目录 一、实验准备 1、ctf网站&#xff1a;ctf.show 2、工具&#xff1a;chrome浏览器、hackbar插件 3、burpsuite抓包工具 二、实验技巧 &#xff08;一&#xff09;F12摸奖 源码泄露 &#xff08;二…

Redis ——发布订阅

问题引入&#xff1a; 服务器A、B、C、D&#xff0c;客户端&#xff1a;C1&#xff0c;C2&#xff0c;C3&#xff0c;C4&#xff1b; 客户端基于集群聊天服务器的负载均衡分配&#xff1b; C1 被分配到A&#xff0c;C2 被分配到B&#xff0c;C3 被分配到C&#xff0c;C4 被分…

【漏洞复现】某平台-QRcodeBuildAction-LoginSSO-delay-mssql-sql注入漏洞

《Java代码审计》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484219&idx1&sn73564e316a4c9794019f15dd6b3ba9f6&chksmc0e47a67f793f371e9f6a4fbc06e7929cb1480b7320fae34c32563307df3a28aca49d1a4addd&scene21#wechat_redirect 《Web安全》h…

API网关 - JWT认证 ; 原理概述与具体实践样例

API网关主要提供的能力&#xff0c;就是协议转换&#xff0c;安全&#xff0c;限流等能力。 本文主要是分享 如何基于API网关实现 JWT 认证 。 包含了JWT认证的流程&#xff0c;原理&#xff0c;与具体的配置样例 API网关认证的重要性 在现代Web应用和微服务架构中&#x…

Excel:vba实现批量插入图片

实现的效果&#xff1a; 实现的代码&#xff1a; Sub InsertImageNamesAndPictures()Dim PicPath As StringDim PicName As StringDim PicFullPath As StringDim RowNum As IntegerDim Pic As ObjectDim Name As String 防止表格里面有脏数据Cells.Clear 遍历工作表中的每个图…