202206-20|KindEditor上传图片及使用

举报
写程序的小王叔叔 发表于 2022/06/21 12:12:05 2022/06/21
【摘要】 主页:小王叔叔的博客支持:点赞👍关注✔️收藏💖编辑器使用1)官网:在线HTML编辑器2)使用 如果在编辑器中,某个功能不想让他显示,则可在kindeditor-all.js中的K.options = { items (通常在263行处)}  删除相应的功能名称(在浏览器中,用F12找相应功能的data-name)即可       参考文档:https://blog.csdn.net/qq...

主页小王叔叔的博客

支持:点赞👍关注✔️收藏💖


编辑器使用

1)官网:在线HTML编辑器

2)使用

 如果在编辑器中,某个功能不想让他显示,则可在kindeditor-all.js中的K.options = { items (通常在263行处)}  删除相应的功能名称(在浏览器中,用F12找相应功能的data-name)即可
       参考文档:https://blog.csdn.net/qq_30258957/article/details/78762464
       官       网:http://kindeditor.net/doc.php     

<!-- 添加文本编辑器插件 -->
<script charset="utf-8" type="text/javascript"  src="/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" type="text/javascript"  src="/kindeditor/lang/zh-CN.js"></script>
	
<textarea 
id="editor_id" 
name="content" 
style="width:700px;height:200px;visibility:hidden;">
</textarea>

	  <script type="text/javascript">
    
		var editor1;
    	/**页面初始化 创建文本编辑器工具**/
	    KindEditor.ready(function(K) {
		    	editor1 = K.create('textarea[name="content"]', {//定义属性
					cssPath : '../plugins/code/prettify.css',
					uploadJson : '../jsp/upload_json.jsp',
					fileManagerJson : '../jsp/file_manager_json.jsp',
					allowFileManager : true
				});
				prettyPrint();
		});
	    
	    
	    function submitProduct(){
	    	
	    	/**取出文本编辑器的内容**/
	    	editor1.sync();//同步编辑器文件
	    	var productName = $("#productName").val();
	    	var productPrice = $("#productPrice").val();
	    	var productReward = $("#productReward").val();
	    	var productStock = $("#productStock").val();
	    	var productImgUrl = $("#productImgUrl").val();
	    	var productImgList = $("#productImgList").val();
	    	var productIntroduce = document.getElementById('editor_id').value; //获取编辑器普通jquery取值即可
	  
			     $.ajax({			
			    			type: 'get',			
			    			url: '/admin/saveProduct',	
			    			dataType : 'json', 
			    			data: {
				    				'productName':productName,'productPrice':productPrice,'productReward':productReward,'productStock':productStock,
				    				'productImgUrl':productImgUrl,'productImgList':productImgList,'productIntroduce':productIntroduce
			    				},
			    			success : function(data){		
			    					if(data.errorCode == "0"){		
				    					alert("添加成功");	
				    					location.href="/admin/loginProductList/list";
				    					return;		  		
			    					}		  		
			    					if(data.errorCode == "1"){		
				    					alert("添加失败");		
				    					return;		  			
			    					}	
									
									var productIntroduce = data.productIntroduce;
									KindEditor.html("#editor_id", productIntroduce);//给编辑器赋值
			    				
			    			},		 
		    				error:function(){	
		    					alert("system error");		
		    				}			
			    });	
	   
	    } 
	    
    </script>

CREATE TABLE `drp_product` (
		  `product_id` bigint(20) NOT NULL AUTO_INCREMENT,
		  `product_name` varchar(255) DEFAULT NULL,
		  `product_style` varchar(255) DEFAULT NULL,
		  `product_address` varchar(255) DEFAULT NULL,
		  `product_price` double DEFAULT NULL,
		  `product_stock` int(11) DEFAULT NULL,
		  `product_introduce` text,
		  `create_date` datetime DEFAULT NULL,
		  `product_img_url` varchar(255) DEFAULT NULL,
		  `product_reward` decimal(19,2) DEFAULT NULL,
		  `product_sales` int(11) NOT NULL,
		  `product_type` int(11) NOT NULL,
		  `favorable_price` decimal(19,2) DEFAULT NULL,
		  `product_details` varchar(255) DEFAULT NULL,
		  `product_keyword` varchar(255) DEFAULT NULL,
		  `product_priority` varchar(255) DEFAULT NULL,
		  `number_of_goods` int(11) NOT NULL,
		  `shopping_car_id` bigint(20) DEFAULT NULL,
		  `product_img_list` varchar(255) DEFAULT NULL,
		  `product_style_detailed` varchar(255) DEFAULT NULL,
		  PRIMARY KEY (`product_id`)
	) ENGINE=InnoDB AUTO_INCREMENT=75 DEFAULT CHARSET=utf8;
/**
		如果在编辑器中,某个功能不想让他显示,则可在kindeditor-all.js中的K.options = { items (通常在263行处)}
		
		删除相应的功能名称(在浏览器中,用F12找相应功能的data-name)即可
		
		参考文档:https://blog.csdn.net/qq_30258957/article/details/78762464
		
					http://kindeditor.net/doc.php 官网
		**/
		

html代码

<!-- 添加文本编辑器插件 -->
		<script charset="utf-8" type="text/javascript"  src="/kindeditor/kindeditor-all.js"></script>
		<script charset="utf-8" type="text/javascript"  src="/kindeditor/lang/zh-CN.js"></script>
		<script src="/kindeditor/themes/default/default.css"  type="text/css" rel="stylesheet"></script>
	
		<!--编写文本区域-->
		<textarea id="editor_id" name="content" style="width:700px;height:200px;visibility:hidden;"></textarea>

<script type="text/javascript">
    
		 var editor1;
    	/**页面初始化 创建文本编辑器工具**/
	    KindEditor.ready(function(K) {
	    	//定义生成编辑器的文本类型
		    	editor1 = K.create('textarea[name="content"]', {
					cssPath : '../plugins/code/prettify.css',
					allowImageUpload: true, //上传图片框本地上传的功能,false为隐藏,默认为true
					allowImageRemote : false, //上传图片框网络图片的功能,false为隐藏,默认为true
					formatUploadUrl:false,
				    uploadJson : '/kindEditor/upLoad',//文件上传请求后台路径
	                allowFileManager : true,
	                afterCreate : function() {
	                    var self = this;
	                    K.ctrl(document, 13, function() {
	                        self.sync();
	                        document.forms['example'].submit();
	                    });
	                    K.ctrl(self.edit.doc, 13, function() {
	                        self.sync();
	                        document.forms['example'].submit();
	                    });
	                }  
		    	});
			 	prettyPrint();
		});
</script>

上传图片的工具类:

@WebServlet("/kindEditor/upLoad")
public class KindEditorUpload extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置Response响应的编码
        resp.setContentType("text/html; charset=UTF-8");
        //获取一个Response的Write对象
        PrintWriter writer = resp.getWriter();
        //文件保存目录路径
        String savePath = "D:\\images/";
        String saveUrl = savePath;
        //定义允许上传的文件扩展名
        HashMap<String, String> extMap = new HashMap<String, String>();
        extMap.put("image", "gif,jpg,jpeg,png,bmp");
       // extMap.put("flash", "swf,flv");
        //extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
       // extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");
        //最大文件大小
        long maxSize = 1000000;
        String dirName = req.getParameter("dir");
        if (dirName == null) {
            dirName = "image";
        }
        if (!extMap.containsKey(dirName)) {
            writer.println(getError("目录名不正确。"));
            return;
        }

        //创建文件夹
        savePath += dirName + "/";
        saveUrl += dirName + "/";
        File saveDirFile = new File(savePath);
        if (!saveDirFile.exists()) {
            saveDirFile.mkdirs();
        }
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
        String ymd = sdf.format(new Date());
        savePath += ymd + "/";
        saveUrl += ymd + "/";
        File dirFile = new File(savePath);
        if (!dirFile.exists()) {
            dirFile.mkdirs();
        }

        FileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(factory);
        upload.setHeaderEncoding("UTF-8");
        List items = null;
        try {
            items = upload.parseRequest(req);
        } catch (FileUploadException e) {
            e.printStackTrace();
        }
        Iterator itr = items.iterator();
        while (itr.hasNext()) {
            FileItem item = (FileItem) itr.next();
            String fileName = item.getName();
            long fileSize = item.getSize();
            if (!item.isFormField()) {
                //检查文件大小
                if (item.getSize() > maxSize) {
                    writer.println(getError("上传文件大小超过限制。"));
                    return;
                }
                //检查扩展名
                String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
                if (!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)) {
                    writer.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));
                    return;
                }

                SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
                String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
                try {
                    File uploadedFile = new File(savePath, newFileName);
                    item.write(uploadedFile);
                } catch (Exception e) {
                    writer.println(getError("上传文件失败。"));
                    return;
                }
                String url = "http://localhost:8080/images/image/"+ ymd + "/" + newFileName;//显示图片的主要路径
                JSONObject obj = new JSONObject();
                obj.put("error", 0);
                obj.put("url",url);
                writer.println(obj.toString());
            }
        }


        //将writer对象中的内容输出
        writer.flush();
        //关闭writer对象
        writer.close();
    }


    //一个私有的方法,用于响应错误信息
    private String getError(String message) {
        JSONObject obj = new JSONObject();
        obj.put("error", 1);
        obj.put("message", message);
        return obj.toString();
    }

}

显示图片工具类:

@Configuration
public class WebAppConfig extends WebMvcConfigurerAdapter {
	 
	 @Value("${cbs.imagesPath}")
	    private String mImagesPath;
	    //访问图片方法
	    @Override
	    public void addResourceHandlers(ResourceHandlerRegistry registry) {
	        if(mImagesPath.equals("") || mImagesPath.equals("${cbs.imagesPath}")){
	            String imagesPath = WebAppConfig.class.getClassLoader().getResource("").getPath();
	            if(imagesPath.indexOf(".jar")>0){
	                imagesPath = imagesPath.substring(0, imagesPath.indexOf(".jar"));
	            }else if(imagesPath.indexOf("classes")>0){
	                imagesPath = "file:"+imagesPath.substring(0, imagesPath.indexOf("classes"));
	            }
	            imagesPath = imagesPath.substring(0, imagesPath.lastIndexOf("/"))+"/images/";
	            mImagesPath = imagesPath;
	        }
	        LoggerFactory.getLogger(WebAppConfig.class).info("imagesPath="+mImagesPath);
	        registry.addResourceHandler("/images/**").addResourceLocations(mImagesPath);//访问图片的路径
	        super.addResourceHandlers(registry);
	    }
 
}

页面显示文本编辑内容:

<span id="productIntroduceId"></span> <!--将要显示文本编辑器内容部分-->
<input id="productIntroduce" th:value="${product.productIntroduce}" hidden="hidden"><!--获取文本编辑器内容部分-->

<script type="text/javascript">
	 window.onload=function () {//将文本编辑器内容 用js进行替换显示
		 document.getElementById("productIntroduceId").innerHTML=$("#productIntroduce").val();
	}
</script>

效果图:

 

以上是自己整理的,并测试过,可以直接用


转载声明:本文为博主原创文章,未经博主允许不得转载

⚠️注意 ~

💯本期内容就结束了,如果内容有误,麻烦大家评论区指出

如有疑问❓可以在评论区💬或私信💬,尽我最大能力🏃‍♀️帮大家解决👨‍🏫!

如果我的文章有帮助,欢迎点赞+关注✔️鼓励博主🏃,您的鼓励是我分享的动力🏃🏃🏃~

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。