该使用说明针对的是后端采用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

 

1. urlpatterns = patterns('',

10+ urlpatterns = [

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

1. )

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 + "'  οnclick='removeMaskLayer()'/>");

                        }

 

                    }

                },

                onerror:function () {

                    alert(lang.imageError);

                    addMaskLayer(lang.noScarwl + "   <input type='button' value='" + lang.continueBtn + "'  οnclick='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 + "'  οnclick='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",

    }

}

注意事项

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

项目的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 + "'  οnclick='removeMaskLayer()'/>");

                        }

 

                    }

                },

                onerror:function () {

                    alert(lang.imageError);

                    addMaskLayer(lang.noScarwl + "   <input type='button' value='" + lang.continueBtn + "'  οnclick='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 + "'  οnclick='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",对应前端项目路径