码迷,mamicode.com
首页 > Web开发 > 详细

在基于AngularJs架构的ABP项目中使用UEditor

时间:2017-11-26 19:40:09      阅读:312      评论:0      收藏:0      [点我收藏+]

标签:template   密码   entity   segment   font   ng-model   content   head   数据库连接   

【前提须知】

【1.下载ABP模板】

https://aspnetboilerplate.com/Templates

选择ASP.NET MVC 5.x页签下基于AngularJs前端框架和基于Entity Framework对像映射关系的模板,如下图所示:

技术分享图片

 

【2.下载UEditor插件】

http://ueditor.baidu.com/website/download.html#ueditor

这里我使用的是.net版本的插件,其它版本的没有测试,道理应该是一样的。

技术分享图片

 【3.打开ABP项目

  • 解压项目(UEditorTestProject.zip
  • 还原Nuget包
  • 将(UEditorTestProject.Web)设为启动项
  • 修改数据库连接字符串(UEditorTestProject.Web项目中的Web.config),执行EF的code first命令,生成数据库
  • Ctrl + F5 运行程序,输入用户名密码,打开网站

技术分享图片

4.到angular-ueditor官网上下载angular-ueditor.js

5.添加插件

把解压缩后的ueditor插件angular-ueditor.js添加到UEditorTestProject.Web项目中的lib文件夹下,下图是添加完后的代码结构:

技术分享图片

6.引用脚本

添加完插件后,需要将脚本引入到模板页中,下图是引入脚本的截图:

技术分享图片

7.将angular-ueditor注入到的应用程序中

技术分享图片

8.添加测试页面,进行测试

<div class="row">
                        <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="card main-content">
                                <div class="body table-responsive">
                                    <div class="ueditor" ng-model="vm.content"></div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">HTML</h3>
                                    </div>
                                    <div class="panel-body">
                                        {{vm.content}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

 成功 :)

技术分享图片

问题

  • 如果你的上传图片功能无法正常使用,请检查ueditor的配置文件中图片的上传路径是否配置正确。

 技术分享图片

  • 如果上传完图片后,发现vm.content的值仍然还是“正在上传....",如下所示,那么不要紧张,这个是ueditor的一个bug。

技术分享图片

针对这个bug,已经有网友解决了(https://segmentfault.com/q/1010000007859368),解决方案就是针对ueditor.all.js文件中方法callback()函数添加一行代码,使$apply触发生效,如下图所示:

技术分享图片

 

至于其它的配置,请参考Ueditor官方文档,这里就不再赘述了。

 

在基于AngularJs架构的ABP项目中使用UEditor

标签:template   密码   entity   segment   font   ng-model   content   head   数据库连接   

原文地址:http://www.cnblogs.com/lishidefengchen/p/7899812.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!