百度富文本编辑器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>
这是放在你网页上面需要放置编辑器的位置
看这样百度富文本编辑器就出来啦,然后你可以编辑编辑器的样式,推荐使用火狐浏览器的firebug工具查看编辑器的代码然后设置样式!如下,
例如我想要缩短编辑器的长度并且居中你就可以这样写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带有插入代码的功能,也就是你在后台选择一种代码语言,然后在里面写入代码,前台可以给代码高亮显示,便于用户阅读代码,可以增加用户体验!
大家可以看看看代码高亮的样式
但是这需要前台引入其他的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
欢迎分享本文,转载请注明本文出处和地址
百度富文本编辑器UEditor安装配置全过程的更多相关文章
- 百度富文本编辑器ueditor使用总结
最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...
- springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)
springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...
- thinkphp5.1中适配百度富文本编辑器ueditor
百度富文本编辑器ueditor虽然很老,但是功能齐全,我近期需要能批量粘贴图片的功能,但是找不到,很无奈.然后现在就分享一下如何把ueditor适配到thinkphp5.1,有知道如何批量上传图片的艾 ...
- 百度富文本编辑器ueditor使用启示
百度富文本编辑器ueditor使用启示 一.总结 一句话总结:使用工具,多去看官方demo,非常详细. 二.百度富文本编辑器ueditor使用启示 官方完整demo 官方完整demo对应的源代码 &l ...
- 百度富文本编辑器ueditor在jsp中的使用(ssm框架中的应用)
折腾了一下午终于把百度富文本编辑器ueditor搞定了! 项目地址:https://github.com/724888/lightnote_new 首先我参考了一个ueditor的demo ...
- Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
- Jfinal整合百度富文本编辑器ueditor
ueditor配置文件ueditor.config.js修改参数serverUrl:(改为要调用的action) 后台代码 package com.sandu.mega.admin.ueditor; ...
- Html引入百度富文本编辑器ueditor及自定义工具栏
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
- 富文本编辑器UEditor的配置使用方法
将下载的富文本编辑器的文件解压后放到 webcontent 下 如果 文件中的jsp文件夹下的controller.java文件报错的话 就将jsp下的lib文件夹中的文件都复制到 web-i ...
随机推荐
- bzoj4702: 装箱游戏
Description Alice和Bob正在玩一个非常无聊的游戏以打发时间.游戏是这样的.初始的时候,有n个箱子和m个物品.箱子.物 品都是不同的.因此有nm种方法把这些物品放到箱子里.两个人轮流操 ...
- "unresolved external symbol __imp__WSACleanup@0"
编译时出现这种问题怎么解决:"unresolved external symbol __imp__WSACleanup@0"出现此类问题一般是ws2_32.lib这个lib没有li ...
- Visual C++ for Linux Development
原文 https://blogs.msdn.microsoft.com/vcblog/2016/03/30/visual-c-for-linux-development/ Visual C++ fo ...
- 黄聪:TinyMCE 4 增强 添加样式、按钮、字体、下拉菜单和弹出式窗口
我最喜欢 WordPress 3.9 的更新是使用了 TinyMCE 4.0 编辑器.新的 TinyMCE 看起来看起来更整洁(真正匹配WP仪表板),它有一些非常不错的附加功能.我的很多老主题和插件必 ...
- jQuery插件:用于获取元素自身的HTML内容
jQuery.fn.outerHTML = function(s) { return (s) ? this.before(s).remove() : $("<Hill_man>& ...
- DBA_基本Bash语法汇总(汇总)
2014-06-26 Created By BaoXinjian
- java中treemap和treeset实现(红黑树)
java中treemap和treeset实现(红黑树) TreeMap 的实现就是红黑树数据结构,也就说是一棵自平衡的排序二叉树,这样就可以保证当需要快速检索指定节点. TreeSet 和 Tre ...
- 带节日和农历的js日历 带农历的脚本:
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- java中的浅拷贝与深拷贝
浅拷贝: package test; class Student implements Cloneable { private int number; public int getNumber() { ...
- protobuf使用说明
1..proto文件为要生成.java文件的模板文件,其中包含名称空间.文件名等信息2.cmd中进入当前目录D:\JAVA\protoc-2.5.0-win323.运行 protoc.exe --ja ...