ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

Ueditor富文本Django项目使用说明

2019-05-05 21:51:22  阅读：245  来源： 互联网

标签：Ueditor http url 40.99 neditor Django 10.250 action 文本


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

    }

}

注意事项

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 + "'  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",对应前端项目路径

 

标签：Ueditor,http,url,40.99,neditor,Django,10.250,action,文本
来源： https://blog.csdn.net/lq_07a/article/details/89855941

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有