python3.6结合django2.0和xadmin使用djangoueditor富文本编辑器
老眼 2018-01-22 12:27:15
分 享


djangoueditor安装


(1)直接下载源码


https://github.com/twz915/DjangoUeditor3.git


(2)解压文件拷贝里面的DjangoUeditor目录到你自己的django项目目录中如:extend_apps


djangoueditor配置


1、django的settings.py配置


(1)在INSTALL_APPS里面增加DjangoUeditor的 app,如下:


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


(2)在settings.py配置配置media和static路径


STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static").replace('\\','/')
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media").replace('\\','/')



(3)配置urls


from django.conf.urls import url,include
import xadmin
from DjangoUeditor import urls as DjangoUeditor_urls
from .settings import MEDIA_ROOT
from django.views.static import serve
urlpatterns = [
    url(r'', xadmin.site.urls),
    url(r'^ueditor/', include(DjangoUeditor_urls)),
    url(r'^media/(?P<path>.*)$',serve, {'document_root': MEDIA_ROOT}),
]


(4)在xadmin的plugins 中的__init__.py文件添加


PLUGINS = (
    ...
    'ueditor',
    ...
)


(5)在xadmin的plugins 中新建ueditor.py文件,内容如下


import xadmin
from xadmin.views import BaseAdminPlugin, CreateAdminView, ModelFormAdminView, UpdateAdminView
from DjangoUeditor.models import UEditorField
from DjangoUeditor.widgets import UEditorWidget
from django.conf import settings
class XadminUEditorWidget(UEditorWidget):
    def __init__(self,**kwargs):
        self.ueditor_options=kwargs
        self.Media.js = None
        super(XadminUEditorWidget,self).__init__(kwargs)
class UeditorPlugin(BaseAdminPlugin):
    def get_field_style(self, attrs, db_field, style, **kwargs):
        if style == 'ueditor':
            if isinstance(db_field, UEditorField):
                widget = db_field.formfield().widget
                param = {}
                param.update(widget.ueditor_settings)
                param.update(widget.attrs)
                return {'widget': XadminUEditorWidget(**param)}
        return attrs
    def block_extrahead(self, context, nodes):
        js = '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.config.js")         #自己的静态目录
        js += '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.all.min.js")   #自己的静态目录
        nodes.append(js)
xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView)
xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)


2、在models中的使用


from DjangoUeditor.models import UEditorField
class lybbnu(models.Model):
    Name=models.CharField(,max_length=100,blank=True)
    Content=UEditorField(u'内容',width=600, height=300, toolbars="full", imagePath="", filePath="", upload_settings={"imageMaxSize":1204000},blank=True)


3、在adminx.py中配置


在该类下面添加,来显示ueditor的样式


style_fields = {'content': 'ueditor'}


4、在前端显示的话,需要对html页面修改如下,不然会被django转义造成显示不正常


{% autoescape off %}
{{ result.val }}
{% endautoescape %}



吐槽一下

游客

所有吐槽
  • 暂时还没有吐槽,赶紧来吐槽!