Ueditor使用以及遇到的问题
原来用的是Kindeditor这个编辑器,但很久没更新了,最新版是13年更新的。现在要换成百度的Ueditor,
在这里记录Ueditor的使用流程和遇到的问题。
一、下载
1.Ueditor官网
这里有三个版本:1.UBuilder:可以自定义选择自已需要的功能,然后会下载对应的文件。
2.开发版:功能多,适合写文章,排版。
3.Mini版,基本功能,适合做一些回复评论之类的。
根据自己使用的语言下载对应版本,我下载的是.Net版本,UTF-8版。
二、使用(环境为MVC4,.net4.5)
下载下来有两个文件夹,只要utf8-net文件夹,_MACOSX是解压多出来的。
1.在项目上建一个Plug文件夹,把utf8-net拖到Plug文件夹下,把utf8-net文件夹改名为Ueditor
2.建一个控制器:UeditorDemo => 建actione:Index =>添加Index视图。
3.这时打开管网,上面有一个文档,打开文档可以看到。
根据文档,我们把index.cshtml写成
<title>UeditorDemo</title><!-- 配置文件 --><script src="~/Plug/Ueditor/ueditor.config.js"></script><!-- 编辑器源码文件 --><script src="~/Plug/Ueditor/ueditor.all.min.js"></script><!-- 实例化编辑器 --><script type="text/javascript">window.onload = function () {var ue = UE.getEditor('container');}</script> </head> <body><!-- 加载编辑器的容器 --><script id="container" name="content" type="text/plain">这里写你的初始化内容</script></body>
然后运行,遇到了错误
解决:把Ueditor->net->bin下的文件全删了。
再次运行,再遇到错误
解决: 把Ueditor->net->config.json第一句删注释删除(下面圈出部分)。
再次运行,成功得到想要的页面
三、后台获取数据:
前端显示已经没问题了,然后到后台获取数据看行不行。
1.修改index.cshtml代码,添加一个form表单,让数据可以提交到后台
修改后变成:
<title>UeditorDemo</title><!-- 配置文件 --><script src="~/Plug/Ueditor/ueditor.config.js"></script><!-- 编辑器源码文件 --><script src="~/Plug/Ueditor/ueditor.all.min.js"></script><!-- 实例化编辑器 --><script type="text/javascript">window.onload = function () {//initialFrameWidth这个参数是宽跟当前窗口自动改变大小var ue = UE.getEditor('container', { initialFrameWidth: null });}</script> </head> <body><form action="/UeditorDemo/Index" method="post"><!-- 加载编辑器的容器 --><script id="container" name="content" style="max-width:800px; type="text/plain">这里写你的初始化内容</script><input type="submit" value="提交" /></form> </body>
2.控制器添加一个action,接收前端页面传来的数据,因为.net默认不允许传html表签到后台的,所以要在控制器前加一个特性[ValidateInput(false)]
[ValidateInput(false)][HttpPost]public ActionResult Index(FormCollection fc){return Content(fc["content"]);}
3.运行,成功输出前端的内容
四、上传文件
1.直接使用上传功能。效果:
在浏览器按F12查看图片的路径:
原来是路径少了一个Plug,去项目中查看文件已经是成功上传的了。
2.修改图片上传路径
找到Ueditor->net->config.json这个文件,
修改"imageUrlPrefix": "/ueditor/net/" => "imageUrlPrefix": "/Plug/ueditor/net/"
再次运行上传,成功,再试多图上传,也成功。
后言:这里是Ueditor的基本使用,其它功能请查阅官网文档和API。
demo地址:http://pan.baidu.com/s/1gebr9r9
转载于:https://www.cnblogs.com/wei325/p/5253406.html
Ueditor使用以及遇到的问题相关推荐
- 【PHP+JS】uploadify3.2 和 Ueditor 修改上传文件 大小!!
一.写在最开始: 前提条件:服务器php.ini 已经修改了变量[ upload_max_filesize ],可以设定为8M,一般8M足够用了.(重启) 1.uploadify3.2 修改文件大小: ...
- thinphp 整合ueditor
我的ueditor是部署在public/editor 部署前台页面 <script type="text/javascript" > var UEDITOR_HOME_ ...
- Ueditor和CKeditor 两款编辑器的使用与配置
一丶ueditor 百度编辑器 1.官方文档,演示,下载地址:http://ueditor.baidu.com/website/index.html 2.百度编辑器的好:Editor是由百度web前端 ...
- ueditor与七牛云存储结合
2019独角兽企业重金招聘Python工程师标准>>> 摘要: ueditor与七牛云存储结合,主要是表单api. ueditor上传图片到七牛云存储 ueditor结合七牛传图片 ...
- ueditor php 附件,ueditor单独调用上传附件和图片的功能
第一步, 引入文件 第二步 html元素 调用的页面: 上传图片 上传文件 第三步 编写js代码 var _editor; $(function() { //重新实例化一个编辑器,防止在上面的edit ...
- 解决Chrome中UEditor插入图片的选择框加载过慢问题
解决Chrome中UEditor插入图片的选择框加载过慢问题 ../resources/plugins/ueditor/ueditor.all.js 中line24489/24498中的 accept ...
- 关于百度编辑器UEditor在asp.net中的使用方法!
为了完成自己想要的功能效果,在项目中使用到了百度编辑器,为了搞明白,苦心学习查资料搞了整整一天,总结一下. 在asp.net 的项目中目前我觉得有两种情况,一种是没有使用模板页的,一种是使用了模板页的 ...
- ueditor编辑器和at.js集成
源码: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8&qu ...
- 百度UEditor开发案例(JSP)
本案例的开发环境:MyEclipse+tomcat+jdk 本案例的开发内容: 用百度编辑器发布新闻(UEditor的初始化开发部署) 编辑已发过的新闻(UEditor的应用--编辑旧文章) 上传附件 ...
- laravel-admin集成ueditor编辑器的图片列表显示问题解决方法
laravel-admin集成ueditor推荐使用laravel-u-editor,它是ueditor的laravel composer版本.基于UEditor 1.4.3.3开发,支持en.zh_ ...
最新文章
- 路由器上不了网?PPPoE协议了解一下
- pytorch 获取模型参数_锂电池P2D模型参数获取:平衡电势
- 04 能够使用using和namespace引用和定义命名空间 1214
- 红橙Darren视频笔记 ViewGroup事件分发分析 基于API27
- 【elastic】ES启动选举主节点 RemoteTransportException CoordinationStateRejected became follower
- Liberty glance 新功能 healthcheck
- anjuta调试caffe
- 双线性光强插值(Gouraud明暗处理)学习笔记
- 鉴客 iPad横屏(Landscape)尺寸规格说明
- 分布式计算原理之分布式协调与同步(1)——分布式事务
- 如何记住OSI七层协议模型,脑洞大开有木有?
- 免费的mysql空间
- CSS精灵图和字体图标
- GPS芯片获取的卫星时间会出现快几秒的原因
- 计算机应用基础简化版,电大宝典1200《计算机应用基础》期末考试题库简化版2020年1月年最新(00808).pdf...
- matlab 同步原理搜集
- 离散度计算公式 python_计算离散点的曲率(附Python, MATLAB代码)
- 读书笔记以及失效分析心得。
- 全球及中国智能建筑行业十四五规模预测与发展格局分析报告2021版
- ​GeForce 和 TITAN 产品​对CUDA的支持对照表
热门文章
- TCP协议三次握手/四次挥手
- ogg sqlserver mysql_ogg 报错,求大神解决方法
- vant 日历插件slots_vue的vant组件库中的slot如何按需使用呢
- 1分钟玩转Kafka
- [零基础学JAVA]Java SE面向对象部分-17.面向对象高级(05)
- Visual Studio 2017 通过SSH 调试Linux 上.NET Core
- Fastjson反序列化泛型类型时候的一个问题
- django 安装/部署过程
- LeetCode 5355. T 秒后青蛙的位置
- C++数据结构与算法 队列的应用之图元识别