百度富文本编辑器UEditor安装配置全过程

网站开发时富文本编辑器是必不可少的，他可让用户自行编辑内容的样式而后上传到后台！下面咱们来介绍如何安装使用百度富文本编辑器

 

    1、下载而且设置百度富文本编辑器的样式

    你能够去百度UEditor的官网去下载编辑器，网址是http://ueditor.baidu.com/website/，下载下来以后看到有一个demo.html文件，因此你网页上面也得引入demo.html里面引入的全部js文件 

 

 

<!-- 配置文件 -->
<script type="text javascript" src="um/ueditor.config.js">
<!-- 编辑器源码文件 -->
<script type="text javascript" src="um/ueditor.all.js"></script type="text></script type="text>

<!-- 加载编辑器的容器 -->这是在header里面引入

<script id="container" name="content" type="text plain"="">
   
 
<script type="text javascript" src="js.js"></script type="text></script id="container" name="content" type="text>

 这是放在你网页上面须要放置编辑器的位置

看这样百度富文本编辑器就出来啦，而后你能够编辑编辑器的样式，推荐使用火狐浏览器的firebug工具查看编辑器的代码而后设置样式！以下，

 

例如我想要缩短编辑器的长度而且居中你就能够这样写css（注意引入css哦！）

#container {
    width:90%;
    margin:0 auto;
}

    2、设置百度UEditor文件上传路径 

    百度富文本编辑器UEditor默认上传的文件都在ueditorphpupload文件夹下，这样对于咱们网站开发确定是不方便的，因此咱们得更改上传文件目录！打开umphpconfig.json文件，里面都各类文件上传目录配置！

    例如我想更改图片上传的目录，找到带有 “/* 上传图片配置项 */”下面的代码，而后找到imagePathFormat配置，能够将“/ueditor/php/upload/image/”修改为你想要上传到的文件目录，注意后面的“{yyyy}{mm}{dd}/{time}{rand:6}”不用更改，它能够本身生成分类文件夹！你们能够参照一下个人配置

"imagePathFormat": "Upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,能够自定义保存路径和文件名格式 */

      其余的文件上传也能够参照图片上传都是改变imagePathFormat的属性，并且在PHP中只须要改变这一个属性！

    3、将百度UEditor提交到后台

    将在百度富文本编辑器UEditor中编辑的内容提交到后台，后台怎么接收呢？其实这就跟一个form表单提交同样，你能够吧整个百度UEditor看作一个textarea

<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text plain"="">
   
</script id="container" name="content" type="text>

     这是要在网页上面编辑器的位置添加的一部分代码，你们有没有发现script标签有一个name属性，全部后台就直接能够$_POST['content']接收就好啦，固然你也能够用其余name名称试试！

    4、在前台显示百度UEditor编辑的代码样式

    百度富文本编辑器UEditor带有插入代码的功能，也就是你在后台选择一种代码语言，而后在里面写入代码，前台能够给代码高亮显示，便于用户阅读代码，能够增长用户体验！

    

 

    你们能够看看看代码高亮的样式

 

 

可是这须要前台引入其余的js和css文件才能够启动代码高亮功能，因此前台引入代码以下

<link href="/um/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/um/third-party/SyntaxHighlighter/shCore.js"></script>

 基本的百度富文本编辑器UEditor安装配置就到这里啦，若是你们还有什么问题能够到王业楼的博客去讨论，你们一块儿交流学习！

 本文来源于王业楼的我的博客 本文地址：http://www.ly89.cn/detailB/50.html

 欢迎分享本文，转载请注明本文出处和地址