ueditor 编辑器增加css样式_django中使用ueditor

最新推荐文章于 2022-12-11 20:14:21 发布

张天壹

最新推荐文章于 2022-12-11 20:14:21 发布

阅读量186

点赞数

CC 4.0 BY-SA版权

文章标签： ueditor 编辑器增加css样式

本文链接：https://blog.youkuaiyun.com/weixin_29337315/article/details/112288544

Ueditor HTML编辑器是百度开源的在线HTML编辑器,功能非常强大。这里记录以下使用DjangoUeditor开发富文本编辑器的过程。

安装DjangoUeditor

pip install DjangoUeditor

在Django中安装DjangoUeditor

在INSTALL_APPS里面增加DjangoUeditor app，如下：
	INSTALLED_APPS = (
		#........
		'DjangoUeditor',
	)

配置urls

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

在models中的使用

from DjangoUeditor.models import UEditorField
class Blog(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)

在表单中使用

在Form中使用，有两种方法配置：

1: 使用forms.UEditorField

from  DjangoUeditor.forms import UEditorField
class TestUEditorForm(forms.Form):
    Description=UEditorField("描述",initial="abc",width=600,height=800)

2: widgets.UEditorWidget

from  DjangoUeditor.widgets import UEditorWidget
class TestUEditorForm(forms.Form):
	Content=forms.CharField(label="内容",widget=UEditorWidget(width=800,height=500, imagePath='aa', filePath='bb',toolbars={}))

在view中配置

from DjangoUeditor.forms import UEditorField 
class TestUEditorForm(forms.Form):
    Description=UEditorField("描述",initial="abc",width=600,height=800)

def edit_description_view(request):
    form = TestUEditorForm()
    return render(request,'edit-description.htm',{"form": form})

在模板中配置

<div class="edit-area"> 
    {{ form }} 
</div>

在模板（template）里面，只需要在模板相应位置输出form即可。

配置效果图

配置后打开界面如下：