Ueditor富文本Django项目使用说明

最新推荐文章于 2024-04-18 10:12:18 发布

原创最新推荐文章于 2024-04-18 10:12:18 发布 · 728 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Django #Ueditor

Web 同时被 3 个专栏收录

8 篇文章

订阅专栏

Python

7 篇文章

订阅专栏

前端

4 篇文章

订阅专栏

本文档详细介绍了如何在Django 1.11.7后端和Angular6前端环境下，集成并使用Ueditor。涉及到DjangoUeditor的安装、配置与Bug修复，以及Angular6中ngx-neditor的安装、配置与代码修改，以实现富文本编辑功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

该使用说明针对的是后端采用Django版本为1.11.7，前端使用angular6的说明。

DjangoUeditor 是百度Ueditor的后端服务的Django版本

安装方式

pip install DjangoUeditor

基础配置

settings.py

INSTALLED_APPS = ( #........ 'DjangoUeditor', )

urls.py

url(r'^ueditor/',include('DjangoUeditor.urls' )),

由于其版本过旧，且存在BUG较多，需要进行一些代码修改。

DjangoUeditor/urls.py

4- from django.conf.urls import patterns, url

4+ from django.conf.urls import url

6- from django.conf.urls.defaults import patterns, url

6+ from django.conf.urls.defaults import url

from views import get_ueditor_controller

urlpatterns = patterns('',

10+ urlpatterns = [

url(r'^controller/$',get_ueditor_controller)

)

12+ ]

DjangoUeditor/views.py

需要将全局的json.dumps(u"{'state:'ERROR'}" 修改为json.dumps(u"{'state’:'ERROR'}"

134- UploadFieldName=request.GET.get(upload_field_name[action],USettings.UEditorUploadSettings.get(action,"upfile"))

134+ UploadFieldName=request.GET.get(upload_field_name[action],USettings.UEditorUploadSettings.get(upload_field_name[action],"upfile"))

223- remote_urls=request.POST.getlist("source[]",[])

223+ remote_urls=request.POST.getlist("file[]",[])

274- OutputPathFormat=(request.GET.get(path_format,USettings.UEditorSettings["defaultPathFormat"]) % path_format_var).replace("\\","/")

274+ OutputPathFormat=(USettings.UEditorUploadSettings.get(path_format,USettings.UEditorSettings["defaultPathFormat"]) % path_format_var).replace("\\","/")

DjangoUeditor/widgets.py

50- self.upload_settings.update({

51- "imagePathFormat": imagePath,

52- "filePathFormat": filePath

53- })

DjangoUeditor/settings.py

最好将所有FieldName字段修改为file

UrlPrefix 修改为后端资源访问路径

ePathFormat 修改后端资源目录路径加对应保存文件名格式

也可以在项目settings.py中按照下面格式修改

UEDITOR_SETTINGS ={

'upload':{

"imageUrlPrefix": "http://10.250.40.99:****/",

"imagePathFormat": "./media/image/%(basename)s_%(datetime)s_%(rnd)s.%(extname)s",

"imageFieldName":"file",

"videoUrlPrefix": "http://10.250.40.99:****/",

"videoPathFormat": "./media/video/%(basename)s_%(datetime)s_%(rnd)s.%(extname)s",

"videoFieldName":"file",

}

Linux平台上通过pip安卓后缺少静态文件和模板文件，可以再window平台上安装完后将对应的静态文件和模板文件复制到linux平台对应虚拟环境的site-packages文件中的DjanoUeditor目录下。

项目的settings文件需要配置STATIC_ROOT（静态资源地址）

运行python manage.py collectstatic

收集ueditor的静态资源、

Admin 后端资源想使用富文本只需要在models文件中将原本的 models.TextField 替换成

UEditorField 即可。

from DjangoUeditor.models import UEditorField

- content = models.TextField(null=True, blank=True)

+ content = UEditorField(null=True, blank=True)

以上修改后的内容我已经上传到djangoTemplate项目中的公用模块中，可以再该项目复制DjangoUeditor到自己项目进行基础配置即可使用。

前端使用的是angular6

安装方式

安装@notadd/ngx-neditor

npm install @notadd/ngx-neditor

安装依赖

mkdir -p ./src/assets/node_modules
npm install --prefix ./src/assets @notadd/neditor

添加NgxNeditorModule到你的AppModule

基础配置

import { NgxNeditorModule } from '@notadd/ngx-neditor';

@NgModule({

imports: [

...

NgxNeditorModule

declarations: [AppComponent],

bootstrap: [AppComponent]

})

export class AppModule { }

使用方式

<ngx-neditor [(ngModel)]="content" #neditor></ngx-neditor>

同样由于Ueditor没有完全支持angular，更新较慢，较多bug，所以需要进行一些代码修改

Ueditor本是可以从后端访问获取配置，但angular版本没有，所以需要补充配置信息，配置信息需要和后端DjanogUeditor/settings.py相同

src/assets/node_modules/@notadd/neditor/neditor.config.js

32- serverUrl: "",

32+ serverUrl: "http://10.250.40.99：***/ueditor/controller/",#对应后端url

- imageUrlPrefix: "",

- scrawlUrlPrefix: "",

- videoUrlPrefix: "",

- fileUrlPrefix: "",

- catcherLocalDomain: "",

+ catcherActionName: "catchimage",

+ scrawlActionName: "uploadscrawl",

+ scrawlFieldName: "file",

+ imageFieldName:"file",

+ fileFieldName:"file",

+ catcherFieldName:"file",

+ imageUrlPrefix: "http://10.250.40.99:8082/",

+ scrawlUrlPrefix: "http://10.250.40.99:8082/",

+ videoUrlPrefix: "http://10.250.40.99:8082/",

+ fileUrlPrefix: "http://10.250.40.99:8082/",

+ catcherLocalDomain: "http://10.250.40.99:8082/",

+ videoAllowFiles: [

+ ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",

+ ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"],

src/assets/node_modules/@notadd/neditor/neditor.service.js

UE.Editor.prototype.getActionUrl = function(action) {

/* 按config中的xxxActionName返回对应的接口地址 */

if (action == 'uploadimage' || action == 'uploadscrawl') {

- return 'http://a.b.com/upload.php';

+ return 'http://10.250.40.99:8007/ueditor/controller/?action='+action

} else if (action == 'uploadvideo') {

- return 'http://a.b.com/video.php';

+ return 'http://10.250.40.99:8007/ueditor/controller/?action='+action

} else {

return this._bkGetActionUrl.call(this, action);

}

将该文件下所有 return res.code == 200; 改为 return res.state == "SUCCESS";

src/assets/node_modules/@notadd/neditor/dialogs/image/image.js

710- $file.find('.error').text(res.message).show();

710+ $file.find('.error').text(res.state).show();

src/assets/node_modules/@notadd/neditor/dialogs/scrawl/scrawl.js

396- return canvas.toDataURL("image/png");

396+ return canvas.toDataURL("image/png").substring(22);

将底部function exec(scrawlObj) 替换为

function exec(scrawlObj) {

if (scrawlObj.isScrawl) {

addMaskLayer(lang.scrawlUpLoading);

var base64 = scrawlObj.getCanvasData();

/* 上传涂鸦图片 */

if (!!base64) {

var options = {

timeout:100000,

onsuccess:function (xhr) {

if (!scrawlObj.isCancelScrawl) {

var responseObj;

responseObj = eval("(" + xhr.responseText + ")");

if (responseObj.state == "SUCCESS") {

var imgObj = {},

url = editor.options.scrawlUrlPrefix + responseObj.url;

imgObj.src = url;

imgObj._src = url;

imgObj.alt = responseObj.original || '';

imgObj.title = responseObj.title || '';

editor.execCommand("insertImage", imgObj);

dialog.close();

} else {

alert(responseObj.state);

addMaskLayer(lang.noScarwl + " <input type='button' value='" + lang.continueBtn + "' onclick='removeMaskLayer()'/>");

}

onerror:function () {

alert(lang.imageError);

addMaskLayer(lang.noScarwl + " <input type='button' value='" + lang.continueBtn + "' onclick='removeMaskLayer()'/>");

dialog.close();

}

};

options[editor.getOpt('scrawlFieldName')] = base64;

var actionUrl = editor.getActionUrl(editor.getOpt('scrawlActionName')),

params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',

url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + params);

ajax.request(url, options);

}

} else {

addMaskLayer(lang.noScarwl + " <input type='button' value='" + lang.continueBtn + "' onclick='removeMaskLayer()'/>");

}

以上修改内容我已上传到ng-template项目中，可以复制src/assets/node_modules/@notadd/neditor到项目目录下使用

使用需要修改

src/assets/node_modules/@notadd/neditor/package.json

- "_where": "E:\\git\\ng-template",

+ "_where": "E:\\git\\nd-training-front",对应前端项目路径

该使用说明针对的是后端采用Django版本为1.11.7，前端使用angular6的说明。

1Django后端

Ueditor后端服务

DjangoUeditor 是百度Ueditor的后端服务的Django版本
安装方式
pip install DjangoUeditor
基础配置

settings.py

INSTALLED_APPS = ( #........ 'DjangoUeditor', )

urls.py

url(r'^ueditor/',include('DjangoUeditor.urls' )),

由于其版本过旧，且存在BUG较多，需要进行一些代码修改。

BUG文件修复

DjangoUeditor/urls.py

4- from django.conf.urls import patterns, url

4+ from django.conf.urls import url

6- from django.conf.urls.defaults import patterns, url

6+ from django.conf.urls.defaults import url

from views import get_ueditor_controller

10-urlpatterns = patterns('',

10+ urlpatterns = [

url(r'^controller/$',get_ueditor_controller)

11-)

12+ ]

DjangoUeditor/views.py
需要将全局的json.dumps(u"{'state:'ERROR'}" 修改为json.dumps(u"{'state’:'ERROR'}"

134- UploadFieldName=request.GET.get(upload_field_name[action],USettings.UEditorUploadSettings.get(action,"upfile"))

134+ UploadFieldName=request.GET.get(upload_field_name[action],USettings.UEditorUploadSettings.get(upload_field_name[action],"upfile"))

223- remote_urls=request.POST.getlist("source[]",[])

223+ remote_urls=request.POST.getlist("file[]",[])

274- OutputPathFormat=(request.GET.get(path_format,USettings.UEditorSettings["defaultPathFormat"]) % path_format_var).replace("\\","/")

274+ OutputPathFormat=(USettings.UEditorUploadSettings.get(path_format,USettings.UEditorSettings["defaultPathFormat"]) % path_format_var).replace("\\","/")

DjangoUeditor/widgets.py

50- self.upload_settings.update({

51- "imagePathFormat": imagePath,

52- "filePathFormat": filePath

53- })

DjangoUeditor/settings.py
最好将所有FieldName字段修改为file
UrlPrefix 修改为后端资源访问路径
ePathFormat 修改后端资源目录路径加对应保存文件名格式
也可以在项目settings.py中按照下面格式修改

UEDITOR_SETTINGS ={

'upload':{

"imageUrlPrefix": "http://10.250.40.99:****/",

"imagePathFormat": "./media/image/%(basename)s_%(datetime)s_%(rnd)s.%(extname)s",

"imageFieldName":"file",

"videoUrlPrefix": "http://10.250.40.99:****/",

"videoPathFormat": "./media/video/%(basename)s_%(datetime)s_%(rnd)s.%(extname)s",

"videoFieldName":"file",

}

注意事项

项目的settings文件需要配置STATIC_ROOT（静态资源地址）

运行python manage.py collectstatic
收集ueditor的静态资源。

Admin使用方式

Admin 后端资源想使用富文本只需要在models文件中将原本的models.TextField 替换成UEditorField 即可。

from DjangoUeditor.models import UEditorField

- content = models.TextField(null=True, blank=True)

+ content = UEditorField(null=True, blank=True)

快捷使用

以上修改后的内容我已经上传到djangoTemplate项目中的公用模块中，可以再该项目复制DjangoUeditor到自己项目进行基础配置即可使用。

2Angluar6

ngx-neditor使用

安装方式

安装@notadd/ngx-neditor

npm install @notadd/ngx-neditor

安装依赖

mkdir -p ./src/assets/node_modules

npm install --prefix ./src/assets @notadd/neditor

基础配置
添加NgxNeditorModule到你的AppModule

import { NgxNeditorModule } from '@notadd/ngx-neditor';

@NgModule({

imports: [

...

NgxNeditorModule

declarations: [AppComponent],

bootstrap: [AppComponent]

})

export class AppModule { }

使用方式

<ngx-neditor [(ngModel)]="content" #neditor></ngx-neditor>

BUG文件修复

由于Ueditor没有完全支持angular，更新较慢，较多bug，所以需要进行一些代码修改
Ueditor本是可以从后端访问获取配置，但angular版本没有，所以需要补充配置信息，配置信息需要和后端DjanogUeditor/settings.py相同
src/assets/node_modules/@notadd/neditor/neditor.config.js

32- serverUrl: "",

32+ serverUrl: "http://10.250.40.99：***/ueditor/controller/",#对应后端url

- imageUrlPrefix: "",

- scrawlUrlPrefix: "",

- videoUrlPrefix: "",

- fileUrlPrefix: "",

- catcherLocalDomain: "",

+ catcherActionName: "catchimage",

+ scrawlActionName: "uploadscrawl",

+ scrawlFieldName: "file",

+ imageFieldName:"file",

+ fileFieldName:"file",

+ catcherFieldName:"file",

+ imageUrlPrefix: "http://10.250.40.99:8082/",

+ scrawlUrlPrefix: "http://10.250.40.99:8082/",

+ videoUrlPrefix: "http://10.250.40.99:8082/",

+ fileUrlPrefix: "http://10.250.40.99:8082/",

+ catcherLocalDomain: "http://10.250.40.99:8082/",

+ videoAllowFiles: [

+ ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",

+ ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"],

src/assets/node_modules/@notadd/neditor/neditor.service.js

将该文件下所有 return res.code == 200; 改为 return res.state == "SUCCESS";

UE.Editor.prototype.getActionUrl = function(action) {

/* 按config中的xxxActionName返回对应的接口地址 */

if (action == 'uploadimage' || action == 'uploadscrawl') {

- return 'http://a.b.com/upload.php';

+ return 'http://10.250.40.99:8007/ueditor/controller/?action='+action

} else if (action == 'uploadvideo') {

- return 'http://a.b.com/video.php';

+ return 'http://10.250.40.99:8007/ueditor/controller/?action='+action

} else {

return this._bkGetActionUrl.call(this, action);

}

src/assets/node_modules/@notadd/neditor/dialogs/image/image.js

710- $file.find('.error').text(res.message).show();

710+ $file.find('.error').text(res.state).show();

src/assets/node_modules/@notadd/neditor/dialogs/scrawl/scrawl.js

396- return canvas.toDataURL("image/png");

396+ return canvas.toDataURL("image/png").substring(22);

将底部function exec(scrawlObj) 替换为

function exec(scrawlObj) {

if (scrawlObj.isScrawl) {

addMaskLayer(lang.scrawlUpLoading);

var base64 = scrawlObj.getCanvasData();

/* 上传涂鸦图片 */

if (!!base64) {

var options = {

timeout:100000,

onsuccess:function (xhr) {

if (!scrawlObj.isCancelScrawl) {

var responseObj;

responseObj = eval("(" + xhr.responseText + ")");

if (responseObj.state == "SUCCESS") {

var imgObj = {},

url = editor.options.scrawlUrlPrefix + responseObj.url;

imgObj.src = url;

imgObj._src = url;

imgObj.alt = responseObj.original || '';

imgObj.title = responseObj.title || '';

editor.execCommand("insertImage", imgObj);

dialog.close();

} else {

alert(responseObj.state);

addMaskLayer(lang.noScarwl + " <input type='button' value='" + lang.continueBtn + "' onclick='removeMaskLayer()'/>");

}

onerror:function () {

alert(lang.imageError);

addMaskLayer(lang.noScarwl + " <input type='button' value='" + lang.continueBtn + "' onclick='removeMaskLayer()'/>");

dialog.close();

}

};

options[editor.getOpt('scrawlFieldName')] = base64;

var actionUrl = editor.getActionUrl(editor.getOpt('scrawlActionName')),

params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',

url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + params);

ajax.request(url, options);

}

} else {

addMaskLayer(lang.noScarwl + " <input type='button' value='" + lang.continueBtn + "' onclick='removeMaskLayer()'/>");

}

快捷使用

以上修改内容我已上传到ng-template项目中，可以复制src/assets/node_modules/@notadd/neditor到项目目录下使用

使用需要修改
src/assets/node_modules/@notadd/neditor/package.json

- "_where": "E:\\git\\ng-template",

+ "_where": "E:\\git\\nd-training-front",对应前端项目路径