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中不变的数据类型有哪些

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

在Python中&#xff0c;不可变&#xff08;immutable&#xff09;数据类型是指一旦创建了这些类型的对象后&#xff0c;就不能改变其值。Python中的不可变数据类型包括以下几种&#xff1a; 数字 (int, float, complex): 这些类型的数值一旦创建就不能更改。例如&#xff0c;如…
阅读更多...
Flutter 与 React Native - 详细深入对比分析（2024 年）

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

超长内容预警&#xff0c;建议收藏后阅。 Flutter 和 React Native 是跨平台应用程序开发的两个领先工具。了解它们的差异以及各自的最佳用例。 什么是Flutter&#xff1f; Flutter 是 Google 于 2018 年发布的用户界面 (UI) 软件开发套件。Flutter 可让您为多种平台和操作系统…
阅读更多...
在线深度学习：爱奇艺效果广告分钟级模型优化

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

01# 背景 在效果广告投放场景中&#xff0c;媒体侧需要准确衡量每次请求的价值&#xff0c;模型预估值在广告竞价中扮演着核心角色。模型预估精度的提升&#xff0c;是改善媒体侧变现效率、提升广告收益的核心技术驱动力。 此前&#xff0c;爱奇艺效果广告预估模型为小时级模型…
阅读更多...
构建流媒体管道：利用 Docker 部署 Nginx-RTMP 从 FFmpeg RTMP 推流到 HLS 播放的完整流程

构建流媒体管道：利用 Docker 部署 Nginx-RTMP 从 FFmpeg RTMP 推流到 HLS 播放的完整流程

最近要实现一个类似导播台的功能&#xff0c;于是我先用 FFmpeg 实现一个参考对照的 Demo&#xff0c;我将其整理为一篇文章&#xff0c;方便后续大家或者和自己参考&#xff01; 1、软件工具介绍 本次部署相关软件 / 工具如下&#xff1a; FFmpeg&#xff1a;全称是 Fast Fo…
阅读更多...
软件确认测试内容和方法分享，CMA、CNAS第三方软件检测机构推荐

软件确认测试内容和方法分享，CMA、CNAS第三方软件检测机构推荐

在现代软件开发中&#xff0c;软件确认测试扮演着至关重要的角色。它不仅帮助开发团队识别系统中的缺陷&#xff0c;还确保软件产品符合用户需求和期望。 软件确认测试旨在验证软件系统的性能和功能是否符合设计规格和用户需求。它通常在软件开发的后期进行&#xff0c;以确保…
阅读更多...
火语言RPA流程组件介绍--浏览器上传文件

火语言RPA流程组件介绍--浏览器上传文件

&#x1f6a9;【组件功能】&#xff1a;在浏览器内自动点击上传功能按钮&#xff0c;选择本地文件完成文件网页上传 配置预览 配置说明 目标元素 支持T或# 通过捕获网页元素或填写css,xpath获取网页元素作为操作目标 上传文件路径 支持T或# 默认FLOW输入项 需要上传的文件…
阅读更多...
从零开始构建：Python自定义脚本自动化你的日常任务

从零开始构建：Python自定义脚本自动化你的日常任务

从零开始构建&#xff1a;Python自定义脚本自动化你的日常任务 Python 作为一种简洁且功能强大的编程语言&#xff0c;被广泛应用于各种自动化任务中。通过编写 Python 脚本&#xff0c;你可以轻松地将日常重复性工作自动化&#xff0c;例如文件操作、数据处理、网络爬虫、系统…
阅读更多...
vue3--通用 button 组件实现

vue3--通用 button 组件实现

背景 在日常开发中，我们一般都是利用一些诸如：element-ui、element-plus、ant-design等组件库去做我们的页面或者系统 这些对于一些后台管理系统来说是最好的选择，因为后台管理系统其实都是大同小异的，包括功能、布局结构等 但是对于前台项目，比如官网、门户网站这些 …
阅读更多...
【Linux驱动开发】嵌入式Linux驱动开发基本步骤，字符驱动和新字符驱动开发入门，点亮LED

【Linux驱动开发】嵌入式Linux驱动开发基本步骤，字符驱动和新字符驱动开发入门，点亮LED

【Linux驱动开发】嵌入式Linux驱动开发基本步骤&#xff0c;字符驱动和新字符驱动开发入门&#xff0c;点亮LED 文章目录 开发环境驱动文件编译驱动安装驱动自动创建设备节点文件 驱动开发驱动设备号地址映射&#xff0c;虚拟内存和硬件内存地址字符驱动旧字符驱动新字符驱动 …
阅读更多...
live2d 实时虚拟数字人形象页面显示，对接大模型

live2d 实时虚拟数字人形象页面显示，对接大模型

live2dSpeek 测试不用gpu可以正常运行 https://github.com/lyz1810/live2dSpeek 运行的话还需要额外下载https://github.com/lyz1810/edge-tts支持语音 ## 运行live2dSpeek >npm install -g http-server >http-server . ## 运行edge-tts python edge-tts.py
阅读更多...
使用 Helsinki-NLP 中英文翻译本地部署 - python 实现

使用 Helsinki-NLP 中英文翻译本地部署 - python 实现

通过 Helsinki-NLP 本地部署中英文翻译功能。该开源模型性价比相对高&#xff0c;资源占用少&#xff0c;对于翻译要求不高的应用场景可以使用&#xff0c;比如单词&#xff0c;简单句式的中英文翻译。 该示例使用的模型下载地址&#xff1a;【免费】Helsinki-NLP中英文翻译本…
阅读更多...
心觉：激活潜意识财富密码：每天一练，财富自动来

心觉：激活潜意识财富密码：每天一练，财富自动来

Hi&#xff0c;我是心觉&#xff0c;与你一起玩转潜意识、脑波音乐和吸引力法则&#xff0c;轻松掌控自己的人生&#xff01; 挑战每日一省写作200/1000天 为什么有些人总是轻而易举地吸引到财富 而你却努力多年仍然徘徊在财务的困境中&#xff1f; 你每天都在辛苦工作&…
阅读更多...
MambaVision原理和源码调测

MambaVision原理和源码调测

Hatamizadeh, Ali and Jan Kautz. “MambaVision: A Hybrid Mamba-Transformer Vision Backbone.” ArXiv abs/2407.08083 (2024): n. pag. 1.模型原理 关键思路&#xff1a; 通过重新设计Mamba的架构和在最终层增加自注意力块&#xff0c;提高了Mamba模型对视觉特征的建模能力…
阅读更多...
C语言练习

C语言练习

题目&#xff1a; 1.运用switch选择语句&#xff0c;编写一段C语言&#xff0c;请根据输入的数字&#xff0c;显示相应的星期日&#xff0c;如果数字所对应的星期日并不存在请显示“抱歉&#xff0c;您输入的内容并不存在。” 分析&#xff1a;1.在本题中&#xff0c;要运用到…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023