ueditor的簡單配置和使用

2022-05-03 09:00:09 字數 1593 閱讀 4315

一 準備開發工具和資源

開發工具我使用的是eclipse neon.1 release (4.6.1)版本,jdk使用的是jdk1.8,tomcat使用的tomcat9。如果這些工具的版本和我的不一致,只要不是太舊的版本,應該是也是可以的,這個大家可以嘗試一下。

二 配置和使用方法

然後將ueditor資料夾整個拷貝到test_ueditor專案的webcontent目錄下,eclipse中的目錄結構如下圖所示。

專案中的報錯,主要是config.json和controller.jsp兩個檔案,因為controller.jsp需要訪問後端資料,也就是需要一些依賴的jar包,將jsp目錄下的lib目錄的jar包拷貝到web-inf的lib目錄下,這樣這些jar包就會被自動新增到專案中使用,這時我們就會發現controller.jsp檔案不再報錯了。config.json檔案的報錯,不影響專案的執行,可以不用管它。將test_ueditor專案新增到tomcat中,然後啟動tomcat。這時,我們就可以在瀏覽器中訪問到ueditor自帶的index.html檔案,訪問路徑為http://localhost:8080/test_ueditor/ueditor/,這個時候可以看到富文字編輯器。

但是,很多功能不能使用,特別是沒有上傳功能,這是因為我們還沒有進行路徑的設定。為了增加上傳功能,我們需要修改ueditor根目錄下的ueditor.config.js檔案,新增window.ueditor_home_url = "/test_ueditor/ueditor/";放到var url = window.ueditor_home_url || getuebasepath();語句的前面。裡面的test_ueditor是我們的專案名稱,ueditor是webcontent下的ueditor檔名。

然後修改jsp目錄下的config.json檔案,主要修改的上傳路徑字首。

"imageurlprefix": "/test_ueditor", /* 訪問路徑字首 */

兩個檔案設定完畢之後,再啟動tomcat,在瀏覽器中輸入http://localhost:8080/test_ueditor/ueditor/,再點選單個上傳,就會實現上傳功能了。

我們在這裡是直接使用的ueditor自帶的index.html檔案,如果想建立自己的前端html檔案,實現富文字編輯器功能,可參考index.html檔案,主要就是注意js檔案的引入,和ueditor例項的建立。

UEditor簡單入門使用

今天用到web富文字編輯器,就網上查了下,簡單寫了個demo,不多說了,下面給點乾貨吧。demo原始碼 1.新建web project,我新建了個ueditor的web工程。2.匯入ueditor資料夾下的所有檔案到工程weroot目錄下 3.在需要使用ueditor的jsp頁面中匯入ueditor...

百度ueditor的簡單使用

先說一下,遇到的問題。拿上這個東西,你總得知道這個東西的原理,或者說是怎麼用的吧,然後,運用到自己的專案呀上。但是,你不了解乙個東西的時候,這個才是最難受的,還要你多長時間用上去。1.先說一下,這個東西都是封裝好的,不需要你去選擇怎麼提交,提交的方式是什麼。返回去什麼東西。你可以檢視源 去學習。2....

vue 使用Ueditor富文字的配置

npm i vue ueditor wrap s第二步,引入到專案中 我是引入到需要的頁面中,沒有全域性引入 import vueueditorwrap from vue ueditor wrap 第三步,註冊元件 components 第四步,在模板中使用元件 專案如果使用的是vue cil2.0...