技术标签: 工具类 前端 javascript 开发语言
这篇文章介绍一下富文本编辑器,包括代码和实现
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"
></script>
<script src="esdk-obs-browserjs.3.22.3.min.js"></script>
</head>
<body>
<!-- 加载编辑器的容器 -->
<div id="div1">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">
const E = window.wangEditor
const editor = new E('#div1')
// 或者 const editor = new E( document.getElementById('div1') )
editor.config.menuTooltipPosition = 'down'
editor.config.showLinkImg = false
editor.config.debug = true;
// 关闭粘贴内容中的样式
editor.config.pasteFilterStyle = false
// 忽略粘贴内容中的图片
editor.config.pasteIgnoreImg = true
// 使用 base64 保存图片
//editor.customConfig.uploadImgShowBase64 = true
// 上传图片到服务器
editor.config.uploadFileName = 'myFile'; //设置文件上传的参数名称
editor.config.uploadImgServer = 'upload.do'; //设置上传文件的服务器路径
editor.config.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
editor.config.customUploadImg = (resultFiles, insertImgFn)=>{
// resultFiles 是 input 中选中的文件列表
// insertImgFn 是获取图片 url 后,插入到编辑器的方法
var bb=resultFiles[0];
//alert(JSON.stringify(bb));
//alert(JSON.stringify(insertImgFn));
// 上传图片,返回结果,将图片插入到编辑器中
// var objname= "deploy/ringpai/upload/dcm/" + 123456789 + ".png";
// obsClient.putObject({
// Bucket : 'ringpai-phis',
// Key : 'objname',
// SourceFile : document.getElementById('input-file').files[0]
//}, function (err, result) {
// if(err){
// console.error('Error-->' + err);
// }else{
// alert(JSON.stringify(result));
// console.log('Status-->' + result.CommonMsg.Status);
// }
//});
//insertImgFn(imgUrl)
}
editor.config.uploadImgHooks = {
before: function(xhr, editor, files) {
alert(JSON.stringify(files));
},
success: function(xhr, editor, result) {
console.log("上传成功");
},
fail: function(xhr, editor, result) {
console.log("上传失败,原因是" + result);
},
error: function(xhr, editor) {
console.log("上传出错");
},
timeout: function(xhr, editor) {
console.log("上传超时");
}
}
editor.create()
var obsClient = new ObsClient({
access_key_id: 'OHECMDFOILGX92Z3XDQC',
secret_access_key: 'OtxQhPAocSx0ZizvXCCMXlWVQ1GVJq2ByPsjBDNd',
server : 'obs.cn-north-4.myhuaweicloud.com'
});
// alert(obsClient);
</script>
</body>
</html>
这里需要引入一个js包,代码中也有体现,样式大概是下面这种
以下的代码只能参考,不能完全粘贴复用,我这里的富文本是一个弹出的界面,只列出富文本的代码,主页面没有列出;可以看代码注释,上传图片视频的接口也会列出,存储文本,回显等接口就不列出了图片和视频的存储是通过华为云进行的,先存到华为云,然后把url存储到数据库中,实现回显
<div class="layui-form"
lay-filter="LAY-notificationMessage-SysMessagepupop-table">
<script type="text/html" id="LAY-notificationMessage-SysMessagepupop-tpl">
<div class="layui-form-item" style="margin-left: 430px;">
<div class="layui-inline">
<label class="layui-form-label" style="width: 150px;">标题</label>
<div class="layui-input-inline">
{
{# if (d.state == "0" || d.state=='') { }}
<input type="text" name="title" placeholder="请输入" autocomplete="off"
value="{
{d.title}}" class="layui-input search-class">
{
{# } else if (d.state === "1") { }}
<input type="text" name="title" placeholder="请输入" autocomplete="off"
value="{
{d.title}}" readonly class="layui-input search-class">
{
{# } else if (d.state === "2") { }}
<input type="text" name="title" placeholder="请输入" autocomplete="off"
value="{
{d.title}}" readonly class="layui-input search-class">
{
{# } }}
</div>
</div>
</div>
<div style="margin-top:10px">
<label class="layui-form-label" style="padding-left: 0px;">发布内容:</label>
<div class="layui-form-item" id="textArea">
</div>
<div class="layui-form-item">
{
{# if (d.state == "0" || d.state =='' || d.state === "2") { }}
<div class="layui-input-inline" style="float: right; width: 260px;">
<input type="submit" lay-submit lay-filter="LAY-notificationMessage-SysMessagepupop-releaseAndSave"
id="LAY-notificationMessage-SysMessagepupop-releaseAndSave" value="保存&发布" class="layui-btn">
<input type="button" lay-submit lay-filter="LAY-notificationMessage-SysMessagepupop-release"
value="保存"
class="layui-btn">
<input type="button" lay-submit lay-filter="LAY-notificationMessage-SysMessagepupop-cancelbtn"
value="取消"
class="layui-btn layui-btn-primary">
</div>
{
{# } else if (d.state === "1") { }}
<div class="layui-input-inline" style="float: right;width: 60px;">
<input type="button" lay-submit lay-filter="LAY-notificationMessage-SysMessagepupop-cancelbtn"
value="关闭"
class="layui-btn layui-btn-primary">
</div>
{
{# } }}
</div>
</div>
</script>
<div id="LAY-notificationMessage-SysMessagepupop-popupRevisitCancelView"></div>
</div>
<script type="text/template" template>
{
{# layui.data.done(d); }}
</script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"
></script>
<script>
layui.data.done = function (d) {
layui.use(['admin', 'view', 'table', 'form', 'layer', 'laydate'], function () {
var admin = layui.admin,
layer = layui.layer,
view = layui.view,
laytpl = layui.laytpl,
$ = layui.$,
form = layui.form;
var organizeId = sessionStorage.getItem('organizeId');
var localData = layui.data(layui.setter.tableName);
const callback = d.params.callback || function () {
};
var detailsflage = d.params.detailsflage
console.log(d, 'd得内容')
var index = d.params.index;
var data = {
"state": d.params.data.state ? d.params.data.state : '',
"title": d.params.data.title ? d.params.data.title : '',
"content": d.params.data.content ? d.params.data.content : '',
}
var view = document.getElementById("LAY-notificationMessage-SysMessagepupop-popupRevisitCancelView");
var tmpl = document.getElementById('LAY-notificationMessage-SysMessagepupop-tpl').innerHTML;
laytpl(tmpl).render(data, function (html) {
view.innerHTML = html;
});
// ————————————富文本编辑器开始————————
setTimeout(function () {
const E = window.wangEditor;
const editor = new E('#textArea');
//重新加载当前页面
// location.reload();
// editor.config.text = d.params.data.content;
var value = '';
var id = d.params.data.id;
// editor.setContent(value);
// 或者 const editor = new E( document.getElementById('textArea') )
// editor.config.insertText(value)
editor.config.menuTooltipPosition = 'down'
editor.config.showLinkImg = false
editor.config.debug = true;
// 关闭粘贴内容中的样式
editor.config.pasteFilterStyle = false
// 忽略粘贴内容中的图片
editor.config.pasteIgnoreImg = true
// 使用 base64 保存图片
// editor.config.uploadImgShowBase64 = true
// 上传图片到服务器
editor.config.uploadFileName = 'file'; //设置文件上传的参数名称
// editor.config.uploadImgServer = ; //设置上传文件的服务器路径
// editor.config.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
//上传图片
editor.config.customUploadImg = function (files, insert) {
// files 是 input 中选中的文件列表
// insert 是获取图片 url 后,插入到编辑器的方法
for (let i = 0; i < files.length; i++) {
var form = new FormData();
form.append("file", files[0]);
$.ajax({
url: ,
type: "post",
processData: false,
contentType: false,
data: form,
dataType: 'json',
success(res) {
// 上传代码返回结果之后,将图片插入到编辑器中
console.log("上传成功");
console.log(res);
insert(res.data);
}
})
}
};
//上传视频
editor.config.customUploadVideo = function (files, obj) {
var form = new FormData();
form.append("file", files[0]);
$.ajax({
url:
type: "POST",
data: form,
dataType: 'json',
async: false,
cache: false,
contentType: false,
processData: false,
success: function (result) {
console.log("上传成功");
console.log(result);
obj(result.data);
}
});
};
console.log('shang')
editor.config.onchange = function (html) {
// 监控变化,同步更新到 textarea
console.log($('#content'), 'sdlfjsldkjfslkdflk')
$('#content').val(html)
};
$.ajax({
url:
type: "POST",
data: form,
dataType: 'json',
async: false,
cache: false,
contentType: false,
processData: false,
success: function (result) {
value = result.data;
}
});
//创建富文本编辑器
editor.create()
editor.txt.html(value);
//初始化时将变量值插入到编辑器文字域中
if (d.params.data.state === "1") {
if (d.params.data.content === '') {
// 禁用
editor.disable();
} else if (d.params.data.content != '') {
// 禁用
editor.disable();
}
}
//点击了保存并发布
form.on('submit(LAY-notificationMessage-SysMessagepupop-releaseAndSave)', function (data) {
//抓取富文本编辑器内容赋值到对应变量中
var content = editor.txt.html();
var field = data.field;
var state = 1;
var flage = 2;
field.content = content;
field.state = state;
field.id = d.params.data.id;
console.log(field)
checkMath(field, flage);
})
//点击了保存
form.on('submit(LAY-notificationMessage-SysMessagepupop-release)', function (data) {
var content = editor.txt.html();
var field = data.field;
console.log(d.params.data.state)
// debugger
field.content = content;
field.state = "0";
var flage = 1;
field.id = d.params.data.id;
console.log(field)
checkMath(field, flage)
})
}, 500)
// ————————————富文本编辑器结束————————
// 启用
// editor.enable();
//点击了取消
form.on('submit(LAY-notificationMessage-SysMessagepupop-cancelbtn)', function (data) {
layer.close(index);
})
function checkMath(field, flage) {
if (field.title === '' || field.title == undefined) {
return layer.msg('消息通知标题不能为空,请添加消息标题');
}
if (field.content === '' || field.content == undefined) {
return layer.msg('消息内容不能为空,请输入消息内容');
}
var loading = layer.msg('处理中', {
icon: 16,
shade: 0.01,
time: 0
});
$.ajax({
url: ,
data: JSON.stringify({
data: {
id: d.params.data.id,
version: d.params.data.version,
state: field.state,
content: field.content,
title: field.title
},
}),
type: 'post',
contentType: 'application/json; charset=utf-8',
success: function (res) {
if (res.code == 0) {
layer.msg("操作成功");
layer.close(loading);
layer.close(index);
callback();
}
},
error: function (resp) {
layer.close(loading);
layer.msg('系统错误,请联系管理员。', {
icon: 5
});
}
});
}
})
}
</script>
<style>
.LAY-custservice-visit-clickMe {
color: #077aff;
padding: 0 5px;
text-decoration: revert;
cursor: pointer;
}
.w-e-text-container {
height: 420px !important; /*!important是重点,因为原div是行内样式设置的高度300px*/
}
</style>
以下是存储到华为云的基本代码,只列出基本的代码,仅供参考
@Override
public String yunUploadFile(MultipartFile file) throws Exception {
String ak = "";
String sk = "";
String endPoint = "";
String bucketName = "";
//设置链接失效时间
// long expireSeconds = 3600 * 24 * 365L;
// 得到文件原名
String fileName = "sysnotifacation/" + file.getOriginalFilename();
InputStream inputStream = file.getInputStream();
//创建云服务器
ObsClient obsClient = new ObsClient(ak, sk, endPoint);
PutObjectResult putObjectResult = obsClient.putObject(bucketName, fileName, inputStream);
int statusCode = putObjectResult.getStatusCode();
String obsurl = putObjectResult.getObjectUrl();
logger.info("-------OBS上传状态为:" + statusCode);
logger.info("-------文件的全路径为:" + obsurl);
inputStream.close();
// // 创建ObsClient实例
// TemporarySignatureRequest request = new TemporarySignatureRequest(HttpMethodEnum.GET, expireSeconds);
// request.setBucketName(bucketName);
// request.setObjectKey(file.getOriginalFilename());
//
// // 设置图片处理参数,对图片依次进行缩放、旋转
// Map<String, Object> queryParams = new HashMap<String, Object>();
// queryParams.put("x-image-process", "image/resize,m_fixed,w_100,h_100/rotate,90");
// request.setQueryParams(queryParams);
//
// // 生成临时授权URL
// TemporarySignatureResponse response = obsClient.createTemporarySignature(request);
// System.out.println(response.getSignedUrl());
obsClient.close();
// return response.getSignedUrl();
return obsurl;
}
定义的参数根据自己华为云的参数来写就行,其他的数据接口不展示
以上的代码仅供参考,不能复用,有问题可以私信一起研究哈
文章浏览阅读381次。【题目描述】纪念“逝去”的Wecing农民JOHN以拥有世界上最健康的奶牛为傲。他知道每种饲料中所包含的牛所需的最低的维他命量是多少。请你帮助农夫喂养他的牛,以保持它们的健康,使喂给牛的饲料的种数最少。给出牛所需的最低的维他命量,输出喂给牛需要哪些种类的饲料,且所需的饲料剂量最少。维他命量以整数表示,每种饲料最多只能对牛使用一次,数据保证存在解。【格式】INPUT...
文章浏览阅读150次。2.1 怎么适配● 在6.0所有权限都需要申请?曰:当然不是。只有属于危险权限的才需要申请。危险权限看下表1-2● 那危险权限也很多啊,也要一个个申请?曰:当然不是。你看看下面的表,都分好组了(9组),对于同一组内的权限,只要有一个被同意,其他的都会被同意。● 谁最帅曰:当然是子信。2.2 列举权限的分组表1-2危险权限分组分组名字分割线PHONEandroid.permission.READ_PHONE_STATEandroid.permission.C_android学习网站
文章浏览阅读280次。本文将对rocktmq-spring-boot的设计实现做一个简单的介绍,读者可以通过本文了解将RocketMQ Client端集成为spring-boot-starter框架的开发细节,然后通过一个简单的示例来一步一步的讲解如何使用这个spring-boot-starter工具包来配置,发送和消费RocketMQ消息。该项目git地址:https://..._springboot rocketmq的原理
文章浏览阅读3.1k次。什么是SSL证书?SSL证书是一种数字签证,遵从SSL协议,对服务器身份和传输的数据进行加密,使访问更加安全可靠。大家现在访问的所有网站都会使用Https协议,其实就是在Http外边加了一个SSL的外壳,使数据更加安全,同时浏览器可以根据SSL证书来显示网站是否安全等等,谷歌,火狐等浏览器都会在网址的前边提醒用户是否是安全连接。安装完SSL证书就可以用Https进行访问网站了。一般生成证书会选..._xampp ssl
文章浏览阅读198次。2019独角兽企业重金招聘Python工程师标准>>> ..._padding只能加给block吗?
文章浏览阅读496次。 听说google earth 没经China gev的允许而拍摄到了其军事基地(据说就是2012中的诺亚方舟的建造基地),所以将google赶出了China。进而屏蔽google的一些重要IP地址。android SDK 的下载地址便成了本次政治博弈的牺牲品。大陆的developer无法通过正常的方式安装SDK,必须要进行代理地址设置才可以。具体状况如下:运行SDK Setup.exe后会..._sdk安装要代理吗
文章浏览阅读1.3w次,点赞2次,收藏2次。一直以来都在使用openstack的swift来做分布式存储,至于为什么使用其来做存储在这里就不说明(网上搜搜其的优点就知道了),随着项目的步步深入,越来越多的问题也随之而来。在项目进行的过程中对swift的理解也越来越多,swift的核心代码行并不是太多,而且也十分容易理解。下面通过实验来理解swift Object的副本修复功能(swift版本为1.9.1)。一. swift的_swift-get-nodes
文章浏览阅读8.2k次,点赞3次,收藏4次。热门精选文章,更多技术干货,微信搜索公众号【爱笑的架构师】,回复数字“666”,获取大量免费技术资料,都是经典中的经典:Mac安装Jmeter倒很简单,一行命令足以“brew install jmeter”但是安装完成后open外部.jmx问件时报错,好在网上遇到这种问题的原因差不多,解决办法也差不多,只是有些不全,所以还是有点懵,把自己的笔记记下来,呈现一份完整版有说找到jmeter.log看看错误原因,但是其实错误原因在你导入时已经看到了,所以看不看没影响,黑色的报错窗口没截,就放一个日_com.thoughtworks.xstream.converters.conversionexception
文章浏览阅读1.5k次。 2.1. 函数68.函数的声明应该是在文件的范围内(R) 例如 void myfunc(void) { extern int call(void); /* 违反规则68 */} 69.函数不能使用可变参数格式的样式(_一个函数在最后应该有一个单一的退出点
文章浏览阅读509次。不同于传统的位于单位组织内部的 IT 基础设施,云计算的诞生给单位组织的 IT 资源供给带来了前所未有的灵活性——可以瞬时增加、转移或者减少计算资源来快速响应动态的资源需求变化,能在几个小时而不是几周内部署一个新的应用来满足业务需求。为了达到这种更具弹性的计算能力,在设计任何云系统时必须要考虑互操作性与可移植性。互操作性规定,IT 系统中应用软件层以下各层采用开放的通用型组件,杜绝使用云服务提供商各自内部的封闭组件。可移植性规定,IT 系统中应用软件层和数据信息层应采用开放的通用数据格式..
文章浏览阅读50次。在译:2. RabbitMQ 之Work Queues (工作队列) 我们学习了如何使用工作队列在多个工作人员之间分配耗时的任务。但是如果我们需要在远程计算机上运行一个函数并等待结果呢?嗯,这是一个不同的故事。此模式通常称为远程过程调用或RPC。在本教程中,我们将使用RabbitMQ构建RPC系统:客户端和可伸缩的RPC服务器。由于我们没有任何值得分发的耗时任务,我们将创建..._fibonaccirpc.call("30");
文章浏览阅读1.6k次。check handle可以被译为检查句柄,如果程序中启动了check handle后,在事件循环中,每当I/O循环退出阻塞的时候都会被执行一遍,它与prepare刚好是相互呼应的,prepare是在I/O循环进入阻塞前,check是在I/O循环退出阻塞后被调用。_libuv example