草稿 富文本编辑器
2018-06-18 02:16:58来源:未知 阅读 ()
https://github.com/django-ckeditor/django-ckeditor
https://django-ckeditor.readthedocs.io/en/latest/
RichTextField
, RichTextUploadingField
, CKEditorWidget
and CKEditorUploadingWidget
from ckeditor_uploader.widgets import CKEditorUploadingWidget
from ckeditor_uploader.fields import RichTextUploadingField
pip install django-ckeditor
pip install pillow
INSTALLED_APPS = [ 'ckeditor', 'ckeditor_uploader',] MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media') CKEDITOR_UPLOAD_PATH = 'upload/' urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'ckeditor/', include('ckeditor_uploader.urls')) ] from django.db import models # Create your models here. from ckeditor_uploader.fields import RichTextUploadingField class Post(models.Model): content = RichTextUploadingField(null=True, blank=True) #
需要指出的是:在开发阶段,这样设置settings.py已经足够了。但是,到了正式部署你的应用时,你需要设置好STATIC_ROOT和STATIC_URL,并运行manage.py collectstatic命令,该命令会将ckeditor相关的静态资源拷贝到你的工程下。
使用
使用
如何应用ckeditor
django-ckeditor提供了两个类:RichTextField和CKEditorWidget,分别用于模型和表单。内容型网站通常在后台会有一个文章发布和编辑的界面,如果你想让该界面拥有一个富文本编辑器,只需按如下方式定义你的django模型:
from django.db import models from ckeditor_uploader.fields import RichTextUploadingField # Create your models here. class Post(models.Model): content = RichTextUploadingField(null=True, blank=True)
admin.py
from django.contrib import admin from app01.models import Post admin.site.register(Post)
启动应用看看,这时可以看到文章标题
输入框显示了富文本编辑框
但是怎么可以用的工具那么少???
别急,在settings目录中增加如下配置即可
CKEDITOR_CONFIGS = { 'default': { 'skin': 'moono', # 'skin': 'office2013', 'toolbar_Basic': [ ['Source', '-', 'Bold', 'Italic'] ], 'toolbar_YourCustomToolbarConfig': [ {'name': 'document', 'items': ['Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates']}, {'name': 'clipboard', 'items': ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']}, {'name': 'editing', 'items': ['Find', 'Replace', '-', 'SelectAll']}, {'name': 'forms', 'items': ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField']}, '/', {'name': 'basicstyles', 'items': ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']}, {'name': 'paragraph', 'items': ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language']}, {'name': 'links', 'items': ['Link', 'Unlink', 'Anchor']}, {'name': 'insert', 'items': ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe']}, '/', {'name': 'styles', 'items': ['Styles', 'Format', 'Font', 'FontSize']}, {'name': 'colors', 'items': ['TextColor', 'BGColor']}, {'name': 'tools', 'items': ['Maximize', 'ShowBlocks']}, {'name': 'about', 'items': ['About']}, '/', # put this to force next toolbar on new line {'name': 'yourcustomtools', 'items': [ # put the name of your editor.ui.addButton here 'Preview', 'Maximize', ]}, ], 'toolbar': 'YourCustomToolbarConfig', # put selected toolbar config here # 'toolbarGroups': [{ 'name': 'document', 'groups': [ 'mode', 'document', 'doctools' ] }], # 'height': 291, # 'width': '100%', # 'filebrowserWindowHeight': 725, # 'filebrowserWindowWidth': 940, # 'toolbarCanCollapse': True, # 'mathJaxLib': '//cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML', 'tabSpaces': 4, 'extraPlugins': ','.join([ 'uploadimage', # the upload image feature # your extra plugins here 'div', 'autolink', 'autoembed', 'embedsemantic', 'autogrow', # 'devtools', 'widget', 'lineutils', 'clipboard', 'dialog', 'dialogui', 'elementspath' ]), } }
非admin注册时
class f(forms.Form): t1=fields.CharField(max_length=30) # t2=forms.Textarea() from app01.forms import f def test(request): return render(request,'test.html',{'at':at,'form':f}) 网页 <body> <form action=""> <div>{{ form.t1 }}</div> </form> <script> CKEDITOR.replace( 't1' , { uiColor: '#9AB8F3', }); </script> </body>
网页头加载
<script src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
图片上传遭遇csrf问题
考虑 ajax上传
现在一个完美的富文本输入框就完成了,现在可以在admin页面愉快的输入内容丰富的文章了~
如何在前端显示ck输入的内容
前端要显示ck输入的内容时,在需要使用的页面头部引入:
<script src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
光这样你会发现,显示出来的时候是原始的包含各种html标签等符号的内容,此时在变量中增加safe过滤即可,如:{{ content | safe }}。
缺少上传1
from ckeditor_uploader.fields import RichTextUploadingField 。。。 class MyModel(models.Model): content = RichTextUploadingField(verbose_name=u‘内容‘)
media 目录显示问题
开发模式下
from django.conf import settings from django.conf.urls.static import static urlpatterns = patterns(’’, # ... the rest of your URLconf goes here ... ) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
实际部署nginx配置
# Django media location /media { alias /home/lyndon/github/Mathematician/dijkstra/media; } location /static { alias /home/lyndon/github/Mathematician/dijkstra/static; }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 文本分类问题相关原理知识 2019-07-24
- 文本备份云仓库-python实用脚本下载 2019-07-24
- pycharm编辑器配置(持续更新完善) 2019-07-24
- pandas文本处理 2019-05-04
- django中使用tinymce 富文本 2019-04-25
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash