700字范文 > maven 整合ueditor富文本编辑器

maven 整合ueditor富文本编辑器

时间：2024-04-03 09:12:32

首先去官网下载ueditor编辑器插件

然后将

中的lib文件夹放到

的lib中

下面上代码

jsp：

这里写代码片<%@page import="com.education.monsUtil"%><%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="/jsp/jstl/core" %><%@ taglib prefix="form" uri="/tags/form" %><c:set var="pageurl" value="${pageContext.request.contextPath}"></c:set><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="${pageurl }/resources/jquery/1.8.3/jquery.js"></script><script type="text/javascript" charset="utf-8" src="${pageurl }/resources/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="${pageurl }/resources/ueditor/ueditor.all.min.js"> </script><script type="text/javascript" charset="utf-8" src="${pageurl }/resources/ueditor/lang/zh-cn/zh-cn.js"></script></head><body><div><h1>完整demo</h1><script id="editor" type="text/plain" style="width:1024px;height:500px;"> </script><button id="savebtn">保存</button></div><div id="allContent"></div><script type="text/javascript">//实例化编辑器//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例var ue = UE.getEditor('editor');/*function isFocus(e){alert(UE.getEditor('editor').isFocus());UE.dom.domUtils.preventDefault(e)}function setblur(e){UE.getEditor('editor').blur();UE.dom.domUtils.preventDefault(e)}function insertHtml() {var value = prompt('插入html代码', '');UE.getEditor('editor').execCommand('insertHtml', value)}function createEditor() {enableBtn();UE.getEditor('editor');}function getAllHtml() {alert(UE.getEditor('editor').getAllHtml())}function getContent() {var arr = [];arr.push("使用editor.getContent()方法可以获得编辑器的内容");arr.push("内容为：");arr.push(UE.getEditor('editor').getContent());alert(arr.join("\n"));}function getPlainTxt() {var arr = [];arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");arr.push("内容为：");arr.push(UE.getEditor('editor').getPlainTxt());alert(arr.join('\n'))}function setContent(isAppendTo) {var arr = [];arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);alert(arr.join("\n"));}function setDisabled() {UE.getEditor('editor').setDisabled('fullscreen');disableBtn("enable");}function setEnabled() {UE.getEditor('editor').setEnabled();enableBtn();}function getText() {//当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容var range = UE.getEditor('editor').selection.getRange();range.select();var txt = UE.getEditor('editor').selection.getText();alert(txt)}function getContentTxt() {var arr = [];arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");arr.push("编辑器的纯文本内容为：");arr.push(UE.getEditor('editor').getContentTxt());alert(arr.join("\n"));}function hasContent() {var arr = [];arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");arr.push("判断结果为：");arr.push(UE.getEditor('editor').hasContents());alert(arr.join("\n"));}function setFocus() {UE.getEditor('editor').focus();}function deleteEditor() {disableBtn();UE.getEditor('editor').destroy();}function disableBtn(str) {var div = document.getElementById('btns');var btns = UE.dom.domUtils.getElementsByTagName(div, "button");for (var i = 0, btn; btn = btns[i++];) {if (btn.id == str) {UE.dom.domUtils.removeAttributes(btn, ["disabled"]);} else {btn.setAttribute("disabled", "true");}}}function enableBtn() {var div = document.getElementById('btns');var btns = UE.dom.domUtils.getElementsByTagName(div, "button");for (var i = 0, btn; btn = btns[i++];) {UE.dom.domUtils.removeAttributes(btn, ["disabled"]);}}function getLocalData () {alert(UE.getEditor('editor').execCommand( "getlocaldata" ));}function clearLocalData () {UE.getEditor('editor').execCommand( "clearlocaldata" );alert("已清空草稿箱")}*/$(function(){$("#savebtn").click(function(){var allContent=UE.getEditor('editor').getContent();if (allContent!=null && allContent!='') {$.post('/getContent',{'textContent':allContent},function(data){if (data.success) {//alert();$("#allContent").html(data.text_content);}},'json');}});});//获取文本内容/*var allContent=UE.getEditor('editor').getAllHtml();alert(allContent);/*$('#savebtn').click(function(){$.post('/getContent',{'textContent':allContent},function(data){if (data.success) {alert(data.text_content);//$('#allcontent').html(data.text_content);}},'json');});*/</script></body></html>

Controller：

package com.education.project.web.controller;import java.util.HashMap;import java.util.Map;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;@Controllerpublic class UeditorController {@RequestMapping("/ueindex")public String ueindex(){return "ueditor/index";}@RequestMapping("/getContent")public @ResponseBody Map<String, Object> getContent(String textContent){Map<String, Object> map=new HashMap<>();map.put("text_content", textContent);map.put("success", true);return map;}}

效果图：

输入内容：

结果：

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。