.net core + angular 项目中使用ueditor
2018-08-05 本文已影响30人
易兒善
前言
这是两个问题，
1、angular中使用ueditor
2、.net core 中使用ueditor
.net core 中使用ueditor
在.net core中使用ueditor 主要是解决.net core中后台服务编写的问题。
使用UEditor.Core 或者UEditorNetCore都可以解决此问题。但是使用过程中可能会出现以下问题。
使用方法
1、安装nuget包
UEditor.Core 和UEditorNetCore 都可以使用，唯一的不同是api封装时有不同。不过也可也下载源码自行修改。
2、修改startup.cs
在ConfigureServices方法中添加如下内容
//第一个参数为配置文件路径，默认为项目目录下config.json
//第二个参数为是否缓存配置文件，默认false
services.AddUEditorService("config.json", true);
3、添加配置文件
从ueditor官网中下载的内容取出config.json文件添加进项目，就是上一步配置的路径及文件名。
以asp版本为例，
image.png
image.png
各个版本的这个文件应该可以通用。
image.png
配置文件中的说明已经很清楚了。
4、添加api
UEditor.Core中如下添加
[Route("api/[controller]/[action]")]
public class UEditorController : WeilaiCCMUControllerBase
{
private UEditorService ue;
public UEditorController(UEditorService ue)
{
this.ue = ue;
}
[HttpGet, HttpPost]
public ContentResult Do()
{
var response = ue.UploadAndGetResponse(HttpContext);
return Content(response.Result, response.ContentType);
}
}
UEditorNetCore 中如下添加
[Route("api/[controller]")] //配置路由
public class UEditorController : Controller
{
private UEditorService ue;
public UEditorController(UEditorService ue)
{
this.ue = ue;
}
public void Do()
{
ue.DoAction(HttpContext);
}
}
常见问题
1、一般情况下， 在.net core 项目中，前台能访问的静态文件必须在wwwroot目录下面。解决的思路如下：
- 修改配置， 把文件上传到wwwroot目录下面。修改代码，返回的相对路径不包含wwwroot路径。
- 在startup.cs 文件Configure方法里添加如下设置。
如果跟目录下没有upload会报错，此方法的作用就是让跟目录下upload内静态文件可以访问。
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(Directory.GetCurrentDirectory(), "upload")),
RequestPath = "/upload",
OnPrepareResponse = ctx =>
{
ctx.Context.Response.Headers.Append("Cache-Control", "public,max-age=36000");
}
});
angular中使用ueditor
使用ngx-ueditor 基本可以解决问题。
具体参看官网：https://cipchk.github.io/ngx-ueditor
使用方法
1、安装npm 包
npm install ngx-ueditor
2、添加模块
将ueditor官网下载的内容拷贝到工程目录下
image.png
import { UEditorModule } from 'ngx-ueditor'
UEditorModule.forRoot({
// 指定ueditor.js路径目录
path: 'assets/uediter/',
// 默认全局配置项
options: {
themePath: 'assets/uediter/themes/'
}
}),
3、使用
修改上面拷贝文件中的配置文件ueditor.config.js
image.png
html中
<ueditor [(ngModel)]="product.description"
[config]="{ initialFrameHeight: 300 }"
[loadingTip]="'加载中……'"></ueditor>
常见问题
1、在前后台分离的项目中，会出现部分功能不支持跨域功能而无法使用的（例如单文件上传）。解决思路如下，修改ueditor.all.js源码。修改单文件上传方法，改为post提交。
image.png
单文件上传的方法修改如下：
utils.loadFile(document, {
src: me.options.UEDITOR_HOME_URL + "third-party/jquery-1.10.2.min.js",
tag: "script",
type: "text/javascript",
defer: "defer"
});
domUtils.on(input, 'change', function () {
if (!input.value) return;
var loadingId = 'loading_' + (+new Date()).toString(36);
var imageActionUrl = me.getActionUrl(me.getOpt('imageActionName'));
var allowFiles = me.getOpt('imageAllowFiles');
me.focus();
me.execCommand('inserthtml', '<img class="loadingclass" id="' + loadingId + '" src="' + me.options.themePath + me.options.theme + '/images/spacer.gif" title="' + (me.getLang('simpleupload.loading') || '') + '" >');
/!* 判断后端配置是否没有加载成功 *!/
if (!me.getOpt('imageActionName')) {
errorHandler(me.getLang('autoupload.errorLoadConfig'));
return;
}
// 判断文件格式是否错误
var filename = input.value,
fileext = filename ? filename.substr(filename.lastIndexOf('.')) : '';
if (!fileext || (allowFiles && (allowFiles.join('') + '.').indexOf(fileext.toLowerCase() + '.') == -1)) {
showErrorLoader(me.getLang('simpleupload.exceedTypeError'));
return;
}
var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '';
var action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?' : '&') + params);
var formData = new FormData();
formData.append("upfile", form[0].files[0]);
$.ajax({
url: action,
type: 'POST',
cache: false,
data: formData,
dataType: 'json',
processData: false,
contentType: false,
success: function (data) {
console.log("data:", data)
// data = JSON.parse(data);
var link, loader,
body = (iframe.contentDocument || iframe.contentWindow.document).body,
result = body.innerText || body.textContent || '';
var opt = me.options;
link = opt.imageUrlPrefix + data.url;
if (data.state == 'SUCCESS' && data.url) {
loader = me.document.getElementById(loadingId);
loader.setAttribute('src', link);
loader.setAttribute('_src', link);
loader.setAttribute('title', data.title || '');
loader.setAttribute('alt', data.original || '');
loader.removeAttribute('id');
domUtils.removeClasses(loader, 'loadingclass');
} else {
showErrorLoader && showErrorLoader(data.state);
}
form.reset();
}
});
function showErrorLoader(title) {
if (loadingId) {
var loader = me.document.getElementById(loadingId);
loader && domUtils.remove(loader);
me.fireEvent('showmessage', {
'id': loadingId,
'content': title,
'type': 'error',
'timeout': 4000
});
}
}
});
