当前位置: 首页 > 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;动态顺序表能够在运行时根据需要动态地分配和释放内存…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

Linux安全加固:从攻防视角构建系统免疫

Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...