介紹
UEditor 是由百度「FEX前端研發團隊」開發的所見即所得富文本web編輯器,具有輕量,可定制,注重使用者體驗等特點,開源基于MIT協定,允許自由使用和修改代碼。
特點
- 支援拖拽圖檔上傳
- 支援QQ截圖後粘貼上傳圖檔
- 支援圖檔直傳第三方雲儲存
- 支援Chrome的圖檔拖動改變大小
- 支援公式編輯
- 支援地圖插入
- 支援表情插入
- 支援附件圖檔插入
下載下傳
- 官網下載下傳:http://ueditor.baidu.com/website/download.html#ueditor
-
小編友情提供
百度網盤:
連結:https://pan.baidu.com/s/1fKnwozEZLHwk4LxXC8QbQA
提取碼:274r
使用方式
引入js和css檔案:
<link href="umeditor.css" target="_blank" rel="external nofollow" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery.min.js"></script>
<!-- 配置檔案 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 編輯器源碼檔案 -->
<script type="text/javascript" src="ueditor.js"></script>
<!-- 編輯器語言 -->
<script src="umeditor/js/lang/zh-cn/zh-cn.js"></script>
API
- 參數
{
UEDITOR_HOME_URL:"", //{Path String} [預設值:根據config檔案路徑自動擷取] // 為編輯器執行個體添加一個路徑,這個不能被注釋
serverUrl :"",//{Path String} [預設值:URL + "php/controller.php"] // 伺服器統一請求接口路徑
toolbars:[],// {2d Array} //工具欄上的所有的功能按鈕和下拉框,可以在new編輯器的執行個體時選擇自己需要的從新定義
labelMap:{},// {Object} [預設:從lang包的labelMap項擷取] //參數格式是鍵值對,鍵名對應toolbar參數的項:{"bold": "加粗"} ],當滑鼠放在工具欄上時顯示的tooltip提示,留白支援自動多語言配置,否則以配置值為準
lang:"zh-cn",// {String} [預設值:"zh-cn"] //lang值也可以通過自動擷取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase(),語言配置項,預設是zh-cn。有需要的話也可以使用如下這樣的方式來自動多語言切換,當然,前提條件是lang檔案夾下存在對應的語言檔案:
langPath:"",// {Path String} [預設值:URL +"lang/"] //語言封包件存放目錄
theme:"default",// {String} [預設值:'default'] //主題配置項,預設是default。有需要的話也可以使用如下這樣的方式來自動多主題切換,當然,前提條件是themes檔案夾下存在對應的主題檔案:
themePath:"",// {Path String} [預設值:URL +"themes/"] //現有如下皮膚:default
zIndex:900,// {Number} [預設值:900] //編輯器在頁面上的z-index層級的基數,預設是900
charset:"utf-8",// {String} [預設值:"utf-8"] //針對getAllHtml方法,會在對應的head标簽中增加該編碼設定。
customDomain:false,// {Boolean} [預設值:false] //若執行個體化編輯器的頁面手動修改的domain,此處需要設定為true
isShow:true,// {Boolean} [預設值:true] //預設顯示編輯器
textarea:"editorValue",// {String} [預設值:'editorValue'] // 送出表單時,伺服器擷取編輯器送出内容的所用的參數,多執行個體時可以給容器name屬性,會将name給定的值最為每個執行個體的鍵值,不用每次執行個體化的時候都設定這個值
initialContent:"歡迎使用ueditor!",// {String} [預設值:'歡迎使用ueditor!'] //初始化編輯器的内容,也可以通過textarea/script給值,看官網例子
autoClearinitialContent:true,// {Boolean} [預設值:true] //是否自動清除編輯器初始内容,注意:如果focus屬性設定為true,這個也為真,那麼編輯器一上來就會觸發導緻初始化的内容看不到了
focus:false,// {Boolean} [預設值:false] //初始化時,是否讓編輯器獲得焦點true或false
initialStyle:"p{line-height:1em}" ,//{String} [預設值:'p{line-height:1em}']//編輯器層級的基數,可以用來改變字型等 //如果自定義,最好給p标簽如下的行高,要不輸入中文時,會有跳動感
iframeCssUrl:"",// {Path String} [預設值:URL + '/themes/iframe.css'] //給編輯器内部引入一個css檔案
indentValue:"2em",// {String} [預設值:'2em'] //首行縮進距離,預設是2em
initialFrameWidth:1000,// {Number} [預設值:1000] //初始化編輯器寬度,預設1000
initialFrameHeight:320,// {Number} [預設值:320] //初始化編輯器高度,預設320
readonly:false,// {Boolean} [預設值:false] //編輯器初始化結束後,編輯區域是否是隻讀的,預設是false
autoClearEmptyNode:true,// {Boolean} [預設值:true] //getContent時,是否删除空的inlineElement節點(包括嵌套的情況)
enableAutoSave:true,// {Boolean} [預設值:true] //啟用自動儲存
saveInterval:500,// {Number} [預設值:500] //自動儲存間隔時間,機關ms
imageScaleEnabled:true,// {Boolean} [預設值:true] //啟用圖檔拉伸縮放
fullscreen:false,// {Boolean} [預設值:false] //是否開啟初始化時即全屏,預設關閉
imagePopup:true,// {Boolean} [預設值:true] //圖檔操作的浮層開關,預設打開
autoSyncData :true,//{Boolean} [預設值:true] //自動同步編輯器要送出的資料
emotionLocalization:false,// {Boolean} [預設值:false] //是否開啟表情本地化,預設關閉。若要開啟請確定emotion檔案夾下包含官網提供的images表情檔案夾
retainOnlyLabelPasted:false,// {Boolean} [預設值:false] //粘貼隻保留标簽,去除标簽所有屬性
pasteplain:false,// {Boolean} [預設值:false] //是否預設為純文字粘貼。false為不使用純文字粘貼,true為使用純文字粘貼
filterTxtRules:{},// {Object} //純文字粘貼模式下的過濾規則
}
- 方法
-
:執行個體化編輯器到id為 container 的 dom 容器上var ue = UM.getEditor('container')
-
:設定編輯器内容ue.setContent('<p>hello!</p>')
-
:設定編輯器内容ue.setContent('<p>new text</p>', true)
-
:擷取編輯器html内容ue.getContent()
-
:擷取純文字内容ue.getContentTxt()
-
:擷取保留格式的文本内容ue.getPlainTxt()
-
:判斷編輯器是否有内容ue.hasContents()
-
:讓編輯器獲得焦點ue.focus()
-
:讓編輯器失去焦點ue.blur()
-
:判斷編輯器是否獲得焦點ue.isFocus()
-
:設定目前編輯區域不可編輯ue.setDisabled()
-
:設定目前編輯區域可以編輯ue.setEnabled()
-
:隐藏編輯器ue.setHide()
-
:顯示編輯器ue.setShow()
-
:獲得目前選中的文本ue.selection.getText()
- 指令
-
:撤銷回退編輯器内容ue.execCommand('redo')
-
:切換源碼和可視化編輯模式ue.execCommand('source')
-
:選中所有内容ue.execCommand('selectall')
-
:清空内容ue.execCommand('cleardoc')
-
:讀取草稿箱ue.execCommand('drafts')
-
:清空草稿箱ue.execCommand('clearlocaldata')
-
:顯示編輯器ue.setShow()
-
:顯示編輯器ue.setShow()
-
:顯示編輯器ue.setShow()
-
:在目前光标位置插入html内容ue.execCommand('inserthtml', '<span>hello!</span>')
-
:設定目前選區文本格式ue.execCommand('bold'); //加粗 ue.execCommand('italic'); //加斜線 ue.execCommand('subscript'); //設定上标 ue.execCommand('supscript'); //設定下标 ue.execCommand('forecolor', '#FF0000'); //設定字型顔色 ue.execCommand('backcolor', '#0000FF'); //設定字型背景顔色
- 事件
-
: 編輯器準備就緒後會觸發該事件ue.ready()
-
:執行destroy方法,會觸發該事件ue.destroy()
-
:執行reset方法,會觸發該事件ue.reset()
-
:執行focus方法,會觸發該事件ue.focus()
-
:語言加載完成會觸發該事件ue.langReady()
-
:運作指令之後會觸發該指令ue.beforeExecCommand()
-
:運作指令之後會觸發該指令ue.afterExecCommand()
-
:運作指令之前會觸發該指令ue.firstBeforeExecCommand()
-
:在getContent方法執行之前會觸發該事件ue.beforeGetContent()
-
:在getContent方法執行之後會觸發該事件ue.afterGetContent()
- 示例
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="umeditor/themes/default/css/umeditor.css" target="_blank" rel="external nofollow" >
<style type="text/css">
h1{
font-family: "微軟雅黑";
font-weight: normal;
}
.btn {
display: inline-block;
*display: inline;
padding: 4px 12px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
*border: 0;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
color: #333333;
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
.btn:active,
.btn.active {
background-color: #cccccc \9;
}
.btn:first-child {
*margin-left: 0;
}
.btn:hover,
.btn:focus {
color: #333333;
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn.active,
.btn:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn.disabled,
.btn[disabled] {
cursor: default;
background-image: none;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
</style>
</head>
<body>
<script id="myEditor" name="content" type="text/plain"></script>
<script src="js/jquery.min.js"></script>
<script src="umeditor/js/umeditor.js"></script>
<script src="umeditor/js/umeditor.config1.js"></script>
<script src="umeditor/js/lang/zh-cn/zh-cn.js"></script>
<div id="btns">
<table>
<tr>
<td>
<button class="btn" unselected="on" onclick="getAllHtml()">獲得整個html的内容</button>
<button class="btn" onclick="getContent()">獲得内容</button>
<button class="btn" onclick="setContent()">寫入内容</button>
<button class="btn" onclick="setContent(true)">追加内容</button>
<button class="btn" onclick="getContentTxt()">獲得純文字</button>
<button class="btn" onclick="getPlainTxt()">獲得帶格式的純文字</button>
<button class="btn" onclick="hasContent()">判斷是否有内容</button>
</td>
</tr>
<tr>
<td>
<button class="btn" onclick="setFocus()">編輯器獲得焦點</button>
<button class="btn" onmousedown="isFocus();return false;">編輯器是否獲得焦點</button>
<button class="btn" onclick="doBlur()">編輯器取消焦點</button>
<button class="btn" onclick="insertHtml()">插入給定的内容</button>
<button class="btn" onclick="getContentTxt()">獲得純文字</button>
<button class="btn" id="enable" onclick="setEnabled()">可以編輯</button>
<button class="btn" onclick="setDisabled()">不可編輯</button>
</td>
</tr>
<tr>
<td>
<button class="btn" onclick="UM.getEditor('myEditor').setHide()">隐藏編輯器</button>
<button class="btn" onclick="UM.getEditor('myEditor').setShow()">顯示編輯器</button>
<button class="btn" onclick="UM.getEditor('myEditor').setHeight(300)">設定編輯器的高度為300</button>
<button class="btn" onclick="UM.getEditor('myEditor').setWidth(1200)">設定編輯器的寬度為1200</button>
</td>
</tr>
</table>
</div>
<table>
<tr>
<td>
<button class="btn" onclick="createEditor()"/>建立編輯器</button>
<button class="btn" onclick="deleteEditor()"/>删除編輯器</button>
</td>
</tr>
</table>
<div>
<h3 id="focush2"></h3>
</div>
<script type="text/javascript">
//執行個體化編輯器
var um = UM.getEditor('myEditor');
um.addListener('blur',function(){
$('#focush2').html('編輯器失去焦點了')
});
um.addListener('focus',function(){
$('#focush2').html('')
});
//按鈕的操作
function insertHtml() {
var value = prompt('插入html代碼', '');
um.execCommand('insertHtml', value)
}
function isFocus(){
alert(um.isFocus())
}
function doBlur(){
um.blur()
}
function createEditor() {
enableBtn();
um = UM.getEditor('myEditor');
}
function getAllHtml() {
alert(UM.getEditor('myEditor').getAllHtml())
}
function getContent() {
var arr = [];
arr.push("使用editor.getContent()方法可以獲得編輯器的内容");
arr.push("内容為:");
arr.push(UM.getEditor('myEditor').getContent());
alert(arr.join("\n"));
}
function getPlainTxt() {
var arr = [];
arr.push("使用editor.getPlainTxt()方法可以獲得編輯器的帶格式的純文字内容");
arr.push("内容為:");
arr.push(UM.getEditor('myEditor').getPlainTxt());
alert(arr.join('\n'))
}
function setContent(isAppendTo) {
var arr = [];
arr.push("使用editor.setContent('歡迎使用umeditor')方法可以設定編輯器的内容");
UM.getEditor('myEditor').setContent('歡迎使用umeditor', isAppendTo);
alert(arr.join("\n"));
}
function setDisabled() {
UM.getEditor('myEditor').setDisabled('fullscreen');
disableBtn("enable");
}
function setEnabled() {
UM.getEditor('myEditor').setEnabled();
enableBtn();
}
function getText() {
//當你點選按鈕時編輯區域已經失去了焦點,如果直接用getText将不會得到内容,是以要在選回來,然後取得内容
var range = UM.getEditor('myEditor').selection.getRange();
range.select();
var txt = UM.getEditor('myEditor').selection.getText();
alert(txt)
}
function getContentTxt() {
var arr = [];
arr.push("使用editor.getContentTxt()方法可以獲得編輯器的純文字内容");
arr.push("編輯器的純文字内容為:");
arr.push(UM.getEditor('myEditor').getContentTxt());
alert(arr.join("\n"));
}
function hasContent() {
var arr = [];
arr.push("使用editor.hasContents()方法判斷編輯器裡是否有内容");
arr.push("判斷結果為:");
arr.push(UM.getEditor('myEditor').hasContents());
alert(arr.join("\n"));
}
function setFocus() {
UM.getEditor('myEditor').focus();
}
function deleteEditor() {
disableBtn();
UM.getEditor('myEditor').destroy();
}
function disableBtn(str) {
var div = document.getElementById('btns');
var btns = domUtils.getElementsByTagName(div, "button");
for (var i = 0, btn; btn = btns[i++];) {
if (btn.id == str) {
domUtils.removeAttributes(btn, ["disabled"]);
} else {
btn.setAttribute("disabled", "true");
}
}
}
function enableBtn() {
var div = document.getElementById('btns');
var btns = domUtils.getElementsByTagName(div, "button");
for (var i = 0, btn; btn = btns[i++];) {
domUtils.removeAttributes(btn, ["disabled"]);
}
}
</script>
</body>
</html>
官網位址:http://fex.baidu.com/ueditor/#start-start
Github位址:https://github.com/fex-team/ueditor