UEditor--富文本編輯器

介紹

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"  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} //純文本粘貼模式下的過濾規則
    }

方法

var ue = UM.getEditor('container')：實例化編輯器到id爲 container 的 dom 容器上
ue.setContent('hello!')：設置編輯器內容
ue.setContent('new text', true)：設置編輯器內容
ue.getContent()：獲取編輯器html內容
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()：顯示編輯器
ue.execCommand('inserthtml', 'hello!')：在當前光標位置插入html內容
ue.execCommand('bold'); //加粗 ue.execCommand('italic'); //加斜線 ue.execCommand('subscript'); //設置上標 ue.execCommand('supscript'); //設置下標 ue.execCommand('forecolor', '#FF0000'); //設置字體顏色 ue.execCommand('backcolor', '#0000FF'); //設置字體背景顏色:設置當前選區文本格式

事件

ue.ready(）：編輯器準備就緒後會觸發該事件
ue.destroy()：執行destroy方法,會觸發該事件
ue.reset()：執行reset方法,會觸發該事件
ue.focus()：執行focus方法,會觸發該事件
ue.langReady()：語言加載完成會觸發該事件
ue.beforeExecCommand()：運行命令之後會觸發該命令
ue.afterExecCommand()：運行命令之後會觸發該命令
ue.firstBeforeExecCommand()：運行命令之前會觸發該命令
ue.beforeGetContent()：在getContent方法執行之前會觸發該事件
ue.afterGetContent()：在getContent方法執行之後會觸發該事件

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="umeditor/themes/default/css/umeditor.css">
     <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>&nbsp;
                <button class="btn" onclick="getContent()">獲得內容</button>&nbsp;
                <button class="btn" onclick="setContent()">寫入內容</button>&nbsp;
                <button class="btn" onclick="setContent(true)">追加內容</button>&nbsp;
                <button class="btn" onclick="getContentTxt()">獲得純文本</button>&nbsp;
                <button class="btn" onclick="getPlainTxt()">獲得帶格式的純文本</button>&nbsp;
                <button class="btn" onclick="hasContent()">判斷是否有內容</button>
            </td>
        </tr>
        <tr>
            <td>
                <button class="btn" onclick="setFocus()">編輯器獲得焦點</button>&nbsp;
                <button class="btn" onmousedown="isFocus();return false;">編輯器是否獲得焦點</button>&nbsp;
                <button class="btn" onclick="doBlur()">編輯器取消焦點</button>&nbsp;
                <button class="btn" onclick="insertHtml()">插入給定的內容</button>&nbsp;
                <button class="btn" onclick="getContentTxt()">獲得純文本</button>&nbsp;
                <button class="btn" id="enable" onclick="setEnabled()">可以編輯</button>&nbsp;
                <button class="btn" onclick="setDisabled()">不可編輯</button>
            </td>
        </tr>
        <tr>
            <td>
                <button class="btn" onclick="UM.getEditor('myEditor').setHide()">隱藏編輯器</button>&nbsp;
                <button class="btn" onclick="UM.getEditor('myEditor').setShow()">顯示編輯器</button>&nbsp;
                <button class="btn" onclick="UM.getEditor('myEditor').setHeight(300)">設置編輯器的高度爲300</button>&nbsp;
                <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

UEditor--富文本編輯器

介紹

特點

下載

使用方式

高效率使用windows

vue項目中多行文本超出省略失效解決方式

uploadify---jQuery多文件上傳

input框輸入文本限制

metisMenu側邊欄插件

js 調用 IOS 、Android原生方法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結