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>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

空间解析几何 3：空间点到线段和平面的距离【附MATLAB代码】

空间解析几何 3：空间点到线段和平面的距离【附MATLAB代码】

目录 空间中点到线段的距离 空间中点到平面的投影和距离 matlab代码 空间中点到线段的距离 空间中点到平面的投影和距离 matlab代码 function [dis,P2,t] point2Line (A1,B1,C1) %求空间一点到一线段的最短距离 %[dis,P2,Q2]pointSegmentDistance(A,B,C) %A B为线段首末端…
阅读更多...
使用LlamaFactory进行模型微调

使用LlamaFactory进行模型微调

使用LlamaFactory进行模型微调 简介 论文地址&#xff1a;https://arxiv.org/pdf/2403.13372 仓库地址&#xff1a;https://github.com/hiyouga/LLaMA-Factory/tree/main 名词解释 1. 预训练 (Pre-training, PT) 预训练是指模型在大规模无监督数据集上进行初步训练的过程…
阅读更多...
最强 OpenAI o1 逻辑推理正确率仅 50%！清华、智谱推出「大模型逻辑推理新基准」

最强 OpenAI o1 逻辑推理正确率仅 50%！清华、智谱推出「大模型逻辑推理新基准」

9.11 和 9.9 哪个大&#xff1f; 这一连人类幼儿园儿童都能回答的问题&#xff0c;曾经&#xff08;至今&#xff09;难倒了众多大语言模型&#xff08;LLM&#xff09;。 然而&#xff0c;要想达到通用人工智能&#xff08;AGI&#xff09;的水平&#xff0c;LLM 不仅要完成“…
阅读更多...
居民小区的有序充电策略及解决方案

居民小区的有序充电策略及解决方案

0引言 全球经济增长导致化石能源过度消耗&#xff0c;加剧环境污染。电动汽车因其环保优势迅速崛起&#xff0c;预计到2030年中国电动汽车保有量将达到6000万辆。这有助于减少化石能源依赖&#xff0c;推广绿色出行&#xff0c;但也对电网稳定性构成挑战。因此&#xff0c;研究…
阅读更多...
2.1 HTML5 - Canvas标签

2.1 HTML5 - Canvas标签

文章目录 引言Canvas标签概述定义实例&#xff1a;创建画布 理解Canvas坐标系概述实例&#xff1a;获取Canvas坐标 获取Canvas环境上下文概述实例&#xff1a;获取Canvas上下文设置渐变色效果 结语 引言 大家好&#xff0c;今天我们要一起探索HTML5中一个非常有趣且强大的特性…
阅读更多...
001 Hadoop安装、Spring整合测试

001 Hadoop安装、Spring整合测试

Hadoop安装、整合测试 文章目录 Hadoop安装、整合测试1.简介1.优点2.组成 2.安装1.安装jdk&#xff08;如已安装可跳过&#xff09;2.安装hadoop1.安装2. 修改配置文件core-site.xml3. 修改配置文件hdfs-site.xml4.启动hadoop5.启动yarn6.执行jps查看7.相关端口及配置位置8.访问…
阅读更多...
Python数学难题：科拉兹猜想（又称为 3x+1 猜想、角谷猜想、哈塞猜想、冰雹猜想、乌拉姆猜想或叙拉古猜想）

Python数学难题：科拉兹猜想（又称为 3x+1 猜想、角谷猜想、哈塞猜想、冰雹猜想、乌拉姆猜想或叙拉古猜想）

Python数学难题&#xff1a;科拉兹猜想&#xff08;又称为 3x1 猜想、角谷猜想、哈塞猜想、冰雹猜想、乌拉姆猜想或叙拉古猜想&#xff09; 科拉兹猜想&#xff0c;又称为 3x1 猜想、角谷猜想、哈塞猜想、冰雹猜想、乌拉姆猜想或叙拉古猜想&#xff0c;是一个与自然数相关的猜…
阅读更多...
查找占用特定端口程序，并杀死

查找占用特定端口程序，并杀死

windows 在 Windows 上查找和结束占用特定端口&#xff08;如 9003&#xff09;的程序&#xff0c;你可以使用以下步骤&#xff1a; 步骤 1&#xff1a;找到占用端口的进程 ID (PID) 打开命令提示符&#xff08;按 Win R&#xff0c;输入 cmd&#xff0c;然后按回车&#x…
阅读更多...
技术框架官方写法

技术框架官方写法

知识背景&#xff1a; 在做汇报工作或者撰写简历的时候需要用到&#xff0c;希望对大家有帮助 总体介绍&#xff1a; Java: 始终保持 "Java" 的"J"大写&#xff0c;因为这是Oracle Corporation注册的商标。Spring Framework: 通常称其为 "Spring&q…
阅读更多...
【React】事件绑定的方式

【React】事件绑定的方式

1. 内联函数绑定 这是最简单直接的方式&#xff0c;即在 JSX 语法中直接传递一个内联函数。这种方式每次渲染时都会创建新的函数实例&#xff0c;可能会导致不必要的性能开销。 class MyComponent extends React.Component {render() {return (<button onClick{() > th…
阅读更多...
python中不变的数据类型有哪些

python中不变的数据类型有哪些

在Python中&#xff0c;不可变&#xff08;immutable&#xff09;数据类型是指一旦创建了这些类型的对象后&#xff0c;就不能改变其值。Python中的不可变数据类型包括以下几种&#xff1a; 数字 (int, float, complex): 这些类型的数值一旦创建就不能更改。例如&#xff0c;如…
阅读更多...
速盾：高防服务器防火墙的特性是什么？

速盾：高防服务器防火墙的特性是什么？

高防服务器防火墙是一种专业的网络安全设备&#xff0c;用于保护服务器免受各种网络攻击的侵害。它具有许多特性&#xff0c;以确保服务器的安全性和可靠性。 第一个特性是入侵检测系统&#xff08;IDS&#xff09;。高防服务器防火墙可以监视服务器上的网络流量&#xff0c;并…
阅读更多...
使用Python实现深度学习模型：智能产品设计与开发

使用Python实现深度学习模型：智能产品设计与开发

在智能产品设计与开发领域，深度学习模型的应用越来越广泛。本文将介绍如何使用Python构建一个简单的深度学习模型，并将其应用于智能产品的设计与开发。为了使内容尽可能通俗易懂，我们将以图像分类为例，详细讲解每一步骤。 1. 深度学习基础 深度学习是一种基于人工神经网络…
阅读更多...
Spring Boot中使用MyBatis-Plus和MyBatis拦截器来实现对带有特定注解的字段进行AES加密。

Spring Boot中使用MyBatis-Plus和MyBatis拦截器来实现对带有特定注解的字段进行AES加密。

1. 添加依赖 首先&#xff0c;在pom.xml文件中添加必要的依赖项&#xff1a; xml 深色版本 <dependencies> <!-- Spring Boot Starter Web --> <dependency> <groupId>org.springframework.boot</groupId> <artifac…
阅读更多...
三级等保对postgresql的安全要求配置

三级等保对postgresql的安全要求配置

密码策略 select * from pg_user select * from pg_settings; show password_encryption; show shared_preload_libraries; alter username postgres valid until 2024-05-11;日志审计 select name,setting from pg_settings where namelogging_collector or namelog_line_pr…
阅读更多...
无人机航拍视频帧处理与图像拼接算法

无人机航拍视频帧处理与图像拼接算法

无人机航拍视频帧处理与图像拼接算法 1. 视频帧截取与缩放 在图像预处理阶段，算法首先逐帧地从视频中提取出各个帧。 对于每一帧图像，算法会执行缩放操作，以确保所有帧都具有一致的尺寸，便于后续处理。 2. 图像配准 在图像配准阶段，算法采用SIFT（尺度不变特征变换）算…
阅读更多...
Flutter 与 React Native - 详细深入对比分析（2024 年）

Flutter 与 React Native - 详细深入对比分析（2024 年）

超长内容预警&#xff0c;建议收藏后阅。 Flutter 和 React Native 是跨平台应用程序开发的两个领先工具。了解它们的差异以及各自的最佳用例。 什么是Flutter&#xff1f; Flutter 是 Google 于 2018 年发布的用户界面 (UI) 软件开发套件。Flutter 可让您为多种平台和操作系统…
阅读更多...
基于ffmpeg实现多路rtsp拉流解码为yuv420p

基于ffmpeg实现多路rtsp拉流解码为yuv420p

一&#xff1a;前言 FFmpeg 是一个非常强大的多媒体框架&#xff0c;它可以用来处理视频和音频数据。它包括了命令行工具 ffmpeg、ffplay、ffprobe 等&#xff0c;以及一套可以用来开发多媒体应用的库&#xff08;libavcodec、libavformat、libavutil、libswscale 等&#xff0…
阅读更多...
在线深度学习：爱奇艺效果广告分钟级模型优化

在线深度学习：爱奇艺效果广告分钟级模型优化

01# 背景 在效果广告投放场景中&#xff0c;媒体侧需要准确衡量每次请求的价值&#xff0c;模型预估值在广告竞价中扮演着核心角色。模型预估精度的提升&#xff0c;是改善媒体侧变现效率、提升广告收益的核心技术驱动力。 此前&#xff0c;爱奇艺效果广告预估模型为小时级模型…
阅读更多...
10.15学习

10.15学习

1.程序开发的步骤 定义程序的目标→设计程序→编写代码&#xff08;需要选择语言&#xff0c;一种语言对应一种编译器&#xff09;→编译→运行程序→测试和调试程序→维护和修改程序 2.ANSI/ISO C标准 1989年ANSI批准通过&#xff0c;1990年ISO批准通过&#xff0c;因此被称…
阅读更多...
最新文章

Copyright @ 2022~2023