Ueditor使用以及遇到的问题
原来用的是Kindeditor这个编辑器,但很久没更新了,最新版是13年更新的。现在要换成百度的Ueditor,
在这里记录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
最新文章
- python 常用模块之os、sys、shutil
- Jquery中的checkbox 及radio的问题
- WPF仿Win7便笺
- idea 清除svn登陆权限信息
- 编写高质量iOS代码与OS X代码的effective 方法小结
- Android Activity模拟dialog
- 我的Mac软件集
- 求出数组前面k个元素或数组中元素大于一半的元素(快速排序与堆排序的灵活运用)
- Windows Phone 8.1 页面导航
- How to Create Dump File for Applications
- [Bullet3]创建世界(场景)及常见函数
- 剑指offer_(17)
- Java中Json解析
- fitnesse - Variables and Symbols
- 微信小程序:微信登陆(ThinkPHP作后台)
- php代码一样,编码不同报错
- JS的变量的值怎么传递给PHP的变量?
- luogu 1471
- [转]C++11常用特性的使用经验总结
- 关于页面缩放时css错乱的处理方法---之一
热门文章
- 小程序实践(六):view内部组件排版
- Kotlin入门(24)如何自定义视图
- 电脑端支付宝支付 -前端获取支付宝返回的form 以及submit 调用支付扫码页面
- android网页打印,安卓网页打印,h5页面打印,浏览器打印,js打印工具
- AlexNet卷积神经网络【前向反馈】
- [20181220]使用提示OR_EXPAND优化.txt
- 变量查询,运算符优先级,if语句
- Windows10家庭版连接远程桌面出现credssp加密oracle修正问题
- ASP.NET -- WebForm -- Cookie的使用
- Windows下mysql服务的安装与卸载