以Mxonline3代碼爲例 下載地址
項目啓動
::新建虛擬環境
virtualenv env
::激活虛擬環境
cd env
cd Scripts
activate
cd ..
cd ..
::安裝依賴包
pip install -r requirement.txt
::創建數據庫
python manage.py makemigratios
python manage.py migrate
python manage.py runserver
- 添加課程信息 –> 評論 查看效果展示
添加ckeditor的方法
pip install django-ckeditor- settings.py配置
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'users',
'courses',
'operation',
'organization',
'xadmin',
'crispy_forms',
'captcha',
'pure_pagination',
'DjangoUeditor',
'ckeditor', # add
'ckeditor_uploader', # add
]
#ckeditor
CKEDITOR_UPLOAD_SLUGIFY_FILENAME = False
CKEDITOR_JQUERY_URL = 'http://libs.baidu.com/jquery/2.0.3/jquery.min.js'
CKEDITOR_IMAGE_BACKEND = "pillow"
CKEDITOR_UPLOAD_SLUGIFY_FILENAME = True
CKEDITOR_UPLOAD_PATH = "image_upload/"
# config ckeditor
CKEDITOR_CONFIGS = {
'default': {
'skin':'moono',
'language': 'zh-cn',
'toolbar': (
['div', 'Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink', 'Anchor'],
['Image','Update', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', ],
['Styles', 'Format', 'Font', 'FontSize'],
['TextColor', 'BGColor'],
['Maximize', 'ShowBlocks', '-', 'About', 'pbckcode'],
),
'height': 700,
'width': 800,
'filebrowserWindowWidth': 940,
'filebrowserWindowHeight': 725,
'tabSpaces': 4,
'extraPlugins': ','.join(
[
# your extra plugins here
'div',
'autolink',
'autoembed',
'embedsemantic',
'autogrow',
# 'devtools',
'widget',
'lineutils',
'clipboard',
'dialog',
'dialogui',
'elementspath'
]),
}
}- urls.py
from django.conf.urls import include, url #add
# 富文本相關url
url(r'^ckeditor/', include('ckeditor_uploader.urls')), #add
- operatios.py 後臺引入model數據類型
from ckeditor_uploader.fields import RichTextUploadingField
# 用戶對於課程評論
class CourseComments(models.Model):
# 會涉及兩個外鍵: 1. 用戶， 2. 課程。import進來
course = models.ForeignKey(Course, on_delete=models.CASCADE, verbose_name=u"課程")
user = models.ForeignKey(UserProfile, on_delete=models.CASCADE, verbose_name=u"用戶")
comments = RichTextUploadingField("評論")
add_time = models.DateTimeField(default=datetime.now, verbose_name=u"評論時間")
class Meta:
verbose_name = u"課程評論"
verbose_name_plural = verbose_name
def __str__(self):
return '用戶({0})對於《{1}》 評論 :'.format(self.user, self.course)更新數據庫
python manage.py makemigratios
python manage.py migrate
修改評論的方法
- 前端
- 從官網上選擇所需的js樣式添加到要顯示的前端頁面，並加上一些js邏輯代碼
{% block ckeditor_custom_js %}
<script src="https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js"></script>
{% endblock %}
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<textarea cols="80" id="Text" name="Text" rows="20">這裏是默認值，修改文本的內容是放在這裏。html需要進行HTMLEncode編碼</textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace('Text');
function OnSave(){
if(CKEDITOR.instances.Text.getData()==""){
alert("內容不能爲空！");
return false;
}else {
alert (CKEDITOR.instances.Text.getData());
}
}
</script>
<div class="wgt-ipt-wrap pub-editor-wrap " id="js-pl-input-fake">
<textarea name="Text" id="Text" class="" placeholder="扯淡、吐槽、表揚、鼓勵……想說啥就說啥！" ></textarea>
</div>
<script>
CKEDITOR.replace( 'Text' );
</script>
<script type="text/javascript">
//添加評論
$('#js-pl-submit').on('click', function(){
var comments = CKEDITOR.instances.Text.getData()
if(comments == ""){
alert("評論不能爲空")
return
}
$.ajax({
cache: false,
type: "POST",
url:"{% url 'course:add_comment' %}",
data:{'course_id':{{ course.id }}, 'comments':comments},
async: true,
beforeSend:function(xhr, settings){
xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
},
success: function(data) {
if(data.status == 'fail'){
if(data.msg == '用戶未登錄'){
window.location.href="{% url 'login' %}";
}else{
alert(data.msg)
}
}else if(data.status == 'success'){
window.location.reload();//刷新當前頁面.
}
},
});
});
</script>
{% endblock %}function OnSave()及需要進行獲取的函數,正常頁面元素取值方式，本文不適應，要通過CKEDITOR的api
CKEDITOR.instances.Text.getData（）
Text是指textarea的name
- 後端
ajax方式添加評論,view函數
class AddCommentsView(View):
def post(self, request):
if not request.user.is_authenticated:
# 未登錄時返回json提示未登錄，跳轉到登錄頁面是在ajax中做的
return HttpResponse('{"status":"fail", "msg":"用戶未登錄"}', content_type='application/json')
course_id = request.POST.get("course_id", 0)
comments = request.POST.get("comments", "")
if int(course_id) > 0 and comments:
course_comments = CourseComments()
# get只能取出一條數據，如果有多條拋出異常。沒有數據也拋異常
# filter取一個列表出來，queryset。沒有數據返回空的queryset不會拋異常
course = Course.objects.get(id = int(course_id))
# 外鍵存入要存入對象
course_comments.course = course
course_comments.comments = comments
course_comments.user = request.user
course_comments.save()
return HttpResponse('{"status":"success", "msg":"評論成功"}', content_type='application/json')
else:
return HttpResponse('{"status":"fail", "msg":"評論失敗"}', content_type='application/json')發現的問題：
評論格式由純文本變爲富文本而富文本在顯示的時候會由於渲染html標籤導致頁面排版失敗。
<div> <p class="cnt">{{ comment.comments |safe }} </p> </div>按如下格式更改即可，當然pre格式要微調一下，改改邊距
<div> <pre class="cnt">{{ comment.comments |safe }} </pre> </div>