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

news2025/1/15 8:33:39

前言：
单一的批量图片上传按钮，禁用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
参考项目代码：
后续更新，有兴趣的小伙伴可以私聊留email。

效果
请添加图片描述

核心代码：（引入了网上大佬们无私奉献的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.coloradmin.cn/o/2214812.html

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

相关文章

Jmeter监控服务器性能

Jmeter监控服务器性能

目录 ServerAgent 安装 打开Jmeter ServerAgent 在Jmeter上监控服务器的性能比如CPU&#xff0c;内存等我们需要用到ServerAgent&#xff0c;这里可以下载我分享 ServerAgent-2.2.3.zip 链接: https://pan.baidu.com/s/1oZKsJGnrZx3iyt15DP1IYA?pwdedhs 提取码: edhs 安装…
阅读更多...
考研C语言程序设计_编程题相关(持续更新)

考研C语言程序设计_编程题相关(持续更新)

目录 零、说明一、程序设计经典编程题(C语言实现)T1 求1~100的奇数T2 求n!T3 求1!2!3!...10!T4 在一个有序数组中查找具体的某个数字n(二分查找)T5 编写代码&#xff0c;演示多个字符从两端移动&#xff0c;向中间汇聚T6 模拟用户登录(三次机会)T7 输入三个数 并从大到小输出T8…
阅读更多...
实战篇：（四）Vue2 + Three.js 创建可交互的360度全景视图，可控制旋转、缩放完整代码

实战篇：（四）Vue2 + Three.js 创建可交互的360度全景视图，可控制旋转、缩放完整代码

Vue2 Three.js 创建可交互的360度全景视图&#xff0c;可控制旋转、缩放 引言 在现代网页开发中&#xff0c;三维图形技术已经成为提升用户体验的重要工具。本文将展示如何使用 Three.js 创建一个简单的可交互360度全景视图。通过这一项目&#xff0c;你将能够学习到基本的场…
阅读更多...
使用 KVM 在 Xubuntu 上创建 Windows 10 虚拟机

使用 KVM 在 Xubuntu 上创建 Windows 10 虚拟机

目录 前言说明注意准备 iso官网思博主(嘻嘻)拖动到虚拟机里面启动 virt-manager创建虚拟机选择本地安装介质选择 iso配置 内存 和 CPU选择 创建的虚拟机 保存的位置启动虚拟机看到熟悉的 Win10界面点击现在安装点击我没有产品密钥选择 Win10 专业工作站版勾选接受许可条款选择自…
阅读更多...
grafana 配置prometheus

grafana 配置prometheus

安装prometheus 【linux】麒麟v10安装prometheus监控&#xff08;ARM架构&#xff09;-CSDN博客 登录grafana 访问地址&#xff1a;http://ip:port/login 可以进行 Grafana 相关设置&#xff08;默认账号密码均为 admin&#xff09;。 输入账户密码 添加 Prometheus 数据源…
阅读更多...
文件上传漏洞-绕过js验证

文件上传漏洞-绕过js验证

1.漏洞原理&#xff1a; Web应用系统虽然对用户上传的文件进行了校验&#xff0c;但是校验是通过前端javascript代码完成的。由于恶意用户可以对前端javascript进行修改或者是通过抓包软件篡改上传的文件&#xff0c;就会导致基于js的校验很容易被绕过。 2.判断页面是否存在前…
阅读更多...
SpringBoot下的智能健康推荐引擎

SpringBoot下的智能健康推荐引擎

3系统分析 3.1可行性分析 通过对本基于智能推荐的卫生健康系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本基于智能推荐的卫生健康系统采用SSM框架&#…
阅读更多...
穷举vs暴搜vs深搜vs回溯vs剪枝（一）

穷举vs暴搜vs深搜vs回溯vs剪枝（一）

文章目录 全排列子集找出所有子集的异或总和再求和全排列 II电话号码的字母组合 全排列 题目&#xff1a;全排列 思路 通过深度优先搜索的方式&#xff0c;不断枚举每个数在当前位置的可能性&#xff0c;然后回溯到上一个状态&#xff0c;直到枚举完所有可能性得到正确的结果 r…
阅读更多...
FastApi SQLAlchemy SQLite

FastApi SQLAlchemy SQLite

FastApi fastapi是一个用于构建API 的现代、快速&#xff08;高性能&#xff09;的web框架&#xff0c;它是建立在Starlette和Pydantic基础上的。 Pydantic是一个基于Python类型提示来定义数据验证、序列化和文档的库&#xff0c;Starlette是一种轻量级的ASGI框架/工具包&…
阅读更多...
哪些因素会影响 FMEA 实施的效果？

哪些因素会影响 FMEA 实施的效果？

在探讨哪些因素会影响FMEA&#xff08;潜在失效模式及后果分析&#xff09;实施效果的问题时&#xff0c;我们不得不深入剖析FMEA的核心理念、实施流程及其在企业质量管理中的应用实践。FMEA作为一种系统性的预防性工具&#xff0c;旨在识别产品或过程中潜在的失效模式及其影响…
阅读更多...
C++，STL 030（24.10.14）

C++，STL 030（24.10.14）

stack容器&#xff08;栈&#xff09;的基本概念&#xff1a; 1.stack容器是一种先进后出的数据结构&#xff0c;它只有一个出口。 2.图例&#xff1a; 注意&#xff1a; (1)进栈顺序&#xff1a;a1 -> a2 -> a3 -> a4 -> a5 (2)出栈顺序&#xff1a;a5 -> …
阅读更多...
SVN——常见问题

SVN——常见问题

基本操作 检出 提交 更新 显示日志 撤销本地修改 撤销已提交内容 恢复到指定版本 添加忽略 修改同一行 修改二进制文件
阅读更多...
理解智能合约：区块链在Web3中的运作机制

理解智能合约：区块链在Web3中的运作机制

随着区块链技术的不断发展&#xff0c;“智能合约”这一概念变得越来越重要。智能合约是区块链应用的核心之一&#xff0c;正在推动Web3的发展&#xff0c;为数字世界带来了前所未有的自动化和信任机制。本文将深入探讨智能合约的基本原理、运作机制&#xff0c;以及它在Web3生…
阅读更多...
C++核心编程和桌面应用开发 第十天（模版 类模板）

C++核心编程和桌面应用开发 第十天（模版 类模板）

目录 1.1函数模板语法 1.2函数模板的使用方式 1.2.1自动类型推导 1.2.2显示指定类型 1.3普通函数与模板函数 1.3.1区别 1.3.2调用规则 1.4模板的局限性 1.4.1模板的具体化 1.5类模板 1.5.1基本语法 1.5.2类模板对象做函数参数 1.5.3类模板与继承 1.5.4类模板成员…
阅读更多...
STM32-----I2C

STM32-----I2C

1.基本原理&#xff1a; 上图是I2C的总线图和通讯协议图&#xff08;就是I2C是怎么实现设备之间读写数据的&#xff09; 下面主要介绍通讯协议的每一步&#xff1a; 1.发出开始信号: 一开始都为高电平为空闲状态。当SCL为高电平时&#xff0c;主机将SDA拉低即为发出开始信号&…
阅读更多...
hadoop集群搭建-安装虚拟机

hadoop集群搭建-安装虚拟机

2.1 安装虚拟机 在本地搭建集群就需要这么几个事 装虚拟机 安装环境 配置集群 启动 这篇博客主要就是讲的装虚拟机这一个环节的 装虚拟机就是和组装一台现实中的电脑一样&#xff0c;首先来说就是要有硬件&#xff0c;就是组装硬件&#xff0c;然后就是装系统&#xff…
阅读更多...
SpringCloud学习记录|day5

SpringCloud学习记录|day5

学习材料 2024最新SpringCloud微服务开发与实战&#xff0c;java黑马商城项目微服务实战开发&#xff08;涵盖MybatisPlus、Docker、MQ、ES、Redis高级等&#xff09; 目前讲过的 可惜&#xff0c;自己基本没理解。 雪崩问题 1.服务保护&#xff1a; 请求限流&#xff0c;线…
阅读更多...
量化择时技术指标详解及实战应用（一）

量化择时技术指标详解及实战应用（一）

🌟作者简介：热爱数据分析，学习Python、Stata、SPSS等统计语言的小高同学~🍊个人主页：小高要坚强的博客🍓当前专栏：《Python之量化交易》🍎本文内容：量化择时技术指标详解及实战应用（一）🌸作者“三要”格言：
阅读更多...
从零开始使用最新版Paddle【PaddleOCR系列】——文本检测和识别模型的环境安装与基础使用

从零开始使用最新版Paddle【PaddleOCR系列】——文本检测和识别模型的环境安装与基础使用

目录 一、环境安装配置 1.基本环境配置&#xff1a;torch与paddlepaddle安装 2.专精任务配置&#xff1a;PaddleX与PaddleOCR插件安装 3.测试数据配置&#xff1a;测试数据集下载与验证 二、模型基础使用 1.使用OCR模型预测 ​ 2.使用Detect检测模型 ​ 3.使用…
阅读更多...
【论文笔记】Fine-tuned CLIP Models are Efficient Video Learners

【论文笔记】Fine-tuned CLIP Models are Efficient Video Learners

&#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&#xff0c;为生民立命&#xff0c;为往圣继绝学&#xff0c;为万世开太平。 基本信息 标题: Fine-tuned CLIP Models a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023