最近用到了百度Ueditor，也来写一写百度Ueditor的使用教程：

　　一、从官网下载百度Ueditor，http://ueditor.baidu.com/website/download.html，根据自己的语言选择压缩包：

　　

　　二、使用百度Ueditor：

　　1）简单的demo如下【更多的配置请阅读官方文档：http://fex.baidu.com/ueditor/#server-php】：

<!doctype html>

<html lang="zh_CN">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <script type="text/javascript" charset="utf-8" src="__UE__/ueditor.config.js"></script>

    <script type="text/javascript" charset="utf-8" src="__UE__/ueditor.all.min.js"> </script>

    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->

    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->

    <script type="text/javascript" charset="utf-8" src="__UE__/lang/zh-cn/zh-cn.js"></script>

    <title>Ueditor</title>

</head>

<body>

    <form action="{:U('Ueditor/saveUeditor')}" method="post"> 

        <script id="editor" type="text/plain" name="content" style="width:1024px;height:500px;"></script> 

        <button type="submit">提交</button>

    </form> 

    <script type="text/javascript">

    //实例化编辑器

    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例

    var ue = UE.getEditor('editor');

    </script>

</body>

</html>

　　2）上传图片和其他文件需要对\Ueditor\php\config.json进行配置，以上传图片为例：

    1. 上传路径配置：（官网例子）http://fex.baidu.com/ueditor/#server-path
    2. PHP使用说明：（官网例子）http://fex.baidu.com/ueditor/#server-php　　

　　三、展示编辑后的内容demo:

　　

<!doctype html>

<html lang="zh_CN">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <script type="text/javascript" charset="utf-8" src="__UE__/ueditor.config.js"></script>

    <script type="text/javascript" charset="utf-8" src="__UE__/ueditor.all.min.js"> </script>

    <script src="__UE__/ueditor.parse.js"></script>

    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->

    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->

    <script type="text/javascript" charset="utf-8" src="__UE__/lang/zh-cn/zh-cn.js"></script>

    <script type="text/javascript" charset="utf-8" src="__UE__/third-party/SyntaxHighlighter/shCore.js"></script>

    <link rel="stylesheet" href="__UE__/third-party/SyntaxHighlighter/shCoreDefault.css">

    <title>展示内容ueditor</title>

</head>

<body>

    <div class="thiscontent">

    {$content}

    </div>

</body>

<script type="text/javascript">

    uParse('.thiscontent',{

        rootPath: '../'

    });

</script>

</html>

百度Ueditor的更多相关文章

  1. 百度UEditor在线编辑器的配置和图片上传

    前言 最近在项目中使用了百度UEditor富文本编辑器,配置UEditor过程中遇到了几个问题,在此记录一下解决方案和使用方法,避免以后使用UEditor出现类似的错误. 基本配置 一.下载UEdit ...

  2. 百度ueditor 实例化 Cannot set property 'innerHTML' of null 完美解决方案

    此时此刻,我正在用博客园推荐的TinyMCE编辑器写这个博客,突然想起最近在项目中使用百度ueditor编辑器中的一些经历.所以记录在此,与大家分享. 不得不说,百度ueditor是一款很好的在线编辑 ...

  3. 百度UEditor组件出现Parameters: Invalid chunk &#39;&#39; ignored警告的分析

    使用百度UEditor在线编辑器组件时,出现Parameters: Invalid chunk '' ignored的警告,之前的项目使用却没有.两个项目的环境应该是一样的. 没有时间去对照两项目使用 ...

  4. 百度UEditor编辑器使用教程与使用方法

    我们在做网站的时候,网站后台系统一般都会用到web编辑器,今天笔者就给大家推荐一款百度UEditor编辑器.关于这款百度UEditor编辑器官网上也有简单的教程,不过看着比较费劲,今天笔者就跟大家分享 ...

  5. 解决百度Ueditor编辑器表格不显示边框问题

    一.主要内容 CMS使用百度Ueditor编辑器中的表格功能,在编辑模式下可以正常显示边框,而文章发布之后表格不能显示边框.本博文经过查阅相关资料,最终解决了该问题. 二.使用平台 1. dedecm ...

  6. ThinkPHP整合百度Ueditor

    文章来源:http://www.thinkphp.cn/code/267.html ThinkPHP整合百度Ueditor,基于黄永成老师的视频说明的申明:最好大家都能写绝对路径的都写好绝对路径比如: ...

  7. 百度UEditor编辑器关闭抓取远程图片功能（默认开启）

    这个坑娘的功能,开始时居然不知道如何触发,以为有个按钮,点击一下触发,翻阅了文档,没有发现,然后再网络上看到原来是复制粘贴非白名单内的图片到编辑框时触发,坑娘啊............... 问题又来 ...

  8. ThinkPHP整合百度Ueditor图文教程

    ThinkPHP整合百度Ueditor图文教程 ThinkPHP整合百度Ueditor,基于黄永成老师的视频说明的申明:最好大家都能写绝对路径的都写好绝对路径比如:window.UEDITOR_HOM ...

  9. 百度ueditor富文本编辑器的使用

    百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...

随机推荐

  1. 使用python－openCV对摄像头捕捉的镜头进行二值化并打上文字

    用CaptureFromCAM函数对图像进行提取: capture = cv.CaptureFromCAM(0) 读取直接的视频文件只需将语句改变为: capture = cv.VideoCaptur ...

  2. 【OpenCV】图像的遍历

    Mat类的两种遍历比较快的方式,分别给出了按行和按列遍历,以及运行过程图. 原图: 按行遍历过程图 按列遍历过程图 代码如下: //ptr逐行访问 void ptrScanX(Mat& src ...

  3. Jquery 读取表单选中值

    1.获取复选框的选中值 <title> JS 获取复选框选中的值</title> <script src="jquery-1.11.2.min.js" ...

  4. jQuery UI Autocomplete是jQuery UI的自动完成组件（share）

    官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...

  5. [读书笔记]OSGI-灵活的类加载器架构

    以下内容来自周志明的<深入理解Java虚拟机>. 学习JEE规范,去看JBoss源码:学习类加载器,就去看OSGI源码. OSGI,即Open Service Gateway Initia ...

  6. poj1458 Common Subsequence ——最长公共子序列

    link:http://poj.org/problem?id=1458 最基础的那种 #include <iostream> #include <cstdio> #includ ...

  7. 【转】关于.net framework4.0以及4.5安装失败，“安装时发生严重错误”……

    也不知道管不管用,先记着 今天忽然想装一个vs2010,然后装了好几遍,每次都在安装.net4.0的时候失败.好吧,我自己手动装行么.于是手动去装.net 4.0. 结果在还是返回"安装时发 ...

  8. phoenix与spark整合

    目的是将phoenix做存储,spark做计算层.这样就结合了phoenix查询速度快和spark计算速度快的优点.在这里将Phoenix的表作为spark的RDD或者DataFrames来操作,并且 ...

  9. 9、java中的final关键字

    /* final : 最终.作为一个修饰符, 1,可以修饰类,函数,变量. 2,被final修饰的类不可以被继承.为了避免被继承,被子类复写功能. 3,被final修饰的方法不可以被复写. 4,被fi ...

  10. wordpress google字体和gravatar头像不显示问题处理

    wordpress 安装好后,发现网站打开很慢. 查看原因后发现是因为总所周知的原因:google字体无法加载.gravatar头像无法加载. 在网上查了下,说是要把google字体加载连接修改下,和 ...