Ueditor是由百度web前端研发部开发所见即所得的编辑器，具有轻量，可定制，注重用户体验等特点。Ueditor基于BSD开源协议，除了具有代码精简、加载迅速的轻量级特质

外，还采用了分层理念，使开发者可以根据实际应用和需求自由定制。

Ueditor编辑器划分为了三层架构。其中，核心层为开发者提供了诸如range、selection、domUtils类的底层API接口，中间的命令插件层不仅提供了大量的基础command，还允许开发者基于核心层进行command命令的开发，而面向用户端的界面层则可以提供自由定制的用户交互界面。Ueditor开源编辑器这种拥有可配性的模式，令开发者能够根据自身需要接入任何一层进行开发。

下载utf8-php版本的UEditor文本编辑器，将其放入项目里面就可以使用了。

找到index.html，用DW软件打开，可以看到文本编辑器是怎么调用的。

必须先加载配置文件ueditor.config.js。用<div><script id="editor" type="text/plain" style="width:800px;height:300px;"></script></div>调用文本编辑器，可以对其样式进行设置。

下面是很多按钮：

下面是按钮对应的点击事件：

首先要实例化编辑器：var ue = UE.getEditor('editor');

我们可以根据需要选择调用相应按钮与其对应的方法，而且可以自由设置。

主要是获得内容与写入内容，因为是在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");

            }

        }

    }

模板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>

附：完整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>

UEditor文本编辑器的更多相关文章

  1. Ueditor文本编辑器(新浪SAE平台版本) - 下载频道 - CSDN.NET

    Ueditor文本编辑器(新浪SAE平台版本) - 下载频道 - CSDN.NET Ueditor文本编辑器(新浪SAE平台版本)

  2. ASP.MVC 项目中使用 UEditor 文本编辑器

    1.下载UEditor 源文件,并导入项目中 2.添加项目中需要使用的CSS和JS //Ueditor 文本编辑器必备的StyleBundle和ScriptBundle StyleBundle ued ...

  3. JForum论坛添加UEditor文本编辑器

    在使用JForum论坛中发现论坛自带的文本编辑器不好用,不能上传图片,样式编辑也很麻烦,就想着把这个文本编辑器替换掉,我这里选用的是百度的开源富文本编辑器UEditor 替换后的效果图 替换方法如下 ...

  4. 个人纪录（初）----Ueditor文本编辑器的引用

    源码下载地址:http://ueditor.baidu.com/website/ 打开源码参考.html 把ueditor引入自己的web项目下. 在需要引入文本的地方写个div,设置样式等. 并且在 ...

  5. ueditor文本编辑器的使用

    1,头部引用 <link href="ueditor/themes/default/css/ueditor.css" rel="stylesheet" t ...

  6. ueditor 文本编辑器

    百度编辑器       压缩包在文件里 百度UEditor编辑器使用教程与使用方法 发布时间:2014-08-23 14:23:34.0 作者:青岛做网站 我们在做网站的时候,网站后台系统一般都会用到 ...

  7. 日常问题181101: ueditor文本编辑器

    下载地址: https://ueditor.baidu.com/website/download.html#ueditor 把下载好的文件整个复制到根目录(或是,想要存放的目录) 引入css: < ...

  8. 2016/05/16 UEditor 文本编辑器 使用教程与使用方法

    第一:百度UEditor编辑器的官方下载地址 ueditor 官方地址:http://ueditor.baidu.com/website/index.html 开发文档地址:http://uedito ...

  9. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

随机推荐

  1. 请写出一个超链接，点击链接后可以向zhangsan@d-heaven.com发送电子邮件。

    请写出一个超链接,点击链接后可以向zhangsan@d-heaven.com发送电子邮件. <a href=”mailto: zhangsan@d-heaven.com”>发邮件</ ...

  2. 怎样看K线图（实图详解）

    K线图由开盘价.收盘价.最高价和最低价组成.       上面两种图叫作实体红K线和实体黑K线,实体红K线意味买力强劲,市场有强烈的做多欲望,此时可持股待涨.实体黑K线则代表市场完全进入恐惧状态,如果 ...

  3. App上传到应用宝的一些问题

    问题:提示应用需要认领,怎么解决? 原因:如果app之前在其他市场上传过,再上传到应用宝,应用宝首先会从其他应用市场抓包,如果发现抓取的包和上传的app包名都是一致的,这时候提示你需要认领app. 操 ...

  4. 上传图片到数据库，读取数据库中图片并显示(C#)

    from:http://blog.csdn.net/bfcady/article/details/2622701 思路:建立流对象,将上传图片临时保存到byte数组中,再用SQL语句将其保存到数据库中 ...

  5. 如何下载ubuntu桌面，并使用

    下载ubuntu,进行linux系统的操作 1.下载ubuntu 百度搜索ubuntu或直达下载链接http://cn.ubuntu.com/download/ 你可以选择,优麒麟16或者Ubuntu ...

  6. 最近5年133个Java面试问题列表

    Java 面试随着时间的改变而改变.在过去的日子里,当你知道 String 和 StringBuilder 的区别就能让你直接进入第二轮面试,但是现在问题变得越来越高级,面试官问的问题也更深入. 在我 ...

  7. 显示所有APP的进程详细信息（进程ID、进程所在UID、进程占用内存、进程名）

    main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and ...

  8. 【BZOJ1367】[Baltic2004]sequence 左偏树

    [BZOJ1367][Baltic2004]sequence Description Input Output 一个整数R Sample Input 7 9 4 8 20 14 15 18 Sampl ...

  9. 【BZOJ1570】[JSOI2008]Blue Mary的旅行 动态加边网络流

    [BZOJ1570][JSOI2008]Blue Mary的旅行 Description 在一段时间之后,网络公司终于有了一定的知名度,也开始收到一些订单,其中最大的一宗来自B市.Blue Mary决 ...

  10. [LintCode] 最后一个单词的长度

    class Solution { public: /** * @param s A string * @return the length of last word */ int lengthOfLa ...