百度富文本编辑器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
欢迎分享本文,转载请注明本文出处和地址
转载于:https://www.cnblogs.com/ly89cn/p/4881607.html
百度富文本编辑器UEditor安装配置全过程相关推荐
- TP5.1框架中百度富文本编辑器UEditor的使用
在实际项目开发中最常使用到的工具之一就是富文本编辑器,使用富文本编辑器可以实现所见即所得的效果,且所有富文本编辑器里的内容(包括图片,视频,音乐等文件)全部可以带格式的存入数据库中且只需占用一个字段. ...
- 百度富文本编辑器ueditor在https协议下无法正常插入动态地图
在浏览器https协议下,百度富文本编辑器ueditor有可能会无法正常插入动态地图.所谓"动态地图",就是在插入地图的时候,勾选右上角的"动态地图"选择框: ...
- 百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...
- themyleaf 图片上传_springboot thymeleaf 整合 百度富文本编辑器UEditor进行图片上传
项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...
- Django下富文本编辑器Ueditor的配置和使用
1.前言 "人生苦短,我用Python",Python作为一门"万能"的脚本语言,深受各个技术层级的程序猿的喜爱,而Django作为最受欢迎的Python的We ...
- Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
- html页面引入富文本编辑器,Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
- Vue 百度富文本编辑器Ueditor Spring Boot 前后台整合示例(附带完整源码)
前端 安装vue-ueditor-wrap npm i vue-ueditor-wrap 引入并注册VueUeditorWrap组件,配置组件属性 <script> import VueU ...
- 富文本编辑器ueditor使用配置
富文本编辑器(UEditor) 在平时开发Java Web项目的时候,往往会使用第三方插件来帮助我们更快的实现功能. 此文来自: 马开东云搜索 转载请注明出处 网址: http://mak ...
最新文章
- Firefox 插件:鲜味 del.icio.us,和朋友分享你的收藏
- SQL Server 2005之PIVOT/UNPIVOT行列转换
- PHP开发之环境配置
- CREATE (/IWBEP/CL_MGW_EXPAND_TREE)
- 全议程来啦!2021数据技术嘉年华,我们周四线上见!
- Java写一个接口和两个类
- 剑指offer——7.重建二叉树
- 页面三个txt加载联动省市县的代码,类似淘宝的收货地址的布局
- cenOS 安装opencv(for matlab)
- android版本升级功能,手机安卓系统怎么升级 安卓系统更新升级的三种方法介绍...
- Java操作sqlite3数据库心得(一)
- 一张照片,如何生成一个二维码?
- U盘中毒文件都不见了
- 3年100亿!苏宁易购与倍科达成重磅战略合作
- 一个简单的物流管理系统
- n皇后问题-回溯法求解
- css3动画照片墙,css3照片墙动态效果
- 用户界面设计10原则
- 鸿蒙os桌面怎么布局好看,鸿蒙OS全新PC桌面模式即将上线?回顾一下手机桌面系统的发展历程...
- Android手机截屏生成gif图片
热门文章
- 12C OCP 1Z0-063 题库(8月以前)
- mach空串 php preg_PHP 优化详解
- linux telnet localhost 25,telnet localhost 25 没反应. 大家帮忙看下什么问题...
- Zabbix的web界面基本操作
- Java高并发编程(八):Java并发容器和框架
- python怎么读write_Python如何读写文件?python写入文件读写操作详解
- IIS 7.5 解析错误 命令执行漏洞解决方案
- 在系统出现未处理的错误时,在Global的Application_Error记录下错误
- taglib遍历foreach循环list集合
- K - FatMouse and Cheese