zoukankan      html  css  js  c++  java
  • 百度富文本编辑器UEditor安装配置全过程

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

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

        你可以去百度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>

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

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

    看这样百度富文本编辑器就出来啦,然后你可以编辑编辑器的样式,推荐使用火狐浏览器的firebug工具查看编辑器的代码然后设置样式!如下,

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

    例如我想要缩短编辑器的长度并且居中你就可以这样写css(注意引入css哦!)

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


       
     二、设置百度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中只需要改变这一个属性!

        三、将百度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名称试试!

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

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

        

    百度富文本编辑器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

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

  • 相关阅读:
    jQuery的遍历方法
    xampp配置host和httpd可以随意访问任何本机的地址
    JavaScript的this简单实用
    移动端rem布局和百分比栅格化布局
    你知道用AngularJs怎么定义指令吗?
    谈谈Angular关于$watch,$apply 以及 $digest的工作原理
    深入了解Angularjs指令中的ngModel
    如何将angularJs项目与requireJs集成
    requireJS(二)
    requireJS(一)
  • 原文地址:https://www.cnblogs.com/ly89cn/p/4881607.html
Copyright © 2011-2022 走看看