Spring Boot集成 Ueditor

1.Github链接:

git clone https://github.com/codingapi/ueditor.git

cd ueditor-core

mvn clean install

2.在目录ueditor-core下输入mvn clean install，引入maven坐标：

<dependency>

<groupId> com.codingapi </groupId> 

<artifactId>  ueditor-core </artifactId> 

<version> 1.0.0 </version>

</dependency>

3.在项目resource下引入config.json

图片访问的路径前缀（imageUrlPrefix）要改为项目前缀比如:"http://xxx.com/xxx"

图片保存位置（imagePathFormat）改成"upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"

4.引入js文件（ueditor的js文件是放在了static/ueditor/目录下面）

uedtior/ueditor.config.js

uedtior/ueditor.all.min.js

5.引入富文本编辑器

<script id="editor"></script>

Ueidtor

6.ueditor方法单独放在ueditor.js

//实例化编辑器

//建议使用工厂方法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("已清空草稿箱")

}