UEditor文本編輯器

時間  2019-11-09
標籤 ueditor 文本編輯器 简体版
原文   原文鏈接

Ueditor是由百度web前端研發部開發所見即所得的編輯器，具備輕量，可定製，注重用戶體驗等特色。Ueditor基於BSD開源協議，除了具備代碼精簡、加載迅速的輕量級特質javascript

外，還採用了分層理念，使開發者能夠根據實際應用和需求自由定製。 php

Ueditor編輯器劃分爲了三層架構。其中，核心層爲開發者提供了諸如range、selection、domUtils類的底層API接口，中間的命令插件層不只提供了大量的基礎command，還容許開發者基於核心層進行command命令的開發，而面向用戶端的界面層則能夠提供自由定製的用戶交互界面。Ueditor開源編輯器這種擁有可配性的模式，令開發者可以根據自身須要接入任何一層進行開發。css

 下載utf8-php版本的UEditor文本編輯器，將其放入項目裏面就可使用了。html

找到index.html，用DW軟件打開，能夠看到文本編輯器是怎麼調用的。前端

必須先加載配置文件ueditor.config.js。用<div><script id="editor" type="text/plain" style="width:800px;height:300px;"></script></div>調用文本編輯器，能夠對其樣式進行設置。java

下面是不少按鈕：jquery

下面是按鈕對應的點擊事件：web

首先要實例化編輯器：var ue = UE.getEditor('editor');ajax

咱們能夠根據須要選擇調用相應按鈕與其對應的方法，並且能夠自由設置。數據庫

主要是得到內容與寫入內容，由於是在JS中操做，因此要用ajax傳遞數據。 

<script type="text/javascript">
//獲取內容
function getContent() {        
       UE.getEditor('editor').getContent();       
    }
//寫入內容
 function setContent(isAppendTo) {      
        UE.getEditor('editor').setContent('內容參數', isAppendTo);        
    }
</script>

以aaa表爲例：

 控制器AaaController.class.php：

<?php
namespace Home\Controller;
use Home\Controller\CheckController;
class AaaController extends CheckController
{
    public function Add()
    {        
        if(empty($_POST["str"]))
        {
            $this->display();    
        }
        else
        {
            $canshu = $_POST["canshu"];
            if($canshu==1)
            {
                $model = M("aaa");
                $content = $model->content = $_POST["str"];
                $times = $model->times = date("Y-m-d H:i:s");
                if($model->add())
                {
                    $id = $model->max("id");                
                    $attr = $model->where("id= '{$id}'")->select();    
                    $str = $attr[0]["content"];
                    session("str",$str);    
                    $this->ajaxReturn("OK","eval");
                }
                else
                {
                    $this->ajaxReturn("NO","eval");
                }
            }
            else
            {
                $str= session("str");
                $this->ajaxReturn("{$str}","eval");    
            }
        }
    }
View Code

模板Add.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<load href="__PUBLIC__/ueditor/utf8-php/ueditor.config.js" />
<load href="__PUBLIC__/ueditor/utf8-php/ueditor.all.min.js" />
<load href="__PUBLIC__/ueditor/utf8-php/lang/zh-cn/zh-cn.js" />
<load href="__PUBLIC__/Js/jquery-1.11.2.min.js" />

</head>

<body>
<div>
    <script id="editor" type="text/plain" style="width:800px;height:300px;"></script><!--調用文本編輯器 -->
</div>
<div id="btns">
    <div>        
        <button onclick="getContent()">肯定</button>
        <button onclick="setContent()">修改</button>        
    </div>
</div>
<div id="xianshi"></div>
<script type="text/javascript">

    
    //實例化編輯器
    //建議使用工廠方法getEditor建立和引用編輯器實例，若是在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例
    var ue = UE.getEditor('editor');
    //獲取內容
    function getContent() {
        var str = UE.getEditor('editor').getContent();
        $("#xianshi").html(UE.getEditor('editor').getContent());        
        //將獲取內容傳給數據庫
        $.ajax({
            url:"__ACTION__",
            data:{str:str,canshu:1},
            type:"POST",
            dataType:"TEXT",
            success: function(data){                
                if(data.trim()=="OK")
                {
                    alert("添加成功！");    
                }
                else
                {
                    alert("添加失敗！");    
                }
                }
            });
    }
    //寫入內容
    function setContent(isAppendTo) {
        $.ajax({
            url:"__ACTION__",
            data:{canshu:2},
            type:"POST",
            dataType:"TEXT",
            success: function(data){
                
                UE.getEditor('editor').setContent(data, isAppendTo);
                }
            });        
    }


</script>
View Code

附：完整UEditor文本編輯器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
    <!--建議手動加載語言，避免在IE下有時由於加載語言失敗致使編輯器加載失敗-->
    <!--這裏加載的語言文件會覆蓋你在配置項目裏添加的語言類型，好比你在配置項目裏配置的是英文，這裏加載的中文，那最後就是中文-->
    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>

    <style type="text/css">
        div{
            width:100%;
        }
    </style>
</head>
<body>
<div>
    <h1>完整demo</h1>
    <script id="editor" type="text/plain" style="width:800px;height:300px;"></script><!--調用文本編輯器 -->
</div>
<div id="btns">
    <div>
        <button onclick="getAllHtml()">得到整個html的內容</button>
        <button onclick="getContent()">得到內容</button>
        <button onclick="setContent()">寫入內容</button>
        <button onclick="setContent(true)">追加內容</button>
        <button onclick="getContentTxt()">得到純文本</button>
        <button onclick="getPlainTxt()">得到帶格式的純文本</button>
        <button onclick="hasContent()">判斷是否有內容</button>
        <button onclick="setFocus()">使編輯器得到焦點</button>
        <button onmousedown="isFocus(event)">編輯器是否得到焦點</button>
        <button onmousedown="setblur(event)" >編輯器失去焦點</button>

    </div>
    <div>
        <button onclick="getText()">得到當前選中的文本</button>
        <button onclick="insertHtml()">插入給定的內容</button>
        <button id="enable" onclick="setEnabled()">能夠編輯</button>
        <button onclick="setDisabled()">不可編輯</button>
        <button onclick=" UE.getEditor('editor').setHide()">隱藏編輯器</button>
        <button onclick=" UE.getEditor('editor').setShow()">顯示編輯器</button>
        <button onclick=" UE.getEditor('editor').setHeight(300)">設置高度爲300默認關閉了自動長高</button>
    </div>

    <div>
        <button onclick="getLocalData()" >獲取草稿箱內容</button>
        <button onclick="clearLocalData()" >清空草稿箱</button>
    </div>

</div>
<div>
    <button onclick="createEditor()">
    建立編輯器</button>
    <button onclick="deleteEditor()">
    刪除編輯器</button>
</div>

<script type="text/javascript">

    //實例化編輯器
    //建議使用工廠方法getEditor建立和引用編輯器實例，若是在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例
    var ue = UE.getEditor('editor');


    function isFocus(e){
        alert(UE.getEditor('editor').isFocus());
        UE.dom.domUtils.preventDefault(e)
    }
    function setblur(e){
        UE.getEditor('editor').blur();
        UE.dom.domUtils.preventDefault(e)
    }
    function insertHtml() {
        var value = prompt('插入html代碼', '');
        UE.getEditor('editor').execCommand('insertHtml', value)
    }
    function createEditor() {
        enableBtn();
        UE.getEditor('editor');
    }
    function getAllHtml() {
        alert(UE.getEditor('editor').getAllHtml())
    }
    function getContent() {
        var arr = [];
        arr.push("使用editor.getContent()方法能夠得到編輯器的內容");
        arr.push("內容爲：");
        arr.push(UE.getEditor('editor').getContent());
        alert(arr.join("\n"));
    }
    function getPlainTxt() {
        var arr = [];
        arr.push("使用editor.getPlainTxt()方法能夠得到編輯器的帶格式的純文本內容");
        arr.push("內容爲：");
        arr.push(UE.getEditor('editor').getPlainTxt());
        alert(arr.join('\n'))
    }
    function setContent(isAppendTo) {
        var arr = [];
        arr.push("使用editor.setContent('歡迎使用ueditor')方法能夠設置編輯器的內容");
        UE.getEditor('editor').setContent('歡迎使用ueditor', isAppendTo);
        alert(arr.join("\n"));
    }
    function setDisabled() {
        UE.getEditor('editor').setDisabled('fullscreen');
        disableBtn("enable");
    }

    function setEnabled() {
        UE.getEditor('editor').setEnabled();
        enableBtn();
    }

    function getText() {
        //當你點擊按鈕時編輯區域已經失去了焦點，若是直接用getText將不會獲得內容，因此要在選回來，而後取得內容
        var range = UE.getEditor('editor').selection.getRange();
        range.select();
        var txt = UE.getEditor('editor').selection.getText();
        alert(txt)
    }

    function getContentTxt() {
        var arr = [];
        arr.push("使用editor.getContentTxt()方法能夠得到編輯器的純文本內容");
        arr.push("編輯器的純文本內容爲：");
        arr.push(UE.getEditor('editor').getContentTxt());
        alert(arr.join("\n"));
    }
    function hasContent() {
        var arr = [];
        arr.push("使用editor.hasContents()方法判斷編輯器裏是否有內容");
        arr.push("判斷結果爲：");
        arr.push(UE.getEditor('editor').hasContents());
        alert(arr.join("\n"));
    }
    function setFocus() {
        UE.getEditor('editor').focus();
    }
    function deleteEditor() {
        disableBtn();
        UE.getEditor('editor').destroy();
    }
    function disableBtn(str) {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            if (btn.id == str) {
                UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
            } else {
                btn.setAttribute("disabled", "true");
            }
        }
    }
    function enableBtn() {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
        }
    }

    function getLocalData () {
        alert(UE.getEditor('editor').execCommand( "getlocaldata" ));
    }

    function clearLocalData () {
        UE.getEditor('editor').execCommand( "clearlocaldata" );
        alert("已清空草稿箱")
    }
</script>
</body>
</html>
View Code
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程