當前位置:首頁 » 網頁前端 » web集成ueditor
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web集成ueditor

發布時間: 2022-10-01 03:27:05

㈠ 如何在CI框架中集成百度的UEditor編輯器

一項目中需要用到富文本編輯器,目前可選擇的編輯器可以參看求推薦好用的富文本編輯器這個討論。然後我就試用了網路的UEditor。
把UEditor下載下來,在CI的views層建立一個名為ueditor的文件夾,拷貝源碼包中的dialogs、themes、third-party、editor_all.js和editor_config.js到ueditor文夾中。
然後在需要顯示富文本編輯器的區域里加上下面代碼:
<script type="text/javascript" src="<?=base_url().'application/views/default/'?>ueditor/editor_config.js"></script>
<script type="text/javascript" src="<?=base_url().'application/views/default/'?>ueditor/editor_all.js"></script>
<link rel="stylesheet" href="<?=base_url().'application/views/default/'?>ueditor/themes/default/ueditor.css"/>
<div id="myEditor"></div>
<script type="text/javascript">
//var URL= "<?=base_url().'application/views/default/'?>";
var editor = new .editor.ui.Editor();
editor.render("myEditor");
</script>

刷新頁面,可以看到編輯器就出來了。但是點擊發現彈出層里的iframe頁面沒顯示出來,用firebug等調試器一看,發現是相對路徑出錯了。
這個問題也好辦,找到ueditor/ueditor_config.js文件,裡面有配置路徑的地方。看以下代碼:
(function () {
//這里你可以配置成ueditor目錄在您網站中與根目錄之間的相對路徑或者絕對路徑(指以http開頭的絕對路徑)
//window.UEDITOR_HOME_URL可以在外部配置,這里就不用配置了
//場景:如果你有多個頁面使用同一目錄下的editor,因為路徑不同,所以在使用editor的頁面上配置這個路徑寫在這個js外邊
//var URL = window.UEDITOR_HOME_URL || '../';
var tmp = window.location.pathname,
//URL = window.UEDITOR_HOME_URL||tmp.substr(0,tmp.lastIndexOf("\/")+1).replace("_examples/","").replace("website/","");//這里你可以配置成ueditor目錄在您網站的相對路徑或者絕對路徑(指以http開頭的絕對路徑)
URL = 'http://www.nowamagic.net/ci/ueditor/';
把URL編程絕對路徑。現在再刷新頁面,OK了,Ueditor的彈出框也正常了。

㈡ 如何在 xadmin 中集成 ueditor 富文本編輯器

第一步需要引入UEditor的源文件,和jquery文件,來對編輯器進行支持。如果看到圖二的效果則說明部署成功咯,接下來我們就可以根據自己的實際需求來進行場地參數。

第二步獲取編輯器的輸入的文本內容,然後對獲取的值傳遞給後台處理,也可通過from表單進行操作。

配置文件上傳,圖片上傳、截圖上傳路徑(以jsp為例)
首先配置ueditor.config.js來初始化ueditor的安裝路徑,projectName代表項目路徑URL則表示,配置後的ueditor的所在路徑(可自定義),詳細配置可看圖片所示

配置好路徑後我們就可以調用了,接下來需要配置上傳文件的路徑了(jsp/config.json)里,需要配置的有imageUrlPrefix圖片訪問的路徑前綴,imagePathFormat/scrawlPathFormat
等*PathFormat路徑用來表示上傳的文件路徑(注意:windows 和linux的路徑不同方式),具體配置如圖所示

在項目中添加ueditor說需要的jar包文件,然後啟動項目。
項目啟動完成後,進入頁面,我們可以來試試效果,大家可以任意復制圖片,上傳文件等來實驗下我們的配置結果。出現如下結果則說明我們配置成功了,簡單吧。

㈢ 如何在angular2+webpack+typescript框架中引入ueditor

需要動態Evaluate一個表達式的值,可以通過Code Completion點出它所支持的方法

前端用jQuery怎麼獲取到富文本ueditor web編輯器裡面的文字,圖片內容

UE.getPlainTxt() 可獲取到編輯器中的純文本內容,有段落格式
UE.getContentTxt() 可獲取到編輯器中的純文本內容,沒有段落格式;


ueditor 沒有提供直接獲取圖片的功能,可以UE.getContent() 獲取全部內容,使用正則表達式 篩選出圖片,我提供一個使用JAVA寫的篩選方法,前台js代碼類似:

Patternp_img=Pattern.compile("(<img[^>]+src\s*=\s*['"]([^'"]+)['"][^>]*>)");
Matcherm_img=p_img.matcher(content);
while(m_img.find()){
Stringimg=m_img.group(1);//m_img.group(1)為獲得整個img標簽m_img.group(2)為獲得src的值
}

可以打開ueditor.all.min.js 查看,裡面有所有支持的方法 注釋也都很明白

㈤ 百度Ueditor web編輯器在ASP.NET網站中怎麼配置,使用

把下載的文件夾放進你的項目,修改js、css文件的路徑就可以直接引用,另外可以通過修改config.js選擇需要顯示的功能,很不錯。可惜本地上傳圖片我的還是沒有郁悶中。。。

㈥ ueditor 支持python嗎

UEditor官方沒有支持python的版本,有人改了個python的django版本,但是沒找到web.py的。
於是參考php版本,實現了一下web.py集成UEditor,包含了文件上傳,圖片上傳,視頻上傳,圖片遠程抓取,塗鴉等。
可能會有一些session之類的沒有處理。

㈦ ueditor1.4.3需要哪些jar包

一:集成簡單步驟
1,下載UEditor文件
2,添加jar包
打開下載的文件,結構如下所示,將jsp-lib下面的jar包添加到項目的web-inf 下的lib文件夾中

3,導入源文件
在webContent路徑下面創建文件夾(ueditor),將下載的文件全都拷貝進去(除去上部添加的jar包)

4,修改jsp文件
1),首先引入js文件
2),其次編寫顯示ueditor富文本框的容器
通過以上配置,ueditor基本上就可以使用了。
二:圖片顯示問題

1,如果ueditor圖片上傳失敗,提示「未找到上傳數據」
這時要檢查項目的jar包,刪除common-io-1.4.jar 即可上傳成功

2,如果ueditor圖片上傳成功,但是顯示不出來
這個問題就是讀取圖片的路徑有問題,修改jsp下面的config.json文件
imageUrlPrefix 修改為自己項目名稱,原因是默認的項目前綴是空,所以圖片路徑不正確
這樣不是很好,項目名稱更換一下還得改一下json文件,很麻煩,但是.json文件中又不會自動獲取項目的名稱,所以,如果改進的話,可以自動的拼成config.json文件中的內容。。

㈧ 如何自定義ueditor百度web編輯器

網路搜索ueditor,去下圖所示官網下載

把這兩個文件包含進來

寫出如下圖的標簽

如下圖實列化編輯器

呈現效果如下,很多功能,但是我們可能實際用不到這么多

如下圖,實列化ueditor的時候,對其進行配置,這樣可以不用修改其原來配置。
配置完後效果如圖,這樣我們就實現了自定義按鈕功能配置

㈨ 使用myeclipse開發的Javaweb項目中怎麼部署ueditor

步驟如下:

一、官網上下載完整源碼包,解壓到任意目錄

_examples:編輯器完整版的示例頁面

_demos:編輯器的各種使用案例

dialogs:彈出對話框對應的資源和JS文件

themes:樣式圖片和樣式文件

third-party:第三方插件

editor_all.js:_src目錄下所有文件的打包文件

editor_all_min.js:editor_all.js文件的壓縮版,建議在正式部署時才採用

editor_config.js:編輯器的配置文件,建議和編輯器實例化頁面置於同一目錄

二、部署UEditor到實際項目(UETest)中的步驟:

第一步:在項目的任一文件夾中建立一個用於存放UEditor相關資源和文件的目錄,此處在項目根目錄下建立,起名為ueditor。

第二步:拷貝源碼包中的dialogs、themes、third-party、editor_all.js和editor_config.js到ueditor文夾中。

第三步:為簡單起見,此處將以根目錄下的index.jsp頁面作為編輯器的實例化頁面,用來展示UEditor的完整版效果。在index.jsp文件中,首先導入編輯器需要的三個入口文件,示例代碼如下:

[html] view plain

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>編輯器完整版實例</title>

<script type="text/javascript" src="ueditor/editor_config.js"></script>

<script type="text/javascript" src="ueditor/editor_all.js"></script>

<link rel="stylesheet" href="ueditor/themes/default/ueditor.css">

第四步:然後在index.php文件中創建編輯器實例及其DOM容器。具體代碼示例如下:

[html] view plain

<div id="myEditor"></div>

<script language="javascript" type="text/javascript">

var option = {

initialContent : '',//初始化編輯器的內容

minFrameHeight : 400,//設置高度

textarea : 'content'//設置提交時編輯器內容的名字,之前我們用的名字是默認的editorValue

};

var editor = new .editor.ui.Editor(option);

editor.render("myEditor");

</script>

最後一步: 在/UETest/ueditor/ editor_config.js中查找URL變數配置編輯器在你項目中的路徑。

[html] view plain

//強烈推薦以這種方式進行絕對路徑配置

URL=window.UEDITOR_HOME_URL||"/UETest/ueditor/";

至此,一個完整的編輯器實例就已經部署了!在瀏覽器中輸入http://localhost:8080/UETest 運行下。