最近用到了百度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. 点击按钮回到页面顶部或者某个高度时的问题，JQUERY

    $('#shang').click(function(){ $('html,body').animate({scrollTop: '0px'}, 800); }); 不能写成$(window).ani ...

  2. bigworld源码分析（2）—— loginApp分析

    loginApp是整个bigworld进行用户认证的服务,是用户进入游戏的第一步.本篇主要针对loginApp的认证流程,如何和其他服务进行交互,以及loginApp针对多服务负载的不同做法进行分析. ...

  3. 数论 UVA 11076

    这道题目的意思简单易懂说的是给你n个数(可能有重复相同的数字),列出他们所有排列的情况,再逐位相加,求出和,例如:给你1,2,3,则排列的情况为<123>, <132>, &l ...

  4. VNC-Server安装及配置

    一.什么是VNC? VNC (Virtual Network Computer)是虚拟网络计算机的缩写.VNC 是一款优秀的远程控制工具软件,由著名的 AT&T 的欧洲研究实验室开发的.VNC ...

  5. Inversion of Control Containers and the Dependency Injection pattern（转）

    In the Java community there's been a rush of lightweight containers that help to assemble components ...

  6. JSBinding+SharpKit / 菜单介绍

  7. css中的浮动以及清除浮动

    对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也 ...

  8. JSR 303 - Bean Validation 介绍及最佳实践

    JSR 303 - Bean Validation 介绍及最佳实践 JSR 303 – Bean Validation 是一个数据验证的规范,2009 年 11 月确定最终方案.2009 年 12 月 ...

  9. LINUX yum用法

    1.确保RHEL5中已经安装了yum [root@lvs-master ~]# rpm -qa |grep yumyum-metadata-parser-1.1.2-3.el5yum-updatesd ...

  10. android学习笔记53——自动朗读TTS

    自动朗读TTS android提供了自动朗读功能--其指的是支持可以对指定文本内容进行朗读,从而发出声音: 同时android的自动朗读支持还允许把文本对应的音频录制成音频文件,方便后续播放. 这种自 ...