使用富文本编辑器wangEditor完成图片文件的上传

最新推荐文章于 2024-05-21 10:05:48 发布

大房子爱生活

最新推荐文章于 2024-05-21 10:05:48 发布

阅读量5.3k

点赞数 5

分类专栏：开发文章标签： wangEditor 富文本编辑器图片上传

本文链接：https://blog.csdn.net/weixin_43863007/article/details/88720132

版权

项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等，在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存，这里wangEditor也可以参考wangEditor使用文档

1.引入相关的wangEditor.js和jquery文件：

<head>
<script type="text/javascript" src="/static/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="/static/js/wangEditor.js"></script>
</head>

2.在jsp页面创建富文本编辑器：

使用一个div标签来代表编辑器输入框，在script中给这个div输入框添加编辑器模型
提交编辑的内容需要使用textarea标签，它是将输入内容转换成html代码然后提交，form包裹起来
script中先创建一个wangEditor对象，在最后用 editor.create()进行编辑器内容添加
div是无法提交数据的，如果要提交输入的内容还需要把div中的数据同步到textarea标签中，使用onchange事件实现同步更新到 textarea

<body>
	<form action="EditorResult.jsp" method="post">
		<!-- 添加一个div用来显示富文本编辑器 -->
		<div id="editor">

最低0.47元/天解锁文章

大房子爱生活

关注

5
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
使用富文本编辑器wangEditor完成图片文件的上传

项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等，在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存，这里wangEditor也可以参考wangEditor使用文档1.引入相关的wangEditor.js和jquery文件：<head><script type="text/javascript" src="/stati...
复制链接

扫一扫