一.頁面引入富文本
前期工作，訪問百度富文本官網(wǎng)下載相應的百度富文本文件，根據(jù)后端用的技術下載相應的版本，建議下載最新版UTF-8版官方下載地址,基于官方從2016年就再也沒有維護,網(wǎng)盤下載地址,上次項目使用自己配置的一套
{A3629CA9-0141-4415-BA7D-E419710DB541}_20191029164048.jpg
將下載好的文件解壓，存放在項目位置下：
如果是在vue腳手架中集成百度富文本框，則將解壓后選取部分文件(jsp文件夾和index.html不要,jsp文件夾是后臺的東西)新建文件夾UE，放在其下面，之后放在與index.html平行下的static文件夾下地方如圖所示：
修改UE下ueditor.config.js中的路徑
在項目main.js中引入UE下的js
基本配置完成,寫編輯器組件
<template>
<div>
<script id="editor" type="text/plain"></script>
</div>
</template>
<script>
export default {
name: 'UE',
data() {
return {
editor: null
};
},
props: {
defaultMsg: {
type: String
},
config: {
type: Object
}
},
mounted() {
const _this = this;
this.editor = UE.getEditor('editor', this.config); // 初始化UE
this.editor.addListener('ready', function() {
_this.editor.setContent(_this.defaultMsg); // 確保UE加載完成后，放入內(nèi)容。
});
},
methods: {
// 獲取內(nèi)容方法,獲取的html內(nèi)容
getUEContent() {
return this.editor.getContent();
},
// 獲取純文本內(nèi)容方法
getUEContentTxt() {
return this.editor.getContentTxt();
}
setUEContent(value) {
// 注入內(nèi)容的方法
//先清空
this.editor.execCommand('cleardoc');
//寫入html方法
this.editor.execCommand('inserthtml', value);
//直接寫入內(nèi)容
// this.editor.setContent(value);
},
// 清空內(nèi)容的方法
deleteUEContent() {
this.editor.execCommand('cleardoc');
},
// 判斷編輯器是否為空
isEmit() {
return this.editor.hasContents();
},
// 查看編輯器源碼和可視化
queryCommandState() {
return this.editor.queryCommandState('source');
},
// 切換編輯器源碼和可視化
changeCommandState() {
this.editor.execCommand('source');
}
},
destroyed() {
this.editor.destroy();
}
};
</script>
此時已經(jīng)是一個普通Vue組件,在模塊中使用，剛封裝好的百度富文本編輯器.vue組件,引入路徑看你存放組件的位置，注冊后使用
調(diào)用 ue組件里的方法滿足要求,無非就是獲取內(nèi)容和放入內(nèi)容(放入內(nèi)容編輯時回顯用的)
后臺處理富文本的請求(上傳和下載)
請求路勁==>>ueditor.config.js 下配置的serverUrl: '/uentor/uentorupload.do',
引入后臺java代碼,這里分為兩個部分 config.json配置文件和部分java類
注意:配置文件名必須是config.json,并且文件夾名必須叫conf,源碼加載配置是這么定義的(當然如果去改源碼,當我沒說);
以上是對百度富文本引入的簡單步驟
***項目中常見問題總結
1):富文本回顯的問題
如果向數(shù)據(jù)庫中添加帶有特殊的字符,回顯會有問題,比如加入html代碼,一般情況下項目工程會配置過濾器,使得一些支付被轉意,安全起見往后臺傳值以前用 base64 加密==>>Base64.encode(value),使用前解密==>>Base64.decode(value);
2):上傳圖片的問題
上傳主要就是配置問題,ueditor所有的請求都是一個 ueditor.config.js中的serverurl就是請求地址(統(tǒng)一請求地址),后臺接口一定保持一致,接口有固定寫法 代碼如下
@RequestMapping(value="/ueditor")
public class UploadController {
@RequestMapping(value="/ueditorupload.do")
public void upload(HttpServletRequest request, HttpServletResponse response) throws
UnsupportedEncodingException {
//編碼
request.setCharacterEncoding( "utf-8" );
//設置響應頭信息
response.setHeader("Content-Type" , "text/html");
//得到服務器路徑 webapp目錄
String rootPath = request.getSession().getServletContext().getRealPath("/");
try {
// ueditor自己的類和方法,剩下的自己去處理,
//兩個參數(shù):1.請求;2:roopath路徑用來加載config.json配置文件,config.json配置了上傳下載的信息;
String exec = new ActionEnter(request, rootPath).exec();
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}配置不成功的話 會報 "后臺配置錯誤,上傳插件無法加載"
config.json里有對上傳的文件具體設置,注釋基本很詳細,這里就不寫了
有一個"沒有找到請求資源的錯誤",主要是 ueditor與springMvc的上傳解析器 CommonsMultipartResolver 沖突
注釋掉顯然不現(xiàn)實, 但是我們可以重寫 CommonsMultipartResolver的 isMultipart(); 代碼如下
import javax.servlet.http.HttpServletRequest;import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
public class CommonsMultipartResolerOverride extends CommonsMultipartResolver {
@Override
public boolean isMultipart(HttpServletRequest request) {
String url = request.getRequestURI();
//紅色的值要與請求接口的值相同,這是手動過濾,也就是如果是ueditor的請求就不走springmvc的上傳了
if(url!=null && url.contains("/ueditorupload.do")) {
return false;
}else {
return ServletFileUpload.isMultipartContent(request);
}
}
}然后 將springMvc.xml里配置上傳解析器的地方的實體類換成 自己重寫的這個方法類
"沒有權限"錯誤,主要是上傳文件重名的問題 隨機生成文件名即可(config.json里面有配置生成文件名的地方)
3):限制上傳圖片的最大顯示寬度 自適應編輯器窗口大小 百分比
ueditor.all.js 搜索
// 設置默認字體和字號
'body{margin:8px;font-family:sans-serif;font-size:16px;}' +//設置圖片最大寬度，以免撐出滾動條
'img{max-width:90%;}'+ //這是加入的行*********
// 設置段落間距
'p{margin:5px 0;}</style>' +
設置 圖片的 最大回顯寬度 這里直接在 html 中添加 style 屬性
1):單圖片上傳
在 ueditor.all.js 搜索 loader.setAttribute('alt', data.original || '');在這里添加 loader.setAttribute('style', 'max-width:90%');
2):多圖片上傳
在 ueditor.all.js 搜索 <img src
第三處 是拼接前端 html 的字符串在 style后面 加上 max-width:90% ;也就是 ' style="max-width:90% ' +
4):上傳視頻 文檔里無法預覽的問題
問題1 ==>> 編輯器沒有開放視頻插入的代碼的白名單，所以會被過xss濾掉
解決: 首先在ueditor.config.js文件里增加xss過濾白名單,一般源文件中就有
在這里的末尾加上下列在插入視頻中使用的代碼：
收索: // xss過濾白名單source: ['src', 'type'],
embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align','style', 'wmode', 'play','autoplay','loop', 'menu', 'allowscriptaccess','allowfullscreen', 'controls', 'preload'],
iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align','frameborder', 'allowfullscreen']
另外由于插入的代碼不是視頻，那么首先要找到插入編輯器代碼的代碼，位置在ueditor.all.js里，
找到以下代碼:
修改前:html.push(creatInsertStr(vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'image')修改后:html.push(creatInsertStr(vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'embed')將image改為嵌入視頻url的embed標簽;
//改完這里后會發(fā)現(xiàn)插入視頻地址后，雖然編輯器可以看到視頻了，但是插入視頻的窗口不能關閉了
之所以會出現(xiàn)這個問題是因為改成embed后，下面的代碼無法正常找到image標簽及其里面的屬性導致的，這里只要注釋以下內(nèi)容就可以解決插入視頻框無法自動關閉的問題。
在ueditor.all.js收索: me.addListener('delkeyup',function(){
注釋掉此方法
接著往下看，除開這個bug外，還有新的問題，下面我們來看看點擊切換源碼再回到編輯器預覽里會發(fā)生什么。
去源碼里已經(jīng)視頻代碼不會被過濾了，但是回到編輯器卻是一片空白
問題出在源碼段代碼里：type="application/x-shockwave-flash" class="edui-faked-video"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type規(guī)定了flash格式，我插入的是flash所以沒問題，pluginspage是提供用戶flash下載地址的（有些用戶沒有安裝
flash插件或者沒有及時更新），那么問題是在class里了，因為ediu-faked-video會告訴編輯器這不是一個視頻，
因此會刪除embed里的src的鏈接，因此回到編輯器預覽會出現(xiàn)白板。
接著改
下面是判斷如果點擊視頻上傳需要導入的是embed代碼的情況，之前是image，我們改成了embed，因此這里switch得到的
是embed的代碼模板，在這里我們?nèi)サ粢韵麓a:
type="application/x-shockwave-flash" class="' + classname + '"
pluginspage="http://www.macromedia.com/go/getflashplayer"' +'
修改前:
case 'embed':
str = '<embed type="application/x-shockwave-flash" class="' + classname +
'"pluginspage="http://www.macromedia.com/go/getflashplayer"' +
'"src="' + utils.html(url) + '" width="' + width + '" height="' + height +
'"' + (align ? ' style="float:' + align + '"' : '') +
' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';修改后:
case 'embed':
str = '<embed src="' + utils.html(url) + '" width="' + width + '" height="' + height + '"'
+ (align ? ' style="float:' + align + '"' : '') + ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';
更改好后，刷新一下，我們再來看看插入視頻后進入源碼然后再回到編輯器預覽狀態(tài)下已經(jīng)沒有問題了，可以正常預覽
另外上傳視頻也可以正常運作
第二種方案:首先 把上面的修改成embed的地方 改成video, 然后修改ueditor.all.js 里面
case 'video' 處 也就是上面修改 case 'embed' 的下面 拼接html代碼處 video閉合標簽前面
隨便加上一些內(nèi)容 比如:'視屏' 這在渲染處是不顯示的;
以上解決了 拿不到視屏 html源碼的問題
5):自定義上傳路徑
關于自定義上傳文件路徑配置問題，在源碼中上傳的類是BinaryUploader.class，
String physicalPath = (String)conf.get("rootPath") + savePath; 就是上傳圖片最后的路徑。
其中rootPath是根路徑，savePath是自定義的圖片保存路徑（imagePathFormat對應的值），
在源碼中rootPath已被限制為讀取config.json的項目路勁，所以在這里需要改變?yōu)樽远x的路徑。
其中ConfigManager類中第146，147這里傳入的路徑字符串，只需將這改為
conf.put("savePath", savePath);
conf.put("rootPath", "自定義的根路徑");
這樣就OK了,
自定義上傳路徑,所有的上傳文件就不在工程目錄下了,回顯就不能正常回顯了,只能通過請求下載的方式
修改config.json配置文件中的 圖片訪問路徑前綴: "imageUrlPrefix": "/file/download.do?fileName=", /* 圖片訪問路徑前綴 */
通過拼接字符串發(fā)送下載請求,下載到頁面;
6):修改 超鏈接 a 標簽里的內(nèi)容
有時候默認內(nèi)容不能滿足我們的需求可能會對鏈接修改一些內(nèi)容,下面 就帶你去簡單修改一下 ueditor生成超鏈接的源碼
1、打開ueditor編輯器目錄“ueditor\dialogs\link”里的link.html文件；
2、找到以下3處代碼并編輯 參考鏈接
這里我們只是添加 a標簽里面的 內(nèi)容 所以直接修改 第三處位置 就Ok;
var obj = {
//原有的 a 標簽的屬性
'href' : href,
'target' :G('title').value.replace(/^\s+|\s+$/g, ''),
//自己添加的屬性(我這里只是添加一個class供選擇添加樣式使用)
'class':"link-video"
'屬性名':"屬性值"
};
浪客行1213的簡書
