首頁
手機版
熱門搜索:
當前位置:電腦軟件 > 編程開發 > 編程軟件 > 富文本編輯器UEditor編輯器 V1.5.0

富文本編輯器UEditor編輯器 V1.5.0

  • 大小:7.5 MB
  • 語言:中文
  • 類別:編程軟件
  • 類型:免費軟件
  • 授權:國產軟件
  • 時間:2020/8/27
  • 官網:https://ueditor.baidu.com
  • 環境:Windows7, Windows10, WindowsAll

相關軟件

富文本編輯器UEditor編輯器是一款電腦文本編輯軟件,該工具由百度開發,面向廣大開發者開源使用,所以任何破解版都不是真實的,小編將其最新版本從github下載過來,快安裝體驗吧!

更多內容請點擊:BabelPad|文本編輯器

軟件介紹

ueditor是一款免費開源的web編輯器。ueditor主要用于web網頁的開發和代碼的編輯,能夠提供良好的代碼編輯環境,開源的性質讓你可以對其進行任意的修改達到個性化使用的目的。

功能特色

UEditor圖片

1、功能全面

涵蓋流行富文本編輯器特色功能,獨創多種全新編輯操作模式。

2、用戶體驗

屏蔽各種瀏覽器之間的差異,提供良好的富文本編輯體驗。

3、開源免費

開源基于MIT協議,支持商業和非商業用戶的免費使用和任意修改。

4、定制下載

細粒度拆分核心代碼,提供可視化功能選擇和自定義下載。

5、專業穩定

百度專業QA團隊持續跟進,上千自動化測試用例支持。

軟件特色

UEditor 在設計上采用了經典的分層架構設計理念,盡量做到功能層次之間的輕度耦合。具體來講,整個系統分為了核心層、命令插件層和UI層這樣三個低耦合的層次。

UEditor圖片2

1、核心層提供了編輯器底層的一些方法和概念,如DOM樹操作、Selection、Range等。

2、在核心層之上覆蓋的是命令插件層。之所以叫命令插件層,是因為UEditor中所有的功能型實現都是通過這一層中的命令和插件來完成的,并且各個命令和插件之間基本互不耦合——使用者需要使用哪個功能就導入哪個功能對應的命令或者插件文件,完全不用考慮另外那些雜七雜八的JS文件(極少數插件除外,關于這些插件下文會整理出一個依賴列表來供同學們參考)。

理論上來講,所有的命令都是可以用插件來代替的,但是依然將兩者分開的主要原因是命令都是一些靜態的方法,無需隨editor實例初始化,從而優化了編輯器的性能。而插件隨編輯器的初始化而初始化,性能上會有少許的影響,但相比命令而言,插件能夠完成更加復雜的功能。其中最主要的一個特點是在插件內部既可以為編輯器注冊命令,也可以為編輯器綁定監聽事件。這個特點使得為編輯器添加任何功能都可以在插件中獨立完成。

3、在命令插件層之上則是UI層。UEditor的UI設計與核心層和命令插件層幾乎完全解耦,簡單的幾個配置就可以為編輯器在界面上添加額外的UI元素和功能,具體的配置下面將會深入闡述。

使用教程

UEditor這種富文本編輯器一般不需要安裝,只需要把壓縮包解壓就可以得到源碼目錄,從源碼目錄我們看到軟件的具體結構,然后就能對軟件進行使用,很多用戶不知道軟件的使用方法,下面小編為大家帶來使用教程,快來看看吧。

1、解壓后的源碼目錄結構如下所示:

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

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

themes:樣式圖片和樣式文件   php/jsp/.net:涉及到服務器端操作的后臺文件,根據你選擇的不同后臺版本,這里也會不同,這里我們選擇php

third-party:第三方插件(包括代碼高亮,源碼編輯等組件)

editor_all.js:_src目錄下所有文件的打包文件(用于發布版本)

editor_api.js: API接口配置文件(開發版本)

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

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

2、編輯器的實例化頁面,導入編輯器需要的三個入口文件,示例代碼如下:

UEditor使用教程圖

3、然后在編輯器的實例化頁面中創建編輯器實例及其DOM容器,示例代碼如下:

UEditor使用教程圖2

4、在editor_config.js中查找URL變量配置編輯器在你項目中的路徑。

UEditor使用教程圖3

5、如果用editor_api.js (也就是不用editor.all.js)開發時,打開editor_api.js,代碼如下

/**

* 開發版本的文件導入

*/

(function (){

var paths  = [

’editor.js’,

’core/browser.js’,

’core/utils.js’,

’core/EventBase.js’,

’core/dtd.js’,

’core/domUtils.js’,

’core/Range.js’,

’core/Selection.js’,

’core/Editor.js’,

’core/filterword.js’,

’core/node.js’,

’core/htmlparser.js’,

’core/filternode.js’,

’plugins/inserthtml.js’,

’plugins/image.js’,

’plugins/justify.js’,

’plugins/font.js’,

’plugins/link.js’,

’plugins/print.js’,

’plugins/paragraph.js’,

’plugins/horizontal.js’,

’plugins/cleardoc.js’,

’plugins/undo.js’,

’plugins/paste.js’,

’plugins/list.js’,

’plugins/source.js’,

’plugins/enterkey.js’,

’plugins/preview.js’,

’plugins/basestyle.js’,

’plugins/video.js’,

’plugins/selectall.js’,

’plugins/removeformat.js’,

’plugins/keystrokes.js’,

’plugins/dropfile.js’,

’ui/widget.js’,

’ui/button.js’,

’ui/toolbar.js’,

’ui/menu.js’,

’ui/dropmenu.js’,

’ui/splitbutton.js’,

’ui/colorsplitbutton.js’,

’ui/popup.js’,

’ui/scale.js’,

’ui/colorpicker.js’,

’ui/combobox.js’,

’ui/buttoncombobox.js’,

’ui/modal.js’,

’ui/tooltip.js’,

’ui/tab.js’,

’ui/separator.js’,

’ui/scale.js’,

’adapter/adapter.js’,

’adapter/button.js’,

’adapter/fullscreen.js’,

’adapter/dialog.js’,

’adapter/popup.js’,

’adapter/imagescale.js’,

’adapter/autofloat.js’,

’adapter/source.js’,

’adapter/combobox.js’

],

/**

* @author wusuopubupt

* @date 2013-10-24

*

* modified  baseURL = ’/ueditor/src/’;

*/

baseURL = ’/ueditor/src/’;

for (var i=0,pi;pi = paths[i++];) {

document.write(’<script type="text/javascript" src="’+ baseURL + pi +’"></script>’);

}

})();

可以看到,這里有一項:baseURL,就是JS文件的路由,這里要根據ueditor_api.js文件的實際路徑去配置!

上傳圖片配置

在該編輯器中想要上傳圖片的話,首先就需要對軟件進行配置,確定圖片的上傳提交地址,圖片修正地址等等內容,下面小編直接為大家帶來我的上傳圖片配置作為參考,用戶可以根據該配置設計出自己的上傳圖片配置。

打開ueditor.config.js,可以看到如下配置:

UEditor上傳圖片配置

//圖片上傳配置區

,imageUrl:URL+"php/imageUp.php"             //圖片上傳提交地址

//,imagePath:URL + "php/"                     //圖片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置

,imagePath:"test.mathandcs.com/"

,imageFieldName:"upfile"                   //圖片數據的key,若此處修改,需要在后臺對應文件修改對應參數

這里的imageURL是圖片上傳所調用的php文件的地址,而imagePath則是為新上傳的圖片生成的圖片地址的host部分;

再打開ueditor/php/下的imageUp.php文件,有配置如下:

UEditor上傳圖片配置2

$config = array(

"savePath" => "/var/www/store/upload/" ,             //存儲文件夾

"maxSize" => 1000 ,                   //允許的文件最大尺寸,單位KB

"allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" )  //允許的文件格式

);

//上傳文件目錄

//$Path = "upload/";

$Path = "/var/www/store/upload/";

這里需要把上傳文件到服務器的目的地址(上傳文件保存文件)savePath修改成你指定的文件地址。

由于相對路徑和絕對路徑的問題,生成的地址有可能是錯的,這時就要hack一下生成圖片URL的JS文件:

ueditor/dialogs/image/image.js 中修改:

UEditor上傳圖片配置3

/**

* @author wusuopubupt

* @date 2013-10-24

* @return url modified

* */

var reg = /\/var\/www\/test\/upload\//;

url = url.replace(reg,"");

var $img = $("<img src=’" + editor.options.imagePath + url + "’ class=’edui-image-pic’ />"),

$item = $("<div class=’edui-image-item edui-image-upload-item’><div class=’edui-image-close’></div></div>").append($img);

這里的正則的規則要根據具體情況來定!

自定義工具按鈕

想要在軟件中使用自定義工具按鈕的話,首先需要進行自定義的參數設置,軟件加入按鈕UI,對UI進行更改,然后為UI添加事件,很多用戶不知道整體的操作方法,下面小編就為大家帶來一個具體的流程,感興趣的用戶快來看看吧。

第一步:找到editor_config.js(或者ueditor.config.js)文件中的toolbars參數,增加一個“camnpr”字符串,對應著添加一個labelMap,用于鼠標移上按鈕時的提示。

UEditor自定義工具按鈕圖

第二步:找到ui/editorui.js文件中的btnCmds數組,在其中同樣增加一個“camnpr”字符串。【如果找不到editorui.js,請直接在ueditor.all.js文件里搜索var btnCmds = [】

UEditor自定義工具按鈕圖2

找到此位置,我們可以看到:

UEditor自定義工具按鈕圖3

在此我們可以添加一個

'camnpr': '~/dialogs/emotion1/camnpr.html'

這個camnpr.html頁面時自定義的頁面,如果你要點擊此按鈕彈出這個頁面,還需要加入如下代碼(先在ueditor.all.js頁面找到 editorui["emotion"] = function 在這段代碼下邊加入):

UEditor自定義工具按鈕圖4

如果你要此功能,就不要添加【第五步】的操作了。效果圖如下:

UEditor自定義工具按鈕圖5

更新日志

1.5.0

修復已知的漏洞

1.4.3.3版本

bug修復

修復 xss 安全漏洞

1.4.3.2版本

bug修復

更新 video-js 以修復 XSS 安全漏洞

1.4.3.1版本

bug修復

修復 SSRF 安全漏洞

標簽: 富文本編輯器 代碼編輯器 百度 開源軟件

下載地址

富文本編輯器UEditor編輯器 V1.5.0

普通下載通道

網友評論

返回頂部
玩三公最常用的技巧 今日短线股票推荐 基金配资比例两种模式 青海快三怎么杀号 时时彩软件官方网站 华东15选5app 游戏娱乐平台下载 股票融资利息是多少 2018河北排列七开奖 山东十一运夺金走势图 6 1开奖结果查询浙江 北京快乐8官网开奖记录 上证指数最高点是多少,哪一年 黑龙江11选5第20012003期 哪个券商的软件最好用 理财平台 甘肃11选5遗漏任五