tinymce 富文本编辑器 java Struts2 从前台到后台数据之间的传递 显示在前台 生成环境具体使用

近段时间在研究tinymce 富文本编辑器,网上找不到符合自己实际情况的代码,现在将实现的整个过程把代码记录在此

第一步:下载tinymce 下载方法很多,网上都可以搜到具体的教程,这里强烈推荐官网下载。

第二步:将本网站是如何使用的网站代码贴出来

AddArticle.jsp 新增文章的前台界面代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>写文章-白雨青工作站</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="小说,我有一剑,Java,HTML,Java小工具,白雨青工作站,http://www.byqws.com:8080/byqws">
	<meta name="description" content="小说,我有一剑,Java,HTML,Java小工具,白雨青工作站,http://www.byqws.com:8080/byqws/">
	<!---->
	
	<link rel="shortcut icon" href="img/byqws-apple-touch-icon-16X16.png" />
	<link rel="apple-touch-icon" href="img/byqws-apple-touch-icon-57X57.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="img/byqws-apple-touch-icon-72X72.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="img/byqws-apple-touch-icon-144X144.png" />
	
	<link rel="stylesheet" type="text/css" href="Background/css/addArticle.css">
	
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
	
	
	<script src="Background/js/tinymce/tinymce.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="Background/js/tinymce/langs/zh-Hans.js" type="text/javascript" charset="utf-8"></script> <!--汉化-->
	
	<script type="text/javascript" src="Background/js/AddArticle.js"></script>
	<script type="text/javascript" src="Background/js/mytinymce.js"></script>
	<script type="text/javascript" src="Background/js/uploadImg.js"></script>
	
  </head>
  
  <body>
  <div class='main'>
	<div class='title'>
		<label >添加一篇文章</label>
	</div>
	
	
	
	<div class='FTitle_div'>
		<input id="FTitle" class='FTitle' placeholder = '请输入标题'></input>
	</div>
	
	<div class='FAbstract_div'>
		<input id="FAbstract" class='FAbstract' placeholder = '请输入摘要'></input>
	</div>
	<div class='content_div'>
		<textarea id="content" class='content'></textarea>
	</div>
	<div class="FCover">封面图片</div>
	<div class="upload-piclist">
		
       	<div class="upload-file">
           <input type="file" id="file" accept="image/*" multiple onchange="imgChange()"/>
       	</div>
    </div>
	<input id="submitbutton" class='submitbutton' type = 'button' value = '提交'></input>
</div>
  </body>
</html>

引入初始化的tinymce代码

<script type="text/javascript" src="Background/js/mytinymce.js"></script>

mytinymce.js

tinymce.init({
        selector: '#content',
		width:'100%',
		height:500,
		language:'zh-Hans',
		
		/**/
		plugins: [
        'advlist autolink link image lists charmap print preview hr anchor pagebreak',
        'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
        'table emoticons template paste help codesample'
        ],
        toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ' +
        'bullist numlist outdent indent | link image | codesample | print preview media fullpage | ' +
        'forecolor backcolor emoticons | help |uploadimage',
        menu: {
        favs: {title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons'}
        },
        menubar: 'favs file edit view insert format tools table help',
//        object_resizing: false,
        paste_data_images: true,
        relative_urls : false,
        convert_urls: false,
        images_upload_handler: function (file, success, failure) {//关键代码
            var form = new FormData();
//            console.log(blobInfo.filename())
//            console.log(blobInfo.blob())
//            base64
//            console.log(file)
//            console.log(file.filename())
//            console.log(file.base64())
            var condition = {};
//            addJson(condition,"file.fileFileName",blobInfo.filename());
            addJson(condition,"file.base64",file.base64());
//            console.log(condition);
            $.ajax({
                url: 'uploadImage/uploadImage.action' ,
                type: "post",
                data: condition,
//                dataType: 'json',
                async : false,
//                processData: false,
//                contentType: false,
                success: function (data) {
                    console.log("byq"+data);
                    var imgUrl =JSON.parse(data).url;//根据返回值得不同这里要自己定义
                    console.log(imgUrl);
                    success(imgUrl);
                },
                error: function (e) {
                    alert("图片上传失败");
                }
            });
   
        }

        
      });
function addJson(json,prop, val) {
    // 濡傛灉 val 琚拷鐣?
    if(typeof val === "undefined") {
        // 鍒犻櫎灞炴?
//    	console.log('1=');
        delete json[prop];
    }
    else {
        // 娣诲姞 鎴?淇敼
//    	console.log('2=');
    	json[prop] = val;
    }
}

Java Struts2 部分:

UploadImageManagementStruts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
	"http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>

    <constant name="struts.enable.DynamicMethodInvocation" value="false" />
    <constant name="struts.devMode" value="true" />
    
    <package name="uploadImage" namespace="/uploadImage" extends="struts-default">
		
        <action name="uploadImage" class = "com.byqws.blog.action.UploadImageAction" method="uploadImage" >
            <result>     
            </result>
        </action>  
        
    </package>
    

</struts>

UploadImageAction.java

package com.byqws.blog.action;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.byqws.blog.model.Article;
import com.byqws.blog.model.MyFile;
import com.byqws.blog.service.ArticleService;
import com.byqws.blog.service.impl.ArticleServiceImpl;
import com.byqws.story.model.Chapters;
import com.byqws.story.service.ChaptersService;
import com.byqws.story.service.impl.ChaptersServiceImpl;
import com.byqws.story.tools.Base64ToImg;
import com.byqws.story.tools.ReadApplicationProperties;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;

public class UploadImageAction {
	
	private HttpServletResponse response;
	private HttpServletRequest request;
	private static String json;
	private String data = null;
	private MyFile file;
	
//	MyFile file  = new MyFile();
	public String uploadImage(){
		response = ServletActionContext.getResponse();
		request = ServletActionContext.getRequest();
		
		System.out.println("v123vvbyq");
		
		try {
			response.setContentType("text/html;charset=utf-8");
			PrintWriter out = response.getWriter();
			
			System.out.println("file.getFileFileName()="+file.getFileFileName());
			System.out.println("file.getFileContentType()="+file.getFileContentType());
			System.out.println("file.getFile()="+file.getFile());
			System.out.println("file.file.base64()()="+file.getBase64());
//			inf = new Information();
//			data = request.getParameter(data);
//			System.out.println(article.getFTitle());
//			System.out.println(article.getFContent());
//			System.out.println(article.getFAbstract());
//			
//			System.out.println("article.getFCoverBase64()="+article.getFCoverBase64());
//			System.out.println("article.getFCoverBase64()="+article.getFCoverBase64().length());
//			String s = article.getFCoverBase64();
//			System.out.println("s=" + s.replaceAll("\\[\"", ""));
//			ArticleService articleService = new ArticleServiceImpl();
//			
//			article.setFCoverBase64((article.getFCoverBase64().replaceAll("\\[\"", "")).replaceAll("\"\\]", ""));
//			articleService.save(article);
			
			ReadApplicationProperties r = new ReadApplicationProperties();
			Base64ToImg b = new Base64ToImg();
			String url = b.ToImg(file.getBase64(), r.read("articleImgPath")).replaceAll(r.read("articleHtmlPath"),r.read("articleXUNIPath"));
			
//			String url = b.ToImg(file.getBase64(), r.read("articleHtmlPath")).replaceAll(r.read("articleHtmlPath"),"/byqws/blog/");
			
//			String url = b.ToImg(file.getBase64(), r.read("articleHtmlPath"));
			
//			String url = "http://localhost/blog/20230312022158173.png";
			
			
			
			
			json = "{\"success\":\"true\",\"msg\":\"'提交成功!'\",\"url\":\""+url+"\"}";
			//将流打到客户端
			System.out.println("json="+json);
			out.print(json);
			//清空缓存
			out.flush();
			//关闭流
			out.close();
//			System.out.println(iparentId);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}
	public String getData() {
		return data;
	}

	public void setData(String data) {
		this.data = data;
	}
	public MyFile getFile() {
		return file;
	}
	public void setFile(MyFile file) {
		this.file = file;
	}
	
	
	
	
}

MyFile.java

package com.byqws.blog.model;

import java.io.File;

public class MyFile {
	private File file;
	private String fileFileName;
	private String fileContentType;
	private String blobInfo;
	private String base64;
	
	public File getFile() {
		return file;
	}
	public void setFile(File file) {
		this.file = file;
	}
	public String getFileFileName() {
		return fileFileName;
	}
	public void setFileFileName(String fileFileName) {
		this.fileFileName = fileFileName;
	}
	public String getFileContentType() {
		return fileContentType;
	}
	public void setFileContentType(String fileContentType) {
		this.fileContentType = fileContentType;
	}
	public String getBlobInfo() {
		return blobInfo;
	}
	public void setBlobInfo(String blobInfo) {
		this.blobInfo = blobInfo;
	}
	public String getBase64() {
		return base64;
	}
	public void setBase64(String base64) {
		this.base64 = base64;
	}
	
	
}

Base64ToImg.java

其中 :ReadApplicationProperties r = new ReadApplicationProperties();

ReadApplicationProperties 类是用来读取配置文件Properties内容的,相关方法网上也有很多,这里不多写,后期会单独写一篇文章专门讲。

到此所有代码都已就位

现在来看效果图

有问题的请联系我,

QQ:1056900846

微信: