文章添加頁(富文本編輯器的使用)

来源:https://www.cnblogs.com/suncolor/archive/2022/10/10/16777620.html
-Advertisement-
Play Games

1.文章添加頁url開設 2.添加文章頁面已經富文本編輯器的使用 富文本編輯器kindeditor只要到官網下載下來,放入static文件夾就行,如何在html的script處添加對應固定代碼 {% extends 'backend/base.html' %} {% block article %} ...


1.文章添加頁url開設

image

2.添加文章頁面已經富文本編輯器的使用

富文本編輯器kindeditor只要到官網下載下來,放入static文件夾就行,如何在html的script處添加對應固定代碼


{% extends 'backend/base.html' %}

{% block article %}
    <h3>添加隨筆</h3>
    <form action="" method="post">
        <p>標題</p>
        <div>
            <input type="text" class="form-control" name="title">
        </div>
        <p>內容</p>
        <div>
            <textarea name="content" id="editor_id" cols="30" rows="10"></textarea>
        </div>
        <p>分類</p>
        <div>
            {% for category in category_list %}
                <input type="radio" value="{{ category.pk }}" name="category">{{ category.name }}&nbsp;
            {% endfor %}
        </div>
        <p>標簽</p>
        <div>
            {% for tag in tag_list %}
                <input type="checkbox" value="{{ tag.pk }}" name="tag">{{ tag.name }}&nbsp;
            {% endfor %}
        </div>
        <br>
        <input type="submit" class="btn-danger  btn">
    </form>
{% endblock %}

{% block js %}
    <script charset="utf-8" src="/static/kindeditor-4.1.11-zh-CN/kindeditor/kindeditor-all-min.js"></script>
    <script>
        KindEditor.ready(function (K) {
            window.editor = K.create('#editor_id',
                {
                    width: '100%',
                    height:'600px',
                    resizeType:1,
                });
        });
    </script>
{% endblock %}

3.後端需要傳入到前端的數據

image

4.添加文章向後端發送請求

@login_required
def add_article(request):
    category_list = models.Category.objects.filter(blog=request.user.blog)
    tag_list = models.Tag.objects.filter(blog=request.user.blog)
    if request.method == 'POST':
        title = request.POST.get('title')
        content = request.POST.get('content')
        category_id = request.POST.get('category')
        tag_id = request.POST.getlist('tag')
        # 文章簡介的獲取
        desc = content[0:150]
        article_obj = models.Article.objects.create(title=title,desc=desc,content=content,category_id=category_id,blog=request.user.blog)
        # 下一步添加文章和文章標簽表,這個關係表是我們自己創建的無法使用add等方法
        # 解決方法自己操作關係表,因為是多對多關係,可能需要創建多條數據 採用了批量插入數據的方法
        article_obj_list = []
        for i in tag_id:
            article_obj_list.append(models.Article2Tag(article=article_obj,tag_id=i))
        models.Article2Tag.objects.bulk_create(article_obj_list)
        return HttpResponseRedirect('/backend/')
    return render(request,'backend/add_article.html',locals()) 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 項目地址 npm庫地址:https://www.npmjs.com/package/dd-ui-library 組件庫:https://github.com/YolandaKisses/ui-library 目錄結構 ├─ src │ └─ components // 存放測試頁面 │ └─ lib ...
  • 微前端概述 微前端概念是從微服務概念擴展而來的,摒棄大型單體方式,將前端整體分解為小而簡單的塊,這些塊可以獨立開發、測試和部署,同時仍然聚合為一個產品出現在客戶面前。可以理解微前端是一種將多個可獨立交付的小型前端應用聚合為一個整體的架構風格。 微前端不是一門具體的技術,而是整合了技術、策略和方法,可 ...
  • 背景 滑鼠拖拽元素移動,算是一個稍微有點點複雜的交互。 而在本文,我們就將打破常規,向大家介紹一種超強的僅僅使用純 CSS 就能夠實現的滑鼠點擊拖拽效果。 在之前的這篇文章中 -- 不可思議的純 CSS 實現滑鼠跟隨,我們介紹了非常多有意思的純 CSS 的滑鼠跟隨效果,像是這樣: 但是,可以看到,上 ...
  • AgileBoot 倉庫 後端地址:https://github.com/valarchie/AgileBoot-Back-End 技術棧:Springboot / Spring Security / MyBatis Plus JPA 無XML/ Druid / Redis / Hutool / J ...
  • 平時聽到一些同學說技術方案沒什麼深度,很難講出來,怎麼去體現技術方案設計的深度是大家普遍關心的一個問題,這個問題不是個例問題,因此分享下自己的一些觀點和看法。主要從三個部分來講: 第一部分主要分析為什麼技術方案沒有體現出深度,找到問題後就好解決,並提出技術方案的廣度和深度特征; 第二部分是技術... ...
  • 本文重點分析介紹在營銷自動化業務中實時營銷場景的背景價值、實時營銷引擎架構以及項目開發過程中如何利用動態隊列做好業務流量隔離,動態發佈,使用規則引擎來提升營銷規則的配置效率等幾種關鍵技術設計實踐。 ...
  • hi,這裡桑小榆。 本篇,我們開始探討微服務架構這塊內容,並打算專門寫一個微服務的專欄。寫微服務的知識體系其實早有動機,把微服務架構知識梳理完整,由於很多因素沒能開展開來,所以一直擱置了。 這次,我繼續持大道至簡的思想,來探討微服務架構的全面內容。儘管我們在實際工作中並沒有用到這塊內容,本職本分或許 ...
  • 什麼是滾動數組 簡單來說,滾動數組就是一種具有短暫記憶力的數組,它會犧牲時間來節省空間,用size=3的數組來“存儲”30000個數據。這麼說有點離譜、抽象,畢竟a[3]怎麼存儲a[30000]裡面的東西呢。這就是滾動數組的特性,即只記錄少量的後續需要使用的數據,而將之前用過且不再需要調用的數據拋棄 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...