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. YARN源码分析(一)-----ApplicationMaster

    转自:http://blog.csdn.net/androidlushangderen/article/details/48128955 YARN学习系列:http://blog.csdn.net/A ...

  2. Unity3D GUI图形用户界面系统

    1.skin变量 using UnityEngine; using System.Collections; public class Skin : MonoBehaviour { public GUI ...

  3. ImportError: cannot import name gof

    今天打开spyder说调试一个theano程序,但是import theano提示 ImportError: cannot import name gof 最后解决方案 pip install --u ...

  4. python 国内镜像

    pipy国内镜像目前有: http://pypi.douban.com/  豆瓣 http://pypi.hustunique.com/  华中理工大学 http://pypi.sdutlinux.o ...

  5. JDB调试之小试牛刀

    用JDK自带工具JDB调试示例程序HelloJDB(d:\jdb\HelloJDB) HelloJDB代码如下: public class HelloJDB { public static void ...

  6. 面试题思考：IOC的优缺点

    先讲重点  面试时怎么答: 先把IOC的概念说出来 依赖注入和控制反转 所谓的依赖注入是甲方开放接口,在它需要的时候,能够将乙方传递进来(注入):所谓的控制反转,甲乙双方不相互依赖,交易活动的进行不依 ...

  7. springmvc的一个错误

    初学ssm,碰到一个错误,非注解的就没错,注解的就错了 找了半天,终于发现错误,真的很傻比啊,导入的springframework版本不一致... 都导入4.3.18版本的即可...

  8. Linux磁盘分区的理解

    磁盘分割: 一块磁盘可以被分割为多个分区artition. 磁盘链接的方式 正常的实体机使用的都是/dev/sd[a-]的硬盘档名 虚拟机可能会使用/dev/vd[a-p]这种装置档名 SATA/US ...

  9. JAVA 遍历文件夹下的所有文件(递归调用)

    package file; import java.io.File; public class Test1 { public static void main(String[] args) { Str ...

  10. java 内存空间

    堆:new 出的对象在堆上 java栈:java程序.线程运行数据.内存数据 每个方法都有自己的栈.运行时需要的数据存在自己的栈中 每个线程对立的是图中浅蓝色的部分(java栈.本地方法栈.程序计数器 ...