当前位置： 首页 > news >正文

轻量级富文本编辑 Trumbowyg —— 基于 jQuery 插件配置

news 2026/3/27 4:15:04

使用方法👇

首先,添加jQuery到页面<body>位置:

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

Trumbowyg需要jQuery > = 1.7,因为它使用.on()一个新的函数出现在1.7版本。

在这之后,你必须加载Trumbowyg。

<script src="js/vendor/trumbowyg.min.js"></script>

别忘了Trumbowyg CSS到<head>,或负载编辑您自己的风格。

<link rel="stylesheet" href="css/vendor/trumbowyg.css">

基础知识

这最少的代码将一个简单的div Trumbowyg到神奇的WYSIWYG编辑器。

$('#trumbowyg-demo').trumbowyg();

如果你想设置Trumbowyg选项,添加一个包含你的选择对象作为参数。

$('#trumbowyg-demo').trumbowyg({ fullscreenable: false,  closable: true,  btns: ['bold', 'italic', '|', 'insertImage']
});

Trumbowyg 1.17,颜色插件用法，

$('#my-editor').trumbowyg({//设置中文lang: 'zh_cn',// closable: true,fixedBtnPane: true,//设置颜色插件btnsAdd: ['foreColor','backColor'],btnsDef: {// 设置上传的3种方法，远程上传，本地上传，图片64位加密image: {dropdown: ['insertImage', 'upload','base64'],ico: 'insertImage'}},// Redefine the button panebtns: ['viewHTML','|', 'formatting','|', 'btnGrp-semantic','|', 'link','|', 'image','|', 'btnGrp-justify','|', 'btnGrp-lists','|', 'horizontalRule']，});

颜色插件在 dist目录下的plugins目录下！

Button pane 按钮窗格

这可能是最有趣的选项，它允许您选择出现在按钮窗格中的按钮。此选项是一个数组，其中包含表示按钮或垂直分隔符（使用竖线字符）的字符串值。若要创建自己的自定义按钮窗格，请定义一个数组并将其传递给 btns 该选项。 

$('.simple-editor').trumbowyg({btns: [['bold', 'italic'], ['link']]  //加粗 斜体 链接
});

By default, btns option value is:
默认情况下， btns 选项值为：

$('.simple-editor').trumbowyg({btns: [['viewHTML'],   //查看html['undo', 'redo'], // 撤消 重做 ['formatting'], //格式['strong', 'em', 'del'],  //字体加粗['superscript', 'subscript'], //上标 下标 ['link'],  //链接['insertImage'], // 插入图片['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'], //靠左 剧中 靠右 全部['unorderedList', 'orderedList'], //无序列表  有序列表['horizontalRule'],  //水平规则['removeformat'], //删除格式['fullscreen']， //全屏]
});

参考链接     Documentation | Trumbowyg 官网

相关文章：

轻量级富文本编辑 Trumbowyg —— 基于 jQuery 插件配置

使用方法&#x1f447; 首先,添加jQuery到页面<body>位置: <script src"http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <script>window.jQuery || document.write(<script src"js/vendor/jquery-1.10.2.min.js&qu…...

编程日记 2024/3/28 10:38:49

那些王道书里的题目-----计算机网络篇

注&#xff1a;仅记录个人认为有启发的题目 p155 34.下列四个地址块中&#xff0c;与地址块 172.16.166.192/26 不重叠&#xff0c;且与172.16.166.192/26聚合后的地址块不会引入多余地址的是&#xff08;&#xff09; A.172.16.166.192/27 B.172.16.166.128/26 …...

编程日记 2024/3/28 10:36:46

【前端学习——js篇】 10.this指向

具体见&#xff1a;https://github.com/febobo/web-interview 10.this指向 根据不同的使用场合&#xff0c;this有不同的值&#xff0c;主要分为下面几种情况&#xff1a; 默认绑定隐式绑定new绑定显示绑定 ①默认绑定 全局环境中定义person函数&#xff0c;内部使用this关…...

编程日记 2024/3/28 10:34:44

项目搭建之统一返回值

自定义枚举类 Getter public enum ReturnCodeEnum {/*** 操作失败**/RC999("999","操作XXX失败"),/*** 操作成功**/RC200("200","success"),/*** 服务降级**/RC201("201","服务开启降级保护,请稍后再试!"),/*** …...

编程日记 2024/3/28 10:32:41

嵌入式和 Java 走哪条路?

最近看到一个物联网大三学生的疑问&#xff0c;原话如下&#xff1a; 本人普通本科物联网工程专业&#xff0c;开学大三&#xff0c;现在就很迷茫&#xff0c;不打算考研了&#xff0c;准备直接就业&#xff0c;平时一直在实验室参加飞思卡尔智能车比赛&#xff0c;本来是想走嵌…...

编程日记 2024/3/28 10:30:38

C++ 控制语句（一）

一 顺序结构 程序的基本结构有三种&#xff1a; 顺序结构、分支结构、循环结构 大量的实际问题需要通过各种控制流程来解决。 1.1 顺序结构 1.2 简单语句和复合语句 二 循环 2.1 for循环 语句流程图 注意&#xff1a;使用for语句的灵活性 三 while语句 四 do while语句...

编程日记 2024/3/28 10:29:37

mysql 用户管理-权限表

学习了《mysql5.7安装》&#xff0c;就先再了解下用户管理&#xff0c;先了解下权限表。 MySQL是一个多用户数据库&#xff0c;具有功能强大的访问控制系统&#xff0c;可以为不同用户指定允许 的权限。MySQL用户可以分为普通用户和root用户。root 用户是超级管理员,拥有所有权…...

编程日记 2024/3/28 10:27:33

【Postman如何进行接口测试简单详细操作实例】

1、下载Postman postman下载地址&#xff1a;Download Postman | Get Started for Free 2、安装Postman (1)双击下载好的postman-setup.exe文件&#xff0c;进行安装postman工具 (2)安装完成后&#xff0c;在桌面找到并打开postman软件&#xff0c;输入邮箱和密码进行登录&a…...

编程日记 2024/3/28 10:26:32

docker搭建Project Calico环境

Project Calico 是一个开源的网络和网络安全解决方案，专为容器、虚拟机和本地工作负载设计。它提供了高度可扩展的网络层，支持广泛的容器编排平台，如 Kubernetes、Docker Swarm和OpenStack。Calico 的主要特点包括： 支持多层网络策略，包括基于角色的访问控制(RBAC)。提供网…...

编程日记 2024/3/28 10:24:28

pyecharts操作一

pyecharts 是一个用于生成Echarts图表的Python库。Echarts是百度开源的一个数据可视化JS库&#xff0c;可以生成一些非常酷炫的图表。 环境安装 pip install pyecharts 检查版本 import pyecharts print(pyecharts.version) 2.0.3 柱状图绘制 from pyecharts.charts impor…...

编程日记 2024/3/28 10:21:24

『Apisix进阶篇』动态负载均衡：APISIX的实战演练与策略应用

&#x1f680;『Apisix系列文章』探索新一代微服务体系下的API管理新范式与最佳实践 【点击此跳转】 &#x1f4e3;读完这篇文章里你能收获到 &#x1f3af; 掌握APISIX中多种负载均衡策略的原理及其适用场景。&#x1f4c8; 学习如何通过APISIX的Admin API和Dashboard进行负…...

编程日记 2024/3/28 10:19:22

【开发篇】十一、GC调优的分析工具

文章目录 1、调优的主要指标2、工具一&#xff1a;jstat3、工具二&#xff1a;Visual VM的插件4、工具三&#xff1a;Prometheus Grafana5、生成GC日志6、工具四&#xff1a;GC Viewer7、工具五&#xff1a;GCeasy GC调优&#xff0c;是为了避免因垃圾回收引起程序性能下降&am…...

编程日记 2024/3/28 10:17:20

SpringCloudConfig 使用git搭建配置中心

一 SpringCloudConfig 配置搭建步骤 1.引入 依赖pom文件 引入 spring-cloud-config-server 是因为已经配置了注册中心 <dependencies><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-config-server</…...

编程日记 2024/3/28 10:16:19

c#基础-引用类型和值类型的区别

在C#中，数据类型分为两类：值类型和引用类型。 值类型：直接存储数据，分配在栈(Stack)上。常见的值类型包括基本数据类型（int, float, double等），结构体（struct），枚举（enum）等。 引用类型：存储数据的引用和对象，分配在托管堆(Heap)上。常见的引用类型包括类（cla…...

编程日记 2024/3/28 10:14:16

面试题-3.20

1、__FILE__表示什么意思&#xff1f; __FILE__&#xff1a;当前文件的完整路径和文件名 __LINE__&#xff1a;当前行 __DIR__&#xff1a;当前文件所在的目录 2、如何获取客户端的IP地址&#xff1f; 通过超全局数组$_SERVER&#xff1a;echo $_SERVER[REMOTE_PORT]; 3、写…...

编程日记 2024/3/28 10:13:15

glibc内存管理ptmalloc - 多线程内存管理

上图 此图着重描述的是子线程&#xff0c;一个heap&#xff08;由heap_info结构体描述&#xff09;用完&#xff0c;需要另一个的情况。 子线程内存特点 1. 第一个heap物理内存上从低地址到高地址依次是&#xff1a;heap_infomalloc_state(arena)chunks /* arena.c #0 new_…...

编程日记 2024/3/28 10:10:11

区块链食品溯源案例实现（一）

引言&#xff1a; 食品安全问题一直是社会关注的热点&#xff0c;而食品溯源作为解决食品安全问题的重要手段&#xff0c;其重要性不言而喻。传统的食品溯源系统往往存在数据易被篡改、信息不透明等问题&#xff0c;而区块链技术的引入&#xff0c;为食品溯源带来了革命性的变革…...

编程日记 2024/3/28 10:09:09

4S店车辆管理系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读100套最新项目持续更新中..... 2024年计算机毕业论文&#xff08;设计&#xff09;学生选题参考合集推荐收藏&#xff08;包含Springboot、jsp、ssmvue等技术项目合集&#xff09; 目录 1. 管…...

编程日记 2024/3/28 10:07:07

SpringBoot+Prometheus+Grafana实现应用监控和报警

一、背景 SpringBoot的应用监控方案比较多&#xff0c;SpringBootPrometheusGrafana是目前比较常用的方案之一。它们三者之间的关系大概如下图&#xff1a; 关系图 二、开发SpringBoot应用 首先&#xff0c;创建一个SpringBoot项目&#xff0c;pom文件如下&#xff1a; <…...

编程日记 2024/3/28 10:05:05

10 - Debian如何让特定用户切换root身份

作者&#xff1a;网络傅老师 特别提示&#xff1a;未经作者允许&#xff0c;不得转载任何内容。违者必究&#xff01; Debian如何让特定用户切换root身份 《傅老师Debian小知识库系列之10》——原创 前言 傅老师Debian小知识库特点&#xff1a; 1、最小化拆解Debian实用技能…...

编程日记 2024/3/28 9:59:59

深入解析PLL锁相环在FPGA时钟管理中的核心应用

1. 从闹钟到芯片&#xff1a;PLL如何成为FPGA的"时间管家" 想象一下你早上起床的场景&#xff1a;手机闹钟准时响起&#xff0c;咖啡机开始自动煮咖啡&#xff0c;窗帘缓缓拉开让阳光照进来。这些设备之所以能完美同步&#xff0c;全靠它们内部精确的时钟信号。而在…...

编程新知 2026/3/27 3:51:34

手把手教你用RTABMAP+T265在Windows10上实现室内三维扫描（含标定技巧）

手把手教你用RTABMAPT265在Windows10上实现高精度室内三维扫描 第一次接触室内三维扫描时&#xff0c;我被这项技术深深吸引——它能让物理空间瞬间数字化&#xff0c;就像给现实世界按下"CtrlC"。但真正动手配置RTABMAP和T265相机时&#xff0c;才发现这条路并不平坦…...

编程新知 2026/3/27 3:09:02

轻量级语义通信系统在边缘计算中的实践与优化

1. 边缘计算为什么需要轻量级语义通信&#xff1f; 想象一下你家的智能门铃摄像头&#xff0c;它需要实时把门口的画面传到你的手机上。传统的通信方式就像把整本相册邮寄给你&#xff0c;而语义通信则是只告诉你"门口有个穿红衣服的快递员"。这种"说重点"…...

编程新知 2026/3/27 2:38:45

Windows下OpenClaw安装指南：快速对接百川2-13B量化模型

Windows下OpenClaw安装指南&#xff1a;快速对接百川2-13B量化模型 1. 为什么选择OpenClaw百川2-13B组合 去年我在处理个人知识管理时&#xff0c;发现每天要重复执行大量机械操作&#xff1a;整理网页资料、归档PDF、生成日报。直到遇见OpenClaw这个能像人类一样操作电脑的A…...

编程新知 2026/3/27 2:08:41

为什么3分钟搞懂AI

炒又幕燃、RedisShake 核心介绍 RedisShake 是阿里云 Tair 开源团队推出的轻量级Redis数据处理工具&#xff0c;无需复杂依赖&#xff0c;部署简单、操作便捷&#xff0c;能适配自建Redis、云Redis等多种环境&#xff0c;解决Redis全生命周期的数据管理难题。 1.1 四大核心功能…...

编程新知 2026/3/27 1:54:38

8位单片机中16位int型数据操作技巧

8位单片机中对16位int型数据的操作技巧1. 数据合并的需求背景在8位单片机开发中&#xff0c;经常需要处理16位数据。由于8位架构的限制&#xff0c;16位数据需要拆分为两个8位字节进行存储和传输。当需要将两个8位数据合并为一个16位数据时&#xff0c;开发者需要掌握高效可靠的…...

编程新知 2026/3/27 1:36:21

RBD_Timer：嵌入式轻量级多定时器时间轮调度框架

1. RBD_Timer 库深度解析&#xff1a;面向嵌入式实时系统的轻量级多定时器管理框架1.1 问题根源&#xff1a;Arduino 原生delay()与中断阻塞对实时性的破坏在 Arduino 生态中&#xff0c;delay()函数被广泛用于实现时间等待逻辑。然而其底层实现本质是忙等待&#xff08;busy-w…...

编程新知 2026/3/27 1:30:21

2024版idea引入lombok总是报错解决方法

在创建SpringBoot文件时不勾选lombok&#xff0c;然后自己手动导入lombok并指定版本玛德这idea的SpringBoot中导入lombok后我使用Data总是说我的get和set方法有毛病&#xff0c;一怒之下我直接就是疯狂搜如何解决lombok引用问题&#xff0c;结果不是让我去勾选一个东西就是让我…...

编程新知 2026/3/26 23:51:15

从卡顿到实时：Shenyu网关WebSocket通知系统如何解决微服务配置同步难题

从卡顿到实时&#xff1a;Shenyu网关WebSocket通知系统如何解决微服务配置同步难题 你是否遇到过这样的困境&#xff1a;API网关配置更新后&#xff0c;客户端需要等待数分钟甚至更长时间才能生效&#xff1f;在秒杀活动等高并发场景下&#xff0c;这种延迟可能导致流量分配不…...

编程新知 2026/3/26 23:37:04

智能内容解锁工具：5分钟掌握付费墙突破技巧

智能内容解锁工具&#xff1a;5分钟掌握付费墙突破技巧 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在数字信息时代&#xff0c;优质内容常被付费墙阻隔&#xff0c;而bypass-payw…...

编程新知 2026/3/26 21:48:02