最近用到了百度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. 团队开发——冲刺2.d

    冲刺阶段二(第四天) 1.昨天做了什么? 把收集的图标进行统一整理,使用相同风格.类型,使界面更加美观. 2.今天准备做什么? 开始写测试计划书. 3.遇到什么困难? 关于昨天遇到的问题:在游戏界面加 ...

  2. Java网络应用编程

    1,网络连接 (1)用户向服务器发送请求(Socket); (2)服务器向用户发送信息(ServerSocket),一直监听的话用.accept(); 2,信息发送与接收 (1)客户向服务器端发送信息 ...

  3. PKU 1002解题总结

    闲来无事,研究了一下PKU1002的题目,大意就是把含有字母的电话号码,转换为数字,然后再计算每个电话号码出现的次数,输出.本来蛮简单的一道题,结果折腾了好久,主要也是自己的水平太菜了,先是直接用字符 ...

  4. Android应用增加计时器

    昨天写的Sudoku游戏需要增加计时器功能,使用Chronometer实现如下,由于Chronometer自己在调用stop之后后台的计时器还会继续增加,所以暂停功能需要额外实现: 在StartAct ...

  5. GCD的基本知识

    什么是GCD 全称是Grand Central Dispatch,可译为“牛逼的中枢调度器” 纯C语言,提供了非常多强大的函数 GCD的优势 GCD是苹果公司为多核的并行运算提出的解决方案 GCD会自 ...

  6. Spring MVC的常用注解

    一.@Controller @Controller 负责注册一个bean 到spring 上下文中,bean 的ID 默认为类名称开头字母小写,你也可以自己指定. 二.@RequestMapping ...

  7. SqlServer性能优化：创建性能监视器（二）

    添加三个选项: 下一步就可以了 Sql跟踪的模板: 跟踪Sql 语句的执行情况: 使用刚才的新建的模板: 用到的Sql语句: select * from [Sales].[SalesOrderDeta ...

  8. iOS-----类和对象,nil/Nil/NULL的区别

    iOS中类和对象,nil/Nil/NULL的区别 类与对象的概念 类是对同一类事物高度的抽象,类中定义了这一类对象所应具有的静态属性(属性)和动态属性(方法). 对象是类的一个实例,是一个具体的事物. ...

  9. 或许是 Nginx 上配置 HTTP2 最实在的教程了

    导读 从 2015 年 5 月 14 日 HTTP/2 协议正式版的发布到现在已经快有一年了,越来越多的网站部署了 HTTP2,HTTP2 的广泛应用带来了更好的浏览体验,只要是 Modern 浏览器 ...

  10. viewpager接受值图片轮播

    package com.baway.test; import java.util.ArrayList;import java.util.List;import java.util.Timer;impo ...