百度富文本编辑器UEditor使用简单示例

蔚落 2022-08-21 11:38 405阅读 0赞

HTML代码：

<form id="f_edit" method="post">
    	<input name="id" type="hidden" value="${activityManage.id }">
    	<table>
    		<tr>
    			<td>图片<input type="file" name="file_updateupload" id="file_updateupload" /></td>
    			<td id="updateImage"></td>
    		</tr>
    		<tr>
    			<td>活动内容:</td>
    			<td>
    			
    			<script id="container" name="content" type="text/plain"></script>
    			</td>
    		</tr>
    	</table>
    
    	<p>
    	<input type="submit" value="提交" />  <input type="reset"
    	value="重置" />
    	</p>
    </form>

JS---UEditor:

var updateEditor;
    (function() {
    	UEditor();
    	
    })();
    function UEditor(){
    	if (undefined != ueditor) {
    		ueditor.destroy();
    	}
    	
    	ueditor=UE.getEditor('container', {
    		toolbars: [
    				   ['source', 'undo', 'redo', 'bold','italic','underline','strikethrough',
    					'forecolor','lineheight','paragraph','fontfamily','fontsize','justifyleft','justifyright',
    					'justifycenter','justifyjustify','simpleupload','unlink','link']
    			   ],
    		 initialFrameWidth:600,  //初始化编辑器宽度,默认1000
    		 initialFrameHeight:300,  //初始化编辑器高度,默认320
    		 readonly:true		//一加载即为只读状态--一般不用
    	});
    }

JS---UEditor----文件上传：

function upload(){
    	$("#file_updateupload").uploadify({
    		//上传使用的 Flash
    		'swf' : '/plugin/uploadify/uploadify.swf',
    		//后台处理程序的相对路径。
    		'uploader' : '/ajax/bms/news/upload',
    		'method' : 'get',
    		//是否自动上传
    		'auto' : true,
    		// 按钮的宽度
    		'width' : 60,
    		// 按钮的高度
    		'height' : 23,
    		// 按钮上的文字
    		'buttonText' : "上传",
    		// 按钮的鼠标图标
    		'buttonCursor' : 'hand',
    		// 上传参数名称
    		'fileObjName' : 'Filedata',
    		// 两个配套使用
    		// 扩展名
    		'fileTypeExts' : "*.jpg;*.png",
    		// 文件说明
    		'fileTypeDesc' : "请选择 jpg png 文件",
    		//限制上传文件的大小
    		'fileSizeLimit' : '4000KB',
    		'progressData' : 'speed',
    		 //上传成功
    		'onUploadSuccess':function(file, data, response) {
    			var obj = JSON.parse(data);
    			var newsImage=obj.data;
    			alert(newsImage)
    			alert("修改图片成功");
    			$("#updateImage").append("<label><input type='hidden' name='newsImage' id='newsImage' value="+newsImage+">
    			<img src='"+ImageUrl+"/upload/"+newsImage+"' width='148' height='198' /></label>");
    
    		}
    	});
    }

前后端通信相关的配置：请看配置文件 [config.json][]；位置位于"ueditor/jsp/"文件夹中

ueditor完整配置：请查看配置文件[ueditor.config.js][]；位置位于"ueditor/"文件夹中

[更多关于ueditor][ueditor]

[config.json]: http://download.csdn.net/detail/a491857321/9529523
[ueditor.config.js]: http://download.csdn.net/detail/a491857321/9529519
[ueditor]: http://ueditor.baidu.com/website/

发表评论取消回复

表情：

评论列表（有 0 条评论，405人围观）

还没有评论，来说两句吧...

相关阅读

相关 PHP如何搭建百度Ueditor富文本编辑器

下载UEditor 官网：[下载地址][Link 1] 将下载好的文件解压到thinkphp项目中，本文是解压到PUBLIC目录下并改文件夹名称为ueditor ![20

怼烎@/ 2023年07月11日 11:07/ 0 赞/ 142 阅读

相关使用百度的富文本编辑器UEditor遇到的问题总结

//实例化编辑器到id为 container 的 dom 容器上： var ue = UE.getEditor('container'); //设置编辑器内容： u

墨蓝/ 2022年11月24日 14:06/ 0 赞/ 697 阅读

相关 Vue-cli3中使用百度富文本编辑器ueditor

原文链接：https://blog.csdn.net/fuyuan98520/article/details/110224802 前言：在开发项目由于需求vue自带对编辑

我会带着你远行/ 2022年11月05日 08:36/ 0 赞/ 552 阅读

相关百度富文本编辑器UEditor使用简单示例

HTML代码： <form id="f_edit" method="post"> <input name="id" type="hidden" value=

蔚落/ 2022年08月21日 11:38/ 0 赞/ 406 阅读

相关 ueditor百度文本编辑器

一.从官网上下载完整版和jsp版本地址：http://ueditor.baidu.com/website/download.html 二.将代码部署到实际项目中 1.

川长思鸟来/ 2022年08月12日 16:18/ 0 赞/ 192 阅读

相关使用百度的富文本编辑器UEditor遇到的问题总结

[https://www.cnblogs.com/wsn1203/p/5443047.html][https_www.cnblogs.com_wsn1203_p_5443047

红太狼/ 2022年05月27日 07:08/ 0 赞/ 256 阅读

相关百度富文本编辑器使用小结

转自：[https://blog.csdn.net/ck3345143/article/details/52231540][https_blog.csdn.net_ck3

素颜马尾好姑娘i/ 2022年05月18日 02:07/ 0 赞/ 230 阅读

相关 php如何引入百度Ueditor富文本编辑器

文本编辑器插件内容丰富，比起传统的textarea标签输入要好用很多，看看如何在页面实现引入吧 1.下载适合的资源包（可以去官网下载适合的版本），我是php引入 ![111

谁践踏了优雅/ 2022年04月17日 05:14/ 0 赞/ 303 阅读

相关记录一下.net core使用百度富文本编辑器ueditor

准备工作：先去ueditor官网下载对应的版本。进入ueditr根目录下的net目录，把里面一个config.json文件复制并粘贴到项目的根目录。然后项目还要引入依赖包。下面

水深无声/ 2022年02月12日 17:53/ 0 赞/ 585 阅读

相关 springboot整合ueditor百度富文本编辑器详细教程

作者推荐使用layer编辑器，更加美观，文档地址 [https://www.layui.com/doc/modules/layedit.html][https_www.la

清疚/ 2021年12月16日 06:05/ 0 赞/ 530 阅读