edit(带图片上传)富文本编辑器

最新推荐文章于 2026-04-17 13:26:07 发布
转载 最新推荐文章于 2026-04-17 13:26:07 发布 · 545 阅读 · 0
介绍了一个由Trumbowyg改编的中文版编辑插件，该插件增加了图片大小调整等功能，便于在任意HTML中加载文本编辑器，提高了编辑效率。

 

插件描述：由trumbowyg改编的edit插件，首先是中文版，其次增加了图片更改大小等一系列优化，十分方便

加载样式以及js

1

2

3

4

<script src="assets/jquery.min.js"></script>

<script src="assets/trumbowyg.js"></script>

<script src="assets/plugins/base64/trumbowyg.base64.js"></script>

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

加上图片放大缩小插件

1

2

3

4

5

6

<div id="odiv" style="display:none;position:absolute;z-index:100;">

    <img src="assets/pic/sx.png" title="缩小" border="0" alt="缩小" onclick="sub(-1);"/>

    <img src="assets/pic/fd.png" title="放大" border="0" alt="放大" onclick="sub(1)"/>

    <img src="assets/pic/cz.png" title="重置" border="0" alt="重置" onclick="sub(0)"/>

    <img src="assets/pic/sc.png" title="删除" border="0" alt="删除" onclick="del();odiv.style.display='none';"/>

</div>

使用

1

<div onmousedown="show_element(event)" style="clear:both" id="customized-buttonpane" class="editor"></div>

在任意html中加载文本编辑器。

在trumbowyg.js中搜索customized-buttonpane，可以将id更换，或者自己提出来直接新建新的edit

DEMO下载地址：https://dwz.cn/ORcEz9fz

cwhatiscs
关注
Edit 贴PNG图
02-01
Edit 贴PNG图 vc2008开发 里面是个类，有使用说明语句，这个类基本上可以实现编辑框控件贴PNG图片，但是输入有点问题，大家可以改进改进
轻量级文本编辑器Trumbowyg
06-01
轻量级文本编辑器，简洁漂亮的设计,生成语义代码,有一个强大的API。 编辑生成的代码进行了优化,HTML5的支持。 兼容浏览器IE7 +,Chrome,Opera和Firefox
trumbowyg编辑器文档笔记
beyond__devil的博客
10-30 3760
1.官网地址： https://alex-d.github.io/Trumbowyg 2.github地址： https://github.com/Alex-D/Trumbowyg 3.引入文件： 依赖jquery 头部引入css文件 4.开始(get start) 1>基础 将转换为编辑器，最简单的代码： $
Trumbowyg核心功能深度解析：从基础编辑到高级定制
最新发布
gitblog_00123的博客
04-17 364
Trumbowyg是一款轻量级且功能强大的WYSIWYG JavaScript编辑器，文件大小不足10kB，却提供了丰富的编辑功能和高度的可定制性。无论是简单的文本格式化还是复杂的内容创作，Trumbowyg都能满足你的需求，同时保持高效的性能和简洁的用户界面。 [![Trumbowyg编辑器界面](https://raw.gitcode.com/gh_mirrors/tr/Trumbowyg/
EDIT控件自绘
pud_zha的专栏
12-24 3792
1.主窗口的创建过程： N个WM_ERASEBKGND ->WM_PAINT（也可能WM_ERASEBKGND 是WM_PAINT触发的  ） 2.非客户区的绘图应画在WM_NCPAINT中，不然运行后第一次显示不出来 3.CWnd::RedrawWindow默认会导致背景重绘,该函数可产生WM_ERASEBKGND/WM_PAINT/WM_NCPAINT OnPa
jquery html文本编辑器,jquery轻量级文本编辑器Trumbowyg
weixin_30260057的博客
06-18 712
插件描述：Trumbowyg一个轻量级文本编辑器，简洁漂亮的设计,生成语义代码,有一个强大的API。 编辑生成的代码进行了优化,HTML5的支持。 兼容浏览器IE7 +,Chrome,Opera和Firefox。 只有15 kb这意味着更快的页面加载。使用方法首先,添加jQuery到页面位置:window.jQuery||document.write('')Trumbowyg需要jQuery ...
trumbowyg 超级轻量级文本编辑器使用说明
热门推荐
lensgcx的博客
01-13 1万+
这里我推荐一下 bootstrap-wysiwyg ，我个人是比较喜欢的，基于bootstrap，目前项目中用bootstrap开发的项目不再少数，所以用上这个jquery bootstrap小插件是再好不过的了，5kb，<200行代码做到了超轻量级。 本章案例，我这里使用的是 trumbowyg 编辑器，之所以使用它，也是看中它的灵活性，可操作性，以及个人比较喜欢的界面风格，百搭。 这里简单介绍一下：Trumbowyg 是一个轻量，可定制的 jQuery 所见即所得（WYSIWYG）的编辑器插件，可生成语
ueditor图片上传方式处理
lao_wang_tou的博客
04-10 1310
最近项目里需要用到富文本编辑器，同事选择里百度出的ueditor，但是里面自带的图片上传功能需要后台配合，配置成服务器地址，和我们实际情况不是太符合，于是另想办法，搞定图片上传。 重写配置项 首先重写里toolbars配置。最重要的是要把原先的上传图片功能按钮去掉，下面是我用到的配置项 toolbars: [ [ "fullscreen", ...
vue-quill-editor 富文本编辑器上传视频
且听风吟的博客
07-05 1万+
vue-quill-editor 富文本编辑器上传视频
uniapp 富文本编辑器使用
qq_42339350的博客
07-01 2071
jin-edit—仿简书非常好用的富文本编辑器 3 修改组件内部上传逻辑 效果
wangEdit 富文本编辑器
小白的技术之路
06-16 7124
安装： npm install wangeditor 编写组件以便日后复用，将wangedit封装为独立组件 （上传图片到服务器 成功后会返回图片链接地址 进行展示） ```<template> <div id="wangeditor"> <div ref="editorElem" style="text-align:left;"></div> </div> </template> <script>
【亲测免费】 Trumbowyg：轻量级WYSIWYG编辑器使用指南
gitblog_00165的博客
09-10 581
Trumbowyg 是一款简洁且轻量级的富文本编辑器，压缩后的文件大小仅为20kB（gzip压缩后8kB），旨在加快网页加载速度。它基于MIT协议开源，由Alexandre Demode开发维护。这个编辑器提供了一个基本而强大的界面，让用户能够轻松地进行可视化文本编辑。其支持自定义扩展，并拥有一系列配套插件以满足不同场景下的需求。[访问官方主页](http://alex-d.github.io/T...
推荐：轻量级WYSIWYG编辑器 —— Trumbowyg
gitblog_00078的博客
11-17 643
在网页开发中，集成一个直观易用的文本编辑器常常是提高用户体验的关键一环。今天，我们向大家推荐一款高效且轻便的富文本编辑器——Trumbowyg，它以其简单的API和出色的性能，赢得了众多开发者的好评。 ## 项目介绍 Trumbowyg是一个小巧却功能强大的所见即所得（WYSIWYG）编辑器，它的压缩后的大小仅为20kB（gzip后仅8kB），这样的体积对于提升页面加载速度来说是个巨大的优势。
轻量级富文本编辑 Trumbowyg —— 基于 jQuery 插件配置
qq_53895518的博客
03-28 1158
Trumbowyg需要jQuery > = 1.7,因为它使用.on()一个新的函数出现在1.7版本。在这之后,你必须加载Trumbowyg。别忘了Trumbowyg CSS到,或负载编辑您自己的风格。
Trumbowyg：打造定制化轻量级jQuery文本编辑器
weixin_36277197的博客
07-08 1184
Trumbowyg是一个开源的、轻量级的富文本编辑器，专为网页使用而设计。它支持多种浏览器，并且能轻松嵌入到现有的网页中，提供给用户一个简洁直观的操作界面。Trumbowyg提供了丰富的API接口，使得开发者能够根据自己的需求进行定制化开发，满足特定的业务场景。Trumbowyg编辑器作为一个国际化的文本编辑器，支持多语言环境是其一大特色。它允许用户根据自己的需要更改编辑器的显示语言，为不同语言的用户提供了便利。Trumbowyg编辑器提供的自定义按钮功能，为开发者提供了强大的扩展性。
vue trumbowyg_Trumbowyg所见即所得编辑器的Vue.js组件
cuk5239的博客
07-21 1430
vue trumbowyg Vue-Trumbowyg (Vue-Trumbowyg) Vue.js v2.x component for Trumbowyg WYSIWYG editor Trumbowyg所见即所得编辑器的Vue.js v2.x组件 特征 (Features) Reactive v-model value You can change editor value progr...
jquery轻量级富文本编辑器Trumbowyg
weixin_34062469的博客
12-26 494
html: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" c...
Trumbowyg编辑器核心功能详解：从模态框到内容管理
gitblog_01124的博客
11-17 362
Trumbowyg是一款轻量级的所见即所得(WYSIWYG)编辑器，基于jQuery开发。它以其简洁的界面和强大的扩展能力受到开发者青睐。本文将深入解析Trumbowyg的核心功能，帮助开发者更好地掌握这款编辑器的使用技巧。 ## 模态框功能详解 模态框是Trumbowyg中用于创建自定义扩展的重要功能，它允许开发者在编辑器中弹出对话框，实现复杂的交互操作。 ### 基本打开与关闭 ```
Trumbowyg 开源项目安装与使用指南
gitblog_00447的博客
09-10 506
Trumbowyg 是一个轻量级的WYSIWYG（所见即所得）编辑器，重量仅为20kB（压缩后的大小），旨在加速页面加载。本指南将引导您了解其基本结构、启动与配置步骤。 ## 1. 项目目录结构及介绍 Trumbowyg 的项目结构组织清晰，便于开发者快速定位需要的文件和组件： - `src`: 源代码存放地，包括核心编辑器功能的实现。 - 等子目录如 `src/js`, `src/...
Trumbowyg：轻量级WYSIWYG编辑器的终极选择
gitblog_00187的博客
02-23 283
Trumbowyg是一款轻量级的WYSIWYG（所见即所得）JavaScript编辑器，文件大小不到10kB，却拥有强大的功能和灵活的可定制性。作为一款jQuery插件，它不仅设计美观，还能生成语义化代码，并提供了丰富的API接口，是网页开发者的理想选择。 [![Trumbowyg编辑器界面展示](https://raw.gitcode.com/gh_mirrors/tr/Trumbowyg/r
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值