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

javaweb以html方式集成富文本编辑器TinyMce

前言:
单一的批量图片上传按钮,禁用tinymce编辑器,但是还可以操作图片编辑;
多元化格式的富文本编辑要求;
采用tinymce实现。

附:
tinymce中文手册网站:
http://tinymce.ax-z.cn/download-all.php
tinymce下载地址:
社区版: http://download.tiny.cloud/tinymce/community/tinymce_5.10.0.zip
开发版:http://download.tiny.cloud/tinymce/community/tinymce_5.10.0_dev.zip
auxipimage批量图片插件下载地址:
百度风盘链接:链接: https://pan.baidu.com/s/1w4RE_an7Xi8KLLAVm6kf4A 提取码: ivjj
参考项目代码:
https://gitee.com/tonyjoba_deen/ssm_-shiro_-tiny-mce/tree/feature

效果
请添加图片描述

核心代码:(引入了网上大佬们无私奉献的tinymce批量上传图片插件,感谢,注意插件的plugin.js或者plugin.min.js里面的base路径需要根据实际的项目目录更改。另外,我这里时集成了EasyUi,通过dialog弹框的形式使用富文本编辑器,部分的css样式不能加载,只能采用skin_url的形式。如果有更好的操作,欢迎评论发言)。


<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@ include file="../../page/common/head.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title><style lang="scss">/* 在el-dialog中使用tinymce  z-index被遮挡 */.tox-editor-container{z-index: 9999 !important;}.tox-tinymce-aux {z-index: 9999 !important;}/*隐藏文本输入框*/.tox-sidebar-wrap{}</style><script src="${ctx}/tinymce/tinymce.min.js"></script><script src="${ctx}/tinymce/themes/silver/theme.min.js"></script><script src="${ctx}/tinymce/models/dom/model.min.js"></script><script src="${ctx}/tinymce/icons/default/icons.min.js"></script><script src="${ctx}/tinymce/plugins/image/plugin.min.js"></script><script src="${ctx}/tinymce/plugins/axupimgs/plugin.min.js"></script><script src="${ctx}/tinymce/plugins/quickbars/plugin.min.js"></script><script src="${ctx}/tinymce/langs/zh-Hans.js"></script><script type="text/javascript">/*获取每个tinyEditor的输入值,tinymce.get('my-tinymce-editor').getContent()*/tinymce.init({selector: '#myfeel',skin: 'oxide-dark',language:'zh-Hans',/*inline:true,toolbar_persist:true,*/placeholder:"再次输入感受内容!",skin_url:'${ctx}/tinymce/skins/ui/oxide-dark',content_css:'${ctx}/tinymce/skins/content/default/content.min.css',statusbar:true,/*隐藏状态栏,就是下方的tinmce的官网链接行*/promotion: false,/*去除upgrade标识*/branding:false,/*去掉广告标tiny*/plugins: "image axupimgs",toolbar: "undo redo newdocument bold italic underline strikethrough subscript superscript | removeformat | selectall cut copy paste | image axupimgs",images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.withCredentials = false;xhr.open('POST', 'uploadFile');xhr.upload.onprogress = (e) => {progress(e.loaded / e.total * 100);};xhr.onload = () => {if (xhr.status === 403) {reject({ message: 'HTTP Error: ' + xhr.status, remove: true });return;}if (xhr.status < 200 || xhr.status >= 300) {reject('HTTP Error: ' + xhr.status);return;}const json = JSON.parse(xhr.responseText);if (!json || typeof json.location != 'string') {reject('Invalid JSON: ' + xhr.responseText);return;}resolve(json.location);};xhr.onerror = () => {reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);};const formData = new FormData();formData.append('file', blobInfo.blob(), blobInfo.filename());xhr.send(formData);})});</script><script>tinymce.init({selector: '#mytinydemo',language:'zh-Hans',height:200,placeholder:"点击上方按钮上传图片,上传成功后点击保存至此处!",skin_url:'${ctx}/tinymce/skins/ui/oxide',content_css:'${ctx}/tinymce/skins/content/default/content.min.css',// ...其他TinyMCE配置plugins: "image axupimgs",toolbar: "axupimgs",menubar:false, /*隐藏菜单栏*/statusbar:true,/*隐藏状态栏,就是下方的tinmce的官网链接行*/promotion: false,/*去除upgrade标识*/branding:false,/*去掉广告标tiny*///images_upload_url: 'uploadFile',//指定一个接受上传文件的后端处理程序地址//如果返回的地址是相对路径,还有一个参数images_upload_base_path,可以给相对路径指定它所相对的基本路径// images_upload_base_path: '/demo',images_upload_handler: function (blobInfo, succFun, failFun) {var xhr, formData;var file = blobInfo.blob();//转化为易于理解的file对象xhr = new XMLHttpRequest();xhr.withCredentials = false;xhr.open('POST', 'uploadFile');xhr.onload = function() {//上传完成回调var json;if (xhr.status != 200) {failFun('HTTP Error: ' + xhr.status);return;}json = JSON.parse(xhr.responseText);if (!json || typeof json.location != 'string') {failFun('Invalid JSON: ' + xhr.responseText);return;}succFun(json.location);};formData = new FormData();formData.append('file', file, file.name );//此处与源文档不一样xhr.send(formData);},//  添加`keydown`和`keydown`事件,实现编辑器的禁用setup: function (ed) {var tempVal = "";/*禁用编辑按钮,实现只负责文件图片的处理*/ed.on('keydown', function (e) {if(e.key=='Backspace' || e.key=="Delete"){}else{e.preventDefault();return false;}});ed.on('keyup', function (e) {if(e.key=='backspace'){}else{e.preventDefault();return false;}});ed.on('copy',function(e){return false;});ed.on('cut',function(e){return false;});ed.on('paste',function(e){return false;});ed.on('compositionstart',function(e){tempVal = tinymce.get('mytinydemo').getContent();});ed.on('compositionend',function(e){tinymce.get('mytinydemo').setContent(tempVal);});},file_picker_callback: function(callback, value, meta) {//文件上传,注意插件是link//文件分类var filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';//后端接收上传文件的地址var upurl='uploadFile';//为不同插件指定文件类型及后端地址switch(meta.filetype){case 'image':filetype='.jpg, .jpeg, .png, .gif';upurl='upimg.php';break;case 'media':filetype='.mp3, .mp4';upurl='upfile.php';break;case 'file':default:}//模拟出一个input用于添加本地文件var input = document.createElement('input');input.setAttribute('type', 'file');input.setAttribute('accept', filetype);input.click();input.onchange = function() {var file = this.files[0];var xhr, formData;console.log(file.name);xhr = new XMLHttpRequest();xhr.withCredentials = false;xhr.open('POST', upurl);xhr.onload = function() {var json;if (xhr.status != 200) {failure('HTTP Error: ' + xhr.status);return;}json = JSON.parse(xhr.responseText);if (!json || typeof json.location != 'string') {failure('Invalid JSON: ' + xhr.responseText);return;}callback(json.location);};formData = new FormData();formData.append('file', file, file.name );xhr.send(formData);}}});$("#feel_edit_submit").click(function(){$('#feel_edit_form').form('submit', {url:"user/submitUserInfo123123123223123",onSubmit: function(){$.messager.progress();	// 显示进度条var isValid = $(this).form('validate');if (!isValid){$.messager.progress('close');	// 如果表单是无效的则隐藏进度条}return isValid;	// 返回false终止表单提交},success:function(data){$.messager.progress('close');	// 如果提交成功则隐藏进度条if(data==1){$.messager.show({title:'系统消息',msg:'修改成功',timeout:3000,showType:'slide'});//弹出框关闭$("#role_dialog").dialog("close");$('#role_table').datagrid('reload');}else{$.messager.alert("系统信息","修改失败,请重新修改");}}});})</script>
</head>
<body><div  style="padding:10px;">
论坛管理 >> 文章管理
<hr/>
<form action="" method="post" id="feel_edit_form">
<input type="hidden" name="id"/>
<table width="800px"><tr><td>标题:</td><td><input type="text" name="title"/> </td></tr><tr><td>图片:</td><td><div  id="mytinydemo" ></div></td></tr><tr><td>正文:</td><td><textarea id="myfeel" type="text" name="remark"/> </td></tr><tr><td colspan="2"><a id="feel_edit_submit" href="#" class="easyui-linkbutton"data-options="iconCls:'icon-search'">发布</a></td></tr>
</table>
</form>
</div>
</body>
</html>

相关文章:

javaweb以html方式集成富文本编辑器TinyMce

前言&#xff1a; 单一的批量图片上传按钮&#xff0c;禁用tinymce编辑器&#xff0c;但是还可以操作图片编辑&#xff1b; 多元化格式的富文本编辑要求&#xff1b; 采用tinymce实现。 附&#xff1a; tinymce中文手册网站&#xff1a; http://tinymce.ax-z.cn/download-all.…...

大学生福音!用GPT-4o几分钟内轻松读懂一篇论文!

文章目录 一、读论文智能体&#xff1a;PDFAI操作指导阅读论文上传论文并分析进一步研究导出可用代码 二、感受 一、读论文智能体&#xff1a;PDFAI 操作指导 ChatGPT 4o国内直接访问地址&#xff1a;https://share.xuzhugpt.cloud/ 上plus的车 输入购买的授权码即可。 默认…...

微信小程序昵称获取

<view class"shouquan_list"> <label>昵称</label> <input type"nickname" value"{{nichengshoudong}}" bindinput"bindKeyInputnicheng" placeholder"请输入昵称" placeholder-style"color:r…...

SQL进阶技巧:如何找出开会时间有重叠的会议室?| 时间区间重叠问题

目录 0 场景描述 1 数据准备 2 问题分析 方法1&#xff1a;利用 lateral view posexplode()函数将表展开成时间明细表 方法2&#xff1a;利用数学区间讨论思想求解 3 小结 如果觉得本文对你有帮助&#xff0c;想进一步学习SQL语言这门艺术的&#xff0c;那么不妨也可以选…...

Educational Codeforces Round 170 (Rated for Div. 2) D 题解

to sum of:前三题都是究极水题&#xff0c;补补D题吧&#xff0c;dp太钛肽弱了.. Problem - D - Codeforces--Attribute Checks 思路:首先得坚定地确定m^2,然后剩下的复杂度思考怎么优化.. key:每一个0只考虑影响到下一个0之间的数字!! 定义dp[i][j]为,在有i个能力点时.点了…...

NeRS: Neural Reflectance Surfaces for Sparse-view 3D Reconstruction in the Wild

阅读记录&#xff1a; 1. 2.优点1&#xff1a;我们的方法仅依赖于近似的相机位姿估计和粗略的类别级形状模板。 3.我们的关键见解是&#xff0c;我们可以强制执行基于表面的 3D 表示&#xff0c;而不是允许广泛用于体积表示的无约束密度。重要的是&#xff0c;这允许依赖于视…...

【Linux】su 命令的运行原理以及su切换用户默认继承环境配置

一、su 命令的运行原理 原理解释&#xff1a; su&#xff08;switch user&#xff09;命令用于在Linux和Unix系统中切换用户身份。 当你执行 su 命令时&#xff0c;系统会创建一个新的进程&#xff0c;通常是一个新的 shell 实例。这个新进程会以目标用户的身份运行&#…...

libtorch环境配置

环境配置 建议在linux上配置对应环境 可以在autoDL上租一个服务器来搭建&#xff0c;带有pytorch的环境 https://www.autodl.com/home 我自己的win电脑上安装了pytorch&#xff0c;但是配置时会报错&#xff0c;于是到ubuntu上配置 电脑上装有pytorch的就不需要再下载libtorc…...

【C语言】define宏定义与const修饰限定

两者都是将字符替换为相应的数值。 区别在于&#xff1a; #define宏定义纸进行字符串替换&#xff0c;无类型检查 const修饰符限定变量为只读变量 #include <stdio.h> #define PI 3.14159 //符号常量 /* 功能&#xff1a;宏定义与const修饰符限定 时间&#xff1a;20…...

基于深度学习的基于视觉的机器人导航

基于深度学习的视觉机器人导航是一种通过深度学习算法结合视觉感知系统&#xff08;如摄像头、LiDAR等&#xff09;实现机器人在复杂环境中的自主导航的技术。这种方法使机器人能够像人类一样使用视觉信息感知环境、规划路径&#xff0c;并避开障碍物。与传统的导航方法相比&am…...

苍穹外卖学习笔记(二十三)

拒单 OrderController /*** 拒单*/PutMapping("/rejection")ApiOperation("拒单")public Result rejection(RequestBody OrdersRejectionDTO ordersRejectionDTO) throws Exception {orderService.rejection(ordersRejectionDTO);return Result.success(…...

vLLM 推理引擎性能分析基准测试

文章目录 分析步骤案例案例描述测试数据集 原始数据〇轮测试&#xff08;enable-64&#xff09;一轮测试&#xff08;enable-128&#xff09;二轮测试&#xff08;enable-256&#xff09;三轮测试&#xff08;enable-512&#xff09;四轮测试&#xff08;enable-2048&#xff0…...

图像增强论文精读笔记-Kindling the Darkness: A Practical Low-light Image Enhancer(KinD)

1. 论文基本信息 论文标题&#xff1a;Kindling the Darkness: A Practical Low-light Image Enhancer 作者&#xff1a;Yonghua Zhang等 发表时间和期刊&#xff1a;2019&#xff1b;ACM MM 论文链接&#xff1a;https://arxiv.org/abs/1905.04161 2. 研究背景和动机 现有…...

HALCON数据结构之字符串

1.1 String字符串的基本操作 *将数字转换为字符串或修改字符串 *tuple_string (T, Format, String) //HALCON语句 *String: T $ Format //赋值操作*Format string 由以下四个部分组成&#xff1a; *<flags><field width>.<precision><conversion 字符&g…...

string模拟优化和vector使用

1.简单介绍编码 utf_8变长编码&#xff0c;常用英文字母使用1个字节&#xff0c;对于其它语言可能2到14&#xff0c;大部分编码是utf_8&#xff0c;char_16是编码为utf_16, char_32是编码为utf_32&#xff0c; wchar_t是宽字符的&#xff0c; utf_16是大小为俩个字节&a…...

Go-知识依赖GOPATH

Go-知识依赖GOPATH 1. 介绍2. GOROOT 是什么3. GOPATH 是什么4. 依赖查找5. GOPATH 的缺点1. 介绍 早期Go语言单纯地使用GOPATH管理依赖,但是GOPATH不方便管理依赖的多个版本,后来增加了vendor,允许把项目依赖 连同项目源码一同管理。Go 1.11 引入了全新的依赖管理工具 Go …...

PyTorch 中 reshape 函数用法示例

PyTorch 中 reshape 函数用法示例 在 PyTorch 中&#xff0c;reshape 函数用于改变张量的形状&#xff0c;而不改变其中的数据。下面是一些关于 reshape 函数的常见用法示例。 基本语法 torch.reshape(input, shape) # input: 要重塑的张量。 # shape: 目标形状&#xff0…...

安全光幕的工作原理及应用场景

安全光幕是一种利用光电传感技术来检测和响应危险情况的先进设备。其工作原理基于红外线传感器&#xff0c;通过发射红外光束并接收反射或透射光束来形成一道无形的屏障。以下是对安全光幕工作原理和应用场景的介绍&#xff1a; 工作原理 发射器与接收器&#xff1a;安全光幕通…...

《深度学习》OpenCV LBPH算法人脸识别 原理及案例解析

目录 一、LBPH算法 1、概念 2、实现步骤 3、方法 1&#xff09;步骤1 • 缩放 • 旋转和平移 2&#xff09;步骤2 二、案例实现 1、完整代码 1&#xff09;图像内容&#xff1a; 2&#xff09;运行结果&#xff1a; 一、LBPH算法 1、概念 在OpenCV中&#xff0c;L…...

数据结构之顺序表——动态顺序表(C语言版)

静态顺序表我们已经实现完毕了&#xff0c;下来我们实现一下动态顺序表 静态链接&#xff1a;数据结构之顺序表——动态顺序表(C语言版) 首先来了解一下两个顺序表的差别 一、内存管理的灵活性 动态分配与释放&#xff1a;动态顺序表能够在运行时根据需要动态地分配和释放内存…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...