富文編輯器和bs4簡單實用

時間 2019-11-20

標籤編輯器 bs4 簡單實用简体版

原文原文鏈接

目錄html

目錄ajax

使用方法

直接給輸入框綁定事件便可,注意引入js方式有點不同,多加編碼方式json

<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>


KindEditor.ready(function(K) {
                window.editor = K.create('#editor_id');
        });   //添加富文本編輯菜單欄


K.create('要綁定事件的文本輸入框id',{初識化數據放在這裏})

K.create有兩個參數，參數以要綁定標籤的id值,參數2,初始化參數後端

KindEditor.ready(function (K) {
        window.editor = K.create('#editor_id',
            {
                width: '100%',        //寬度支持%和px樣式
                items: [
                    'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                    'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                    'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                    'anchor'
                ]
            })
        ;
    });

官方網址

富文本編輯器官方網站 http://kindeditor.net/docs/option.html#items瀏覽器

圖片上傳下載實例

視圖處理編輯器

def up_img(request,):
    img_obj = request.FILES.get("imgFile",None)
    # 圖片的名字默認是imgFile
    
    path=os.path.join(settings.MEDIA_ROOT,"article_img",img_obj.name)# 拿到文件上傳的路徑,保存到medio文件中,方便訪問
    # 默認名字是imgFile
    with open(path,"wb") as f:
        for i in img_obj:
            f.write(i)
    print(path)
    data={
        "error":0,                                   # 給編輯器返回上傳結果
        "url":"/media/article_img/"+img_obj.name     # 返回圖片路徑,編輯器訪問瀏覽器取數據
    }
    return HttpResponse(json.dumps(data))

==注意回覆的必定是json格式字符串==佈局

js事件網站

KindEditor.ready(function (K) {
        window.editor = K.create('#editor_id',
            {
                width: '100%',
                uploadJson:"/up_img/",                      
                extraFileUploadParams:{       //至關於ajax的data
                              csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
                }
            })
        ;
    });   //添加富文本編輯菜單欄

filePostName指定上傳文件form名稱。ui

數據類型: String編碼

默認值: imgFile

菜單欄功能篩選

items: [
                    'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                    'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                    'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                    'anchor'
                ],

bs4

導入

pip3 install Beautifulsoup4

提取標籤內的文本內容

對某一個標籤內容進行提取

soup = BeautifulSoup('<b class="boldest">Extremely bold</b>')

s = soup.b.string

print(s)        # Extremely bold

print(type(s))  # <class 'bs4.element.NavigableString'>

對所有內容進行提取

from bs4 import BeautifulSoup
def editor_article(request,):
    if request.method == "POST":
        title=request.POST.get("title",None)
        content=request.POST.get("content",None)
        bs=BeautifulSoup(content,"html.parser")
        print(22)
        desc=bs.text[0:150]+"..."

        print(desc)
        article_obj=models.Article.objects.create(title=title,desc=desc,user=request.user)
        models.ArticleDetail.objects.create(article=article_obj,content=content)
        return redirect("/home/")
    print(request.user)
    return render(request,"editor_article.html",{"request":request})

==注意,text不是方法,而是屬性,不須要加(),能夠對結果進行提取==

在編輯框中必須點擊,HTML編寫文章,後端纔可以截取內容,系統默認,輸入的內容都是字符串形式

若是不對bs文件進行截取數據,就有可能在文章簡介佈局時,出現內容錯亂問題,主要是由於上傳的文件是HTML格式時,在佈局HTML中用