1. 程式人生 > >UmEditor 文字編輯器常規用法

UmEditor 文字編輯器常規用法

首先需在 網頁頭部引用 CSS 和 js
如:

<link href="umeditor1_2_2-utf8-net/umeditor1_2_2-utf8-net/themes/default/css/umeditor.css"
        rel="stylesheet" type="text/css" />
在引入 jq 
<script src="umeditor1_2_2-utf8-net/umeditor1_2_2-utf8-net/third-party/jquery.min.js"
        type="text/javascript"></script>
 引入 umeditor 的相關指令碼
<script src="umeditor1_2_2-utf8-net/umeditor1_2_2-utf8-net/umeditor.config.js" type="text/javascript"></script>
<script src="umeditor1_2_2-utf8-net/umeditor1_2_2-utf8-net/umeditor.min.js" type="text/javascript"></script>
<script src="umeditor1_2_2-utf8-net/umeditor1_2_2-utf8-net/lang/zh-cn/zh-cn.js" type="text/javascript"></script>
<script src="umeditor1_2_2-utf8-net/umeditor1_2_2-utf8-net/dialogs/emotion/emotion.js"
        type="text/javascript"></script>
<script src="umeditor1_2_2-utf8-net/umeditor1_2_2-utf8-net/dialogs/image/image.js"
        type="text/javascript"></script>
<script src="umeditor1_2_2-utf8-net/umeditor1_2_2-utf8-net/dialogs/formula/formula.js"
        type="text/javascript"></script>
<script src="umeditor1_2_2-utf8-net/umeditor1_2_2-utf8-net/dialogs/link/link.js"
        type="text/javascript"></script>
<script src="umeditor1_2_2-utf8-net/umeditor1_2_2-utf8-net/dialogs/map/map.js" type="text/javascript"></script>
<script src="umeditor1_2_2-utf8-net/umeditor1_2_2-utf8-net/dialogs/video/video.js"
        type="text/javascript"></script>
在 網頁的 body 部分引入
<script type="text/plain" id="myEditor" style="width:1000px;height:240px;">
    
</script>

//例項化編輯器

 <script type="text/javascript">
         var um = UM.getEditor('myEditor');
         um.addListener('blur', function () {
             $('#focush2').html('編輯器失去焦點了')
         });
         um.addListener('focus', function () {
             $('#focush2').html('')
         });
     </script>

在後臺獲取 文字資訊
//editorValue 為 umEditor 的name值
string newsContent = Request[“editorValue”];

//對umEditor 操作的相關方法

//獲得文字框的值 方法
function getContent() {
var arr = [];
arr.push(“使用editor.getContent()方法可以獲得編輯器的內容”);
arr.push(“內容為:”);
arr.push(UM.getEditor(‘myEditor’).getContent());
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 setContent(isAppendTo) {
var arr = [];
arr.push(“使用editor.setContent(‘歡迎使用umeditor’)方法可以設定編輯器的內容”);
UM.getEditor(‘myEditor’).setContent(‘歡迎使用umeditor’, isAppendTo);
alert(arr.join("\n"));
}
//或得純文字
function getContentTxt() {
var arr = [];
arr.push(“使用editor.getContentTxt()方法可以獲得編輯器的純文字內容”);
arr.push(“編輯器的純文字內容為:”);
arr.push(UM.getEditor(‘myEditor’).getContentTxt());
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 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 isFocus(){
alert(um.isFocus())
}
//編輯器取消焦點
function doBlur(){
um.blur()
}
//插入給定的內容
function insertHtml() {
var value = prompt(‘插入html程式碼’, ‘’);
um.execCommand(‘insertHtml’, value)
}
//可以編輯
function setEnabled() {
UM.getEditor(‘myEditor’).setEnabled();
enableBtn();
}
//不可以編輯
function setDisabled() {
UM.getEditor(‘myEditor’).setDisabled(‘fullscreen’);
disableBtn(“enable”);
}
//其餘方法
UM.getEditor(‘myEditor’).setHide()隱藏編輯器
UM.getEditor(‘myEditor’).setShow()顯示編輯器
UM.getEditor(‘myEditor’).setHeight(300)設定編輯器的高度為300
UM.getEditor(‘myEditor’).setWidth(1200)設定編輯器的寬度為1200

使用此外掛重要是需要檔案頭部設定中新增相關設定否則會報錯

 <%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" CodeBehind="BookInfoAdd.aspx.cs" Inherits="Maticsoft.Web.Admin.BookInfoAdd"  %>

ValidateRequest=“false” 主要是這句 或者在web.config的配置檔案中 設定