百度富文字編輯器的多圖上傳單獨放在專案
線上搜尋的功能不是很好用,有待改進!需要改ueditor/php/config.json檔案的路徑
"imagePathFormat": "/upload/{filename}",/* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */
/* {filename} 會替換成原檔名,配置這項需要注意中文亂碼問題 */
/* {rand:6} 會替換成隨機數,後面的數字是隨機數的位數 */
/* {time} 會替換成時間戳 */
/* {yyyy} 會替換成四位年份 */
/* {yy} 會替換成兩位年份 */
/* {mm} 會替換成兩位月份 */
/* {dd} 會替換成兩位日期 */
/* {hh} 會替換成兩位小時 */
/* {ii} 會替換成兩位分鐘 */
/* {ss} 會替換成兩位秒 */
/* 非法字元 \ : * ? " < > | */
/* 具請體看線上文件: fex.baidu.com/ueditor/#use-format_upload_filename */
"imageManagerActionName": "listimage", /* 執行圖片管理的action名稱 */
引入富文字編輯器的js
<script type="text/javascript" src="/dist/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/dist/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="/dist/ueditor/lang/zh-cn/zh-cn.js"></script>
<img src="" id="preview" style='width:100px;height:100px;'>
href="javascript:void(0);" onclick="upImage();">點選上傳</a>
<input class='hidpic' name='hidpic' type="hidden" value=''>
<script type="text/javascript">
var _editor;
$(function() {
if($('#preview').attr('src','')){
$('#preview').css('display','none');
}
//重新例項化一個編輯器,防止在上面的editor編輯器中顯示上傳的圖片或者檔案
_editor = UE.getEditor('upload_ue');
_editor.ready(function () {
//設定編輯器不可用
_editor.setDisabled();
//隱藏編輯器,因為不會用到這個編輯器例項,所以要隱藏
_editor.hide();
//偵聽圖片上傳
_editor.addListener('beforeInsertImage', function (t, arg) {
//將地址賦值給相應的input,只去第一張圖片的路徑
$("#picture").attr("value", arg[0].src);
//圖片預覽
$('#preview').css('display','inline-block');
$("#preview").attr("src", arg[0].src);
$('.hidpic').attr("value", arg[0].src);
// alert($('.hidpic').attr("value"))
})
//偵聽檔案上傳,取上傳檔案列表中第一個上傳的檔案的路徑
_editor.addListener('afterUpfile', function (t, arg) {
$("#file").attr("value", _editor.options.filePath + arg[0].url);
})
});
});
//彈出圖片上傳的對話方塊
function upImage() {
var myImage = _editor.getDialog("insertimage");
myImage.open();
}
//彈出檔案上傳的對話方塊
function upFiles() {
var myFiles = _editor.getDialog("attachment");
myFiles.open();
}
</script>
相關推薦
【ASP.NET】9.解決百度富文字編輯器UEditor往後臺傳資料寫入資料庫時,出現錯誤:檢測到有潛在危險的Request
解決方法:把傳資料的方式換一下,在函式上面新增[ValidateInput(false)],如果是winform頁面,在aspx頁面裡新增ValidateRequest="false"%@ Page V
百度富文字編輯器的多圖上傳單獨放在專案
線上搜尋的功能不是很好用,有待改進!需要改ueditor/php/config.json檔案的路徑 "imagePathFormat": "/upload/{filename}",/* 上傳儲存路
百度富文字編輯器ueditor的使用、非空校驗、引用預定義模板
最近用到百度ueditor編輯器,遇到了很多問題,總結一下ueditor的使用、非空校驗、引用預先寫好的模板。 一、百度ueditor編輯器簡單使用: 1.在百度官網http://ueditor.baidu.com/website/download.html下載壓縮包,解壓之後整體拷
關於百度富文字編輯器整合到springboot的超級詳細總結
參考文章:https://blog.csdn.net/qq_33745799/article/details/70031641 如何整合就不講了,但是有幾點需要注意的,這是我踩過的坑 上面介紹的部落格,第8步,接通http://localhost:8080/config?action=con
laravel-admin整合百度富文字編輯器ueditor
首先要說的是laravel-admin真的是一個非常適合做管理後臺的package。 官方文件有整合wangEditor、ckeditor、PHP editor的示例,如果這幾個編輯器能滿足你的需求可以參照官方文件操作。 ueditor是百度開源的一款編輯器,其中它
ueditor百度富文字編輯器linux下報錯: class path resource [config.json] cannot be resolved to absolute file path because it does not reside in the file system
具體報錯資訊如下 java.io.FileNotFoundException: class path resource [config.json] cannot be resolved to absolute file path because it does not reside in the fi
vue 整合ueditor(百度富文字編輯器)以及使用後端Java上傳圖片到伺服器,特別注意的大坑
1.import 引入ueditor時,在封裝元件中引入,不要在mian.js內引入,在main.js內引入會造成 1.Uncaught SyntaxError: Unexpected token : 這種錯誤,屬於是跨域問題,目前不清楚是什麼原因和原理,
百度富文字編輯器UEditor使用簡單示例
HTML程式碼: <form id="f_edit" method="post"> <input name="id" type="hidden" value="${activit
ssm+maven專案中加入“百度富文字編輯器”,實現圖片上傳
1.在UEditor官方下載編輯器。2.解壓壓縮檔案到資料夾,因為預設的資料夾名字過長,建議重新命名一下資料夾名,我這裡命名為ueditor資料夾中對應的目錄為3.將整個資料夾copy到專案webapp目錄下,(我這裡用的是IDEA,不知道什麼原因直接往IDEA開啟的專案裡拷
【在MVC中應用百度富文字編輯器】
1.下載.NET版本的百度富文字編輯器,前往 下載.NET版本百度富文字框 2.解壓下載的.zip壓縮包,將utf8-.net資料夾名稱改為:ueditor,複製到MVC根目錄下面。結構如下: App_Code 上的檔案是應用程式的原始碼 Config.cs 負
react 0.14中使用百度富文字編輯器
2017年12月01日 15:59:33 lz101281 閱讀數:1293 標籤: ie 8 語言
百度富文字編輯器UMeditor使用
1、外掛官方下載地址:2、解壓下載的外掛包,將裡面的檔案放到web專案的根目錄下面,同時將裡面的JAR複製到lib資料夾下3、將umeditor.config.js、umeditor.mini.js引入到WEB頁面var um = UM.getEditor('myEdit
PHP接入umeditor(百度富文字編輯器)
百度官網上下載 umeditor 簡版的富文字編輯器(這裡) <!DOCTYPE HTML> <html> <head> <title>UMEDITOR 完整demo</title> <met
百度富文字編輯器Ueditor的使用
前言 最近專案需要整合一個編輯器,於是聽從了同事的推薦用的是百度的Ueditor,整合很順利,本地也很順利,然後部署到linux上就各種不能用。。。 期間也百度了很多的帖子,但是多數帖子都是使用的舊
關於使用百度富文字編輯器UE重新載入資料的問題
在初始化的時候UE.getEditor("editor").addListener("ready", function () { UE.getEditor('editor').setContent(data.data);}); 需要使用這樣的方法來進行資料初始化
使用百度富文字編輯器UEditor碰到的問題
前面使用的是kindEditor,但是發現這個已經不再維護,並且bug不少,而我又不會改,哈哈,所以我就放棄了。 原來想過要用百度的這個UEditor,但是在配置的時候遇到了很多問題,基本上載入不出來,但是最後還是硬著頭皮把那些bug都解決了,順利跑通。 問題1:按百度Demo的配置我發現連最基本的編
百度富文字編輯器UEditor的使用總結
在你的web工程或網站根目錄下,新建一個名稱叫ueditor資料夾,把下載ueditor解壓後貼上到你新建的這個資料夾中4.在你的jsp頁面中一如富文字編輯器 1.引入相關js和css <script type="text/javascript" src="${basePath}/ad
百度富文字編輯器UEditor的使用和他的圖片上傳
最近在做一個新聞釋出系統的小專案,需要用到富文字編輯器這個東東,於是上網搜了下,白活兩天給白活出來了,接下來談談我對百度富文字編輯器的使用心得: 要想使用這個富文字編輯器,首先呢得從百度官網上下載,文章最後我會貼出來資源的連結,大家可以直接下載哈~ 下載完成之後呢,解壓,目
【ASP.NET】6.百度富文字編輯器UEditor之從資料庫中取出來頁面展示
將資料存到資料庫中了,那麼怎麼讓資料原樣顯示到編輯器裡呢?讀取資料庫裡一條資料,獲取到的資料是這樣的:<p style="text-align:center;"> <img src="/LJWY/MGMT/attached/image/2016-1
百度富文字編輯器(ueditor)自定義上傳介面(路徑)
只針對 1.4.3 jsp 版本其他版本估計也差不多,剛開始上傳圖片各種錯誤,又是配路徑又是導jar包啥的,這都不說了,作為一個前端真的不太會玩這些java的東西,剛好同事搞過,把他的搬來用,他的版本很低1.3.6,高了半天上傳上去是自定義的一個資料夾,就存在t