Django 程式中添加js外掛程式文字編輯器

標籤：django 程式中添加js外掛程式文字編輯器

第一步:在首頁中添加寫部落格的按鈕    <li>        <a href="{% url ‘create_article‘ %}">寫部落格</a>    </li>第二步:寫相應的建立部落格視圖,編輯views.py檔案def create_article(request):    if request.method == "GET" :        return  render(request,‘create_aritcle.html‘)    elif request.method == "POST" :        print request.FILES       ##查看上傳圖片的路徑        bbs_generater = utils.ArticleGen(request)        res = bbs_generater.create()        html_ele ="""        Your article <<a href="/article/%s/"> %s</a>> has been created successfully !!!,        """ %(res.id, res.title)        return HttpResponse(html_ele)第三步:寫對於的編輯器html檔案    首先寫一個空html檔案,測試首頁是否能成功調用這個html,    {% extends ‘index.html‘ %}    {% block content-left  %}    <div row>    編輯器頁面    </div>    {% endblock %}    {% block content-right %}        right bar    {% endblock %}第四步:真正開始建立一個編輯器    首先:到https://www.tinymce.com/download/下載一個編輯器到檔案    把這個js檔案應用到頁面中:    第一步:下載tinymce編輯器,在本程式中已經下載好,在/static/plugins/tinymce目錄中第五步:在html檔案中應用這個js問題,如下:    <script src="/static/plugins/tinymce/js/tinymce/tinymce.min.js"> </script>第六步:<script src="/static/plugins/tinymce/js/tinymce/tinymce.min.js"> </script><script type="text/javascript">tinymce.init({    selector: "#create_bbs" });</script>第七步:在你需要的添加編輯起的地方應用下面代碼<form method="post">{% csrf_token %}    <textarea id="create_bbs" name="content" ></textarea></form>第八步,這個免費的編輯器的功能有點少,可以點擊Advanced選擇其他免費的外掛程式也就說把上面第六部的內容換為下面的內容<script src="/static/plugins/tinymce/js/tinymce/tinymce.min.js"> </script><script type="text/javascript">tinymce.init({    selector: "#create_bbs",    theme: "modern",    width: 800,    height: 300,    plugins: [         "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",         "save table contextmenu directionality emoticons template paste textcolor"   ],   content_css: "css/content.css",   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",   style_formats: [        {title: ‘Bold text‘, inline: ‘b‘},        {title: ‘Red text‘, inline: ‘span‘, styles: {color: ‘#ff0000‘}},        {title: ‘Red header‘, block: ‘h1‘, styles: {color: ‘#ff0000‘}},        {title: ‘Example 1‘, inline: ‘span‘, classes: ‘example1‘},        {title: ‘Example 2‘, inline: ‘span‘, classes: ‘example2‘},        {title: ‘Table styles‘},        {title: ‘Table row 1‘, selector: ‘tr‘, classes: ‘tablerow1‘}    ] });</script>

第九部。這個編輯器上存到資料庫的內容是html內容。    把form表單頭改為下面內容,即可把檔案提交到名稱為create_article的url中    <form class="form-horizontal" method="post" action="{% url ‘create_article‘ %}" enctype="multipart/form-data"> {% csrf_token %}    具體的post請求到 create_article url的出來,上面第二步中有    views.py視圖調用上傳檔案的模組utils.py內容如下:import  osimport  modelsfrom s10day12bbs import settingsclass ArticleGen(object):    def __init__(self,request):        self.requset = request    def parse_data(self):        form_data = {        ‘title‘ : self.requset.POST.get(‘title‘),        ‘content‘ : self.requset.POST.get(‘content‘),        ‘summary‘ : self.requset.POST.get(‘summary‘),        ‘author_id‘  : self.requset.user.userprofile.id,        ‘head_img‘: ‘‘,        ‘category_id‘ : 1        }        return form_data    def create(self):        self.data = self.parse_data()        bbs_obj = models.Article(**self.data)        bbs_obj.save()        filename = handle_upload_file(self.requset,self.requset.FILES[‘head_img‘])  #擷取圖片路徑並儲存到資料庫        bbs_obj.head_img = filename        bbs_obj.save()        return bbs_obj    def update(self):        passdef handle_upload_file(request, file_obj):    upload_dir = ‘%s/%s‘ % (settings.BASE_DIR, settings.FileUploadDir)    if not os.path.isdir(upload_dir):        os.mkdir(upload_dir)    print  ‘---->‘, dir(file_obj)    with open(‘%s/%s‘ % (upload_dir, file_obj.name), ‘wb‘) as destination:        for chunk in file_obj.chunks():            destination.write(chunk)    return file_obj.name

完整的建立文字編輯器前端頁面：

{% extends ‘index.html‘ %}{% block container %}<form class="form-horizontal" method="post" action="{% url ‘create_article‘ %}" enctype="multipart/form-data"> {% csrf_token %}  <div class="form-group">    <label for="inputEmail3" class="col-sm-2 control-label">標題</label>    <div class="col-sm-10">      <input type="text" class="form-control" name="title" placeholder="title">    </div>  </div>  <div class="form-group">    <label for="inputEmail3" class="col-sm-2 control-label">簡介</label>    <div class="col-sm-10">        <textarea class="form-control" rows="3" name="summary"></textarea>    </div>  </div>  <div class="form-group">    <label for="inputEmail3" class="col-sm-2 control-label">圖片</label>    <div class="col-sm-10">        <input type="file" name="head_img">    </div>  </div>  <div class="form-group">    <label for="inputEmail3" class="col-sm-2 control-label">內容</label>    <div class="col-sm-10">        <textarea id="create_bbs" name="content" ></textarea>    </div>  </div>  <div class="form-group">    <div class="col-sm-offset-2 col-sm-10">      <button type="submit" class="btn btn-default">發表</button>    </div>  </div></form>{% endblock %}{% block bottom-js %}<script src="/static/plugins/tinymce/js/tinymce/tinymce.min.js"> </script><script type="text/javascript">tinymce.init({    selector: "#create_bbs",    theme: "modern",    //width: 900,    height: 300,    plugins: [         "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",         "save table contextmenu directionality emoticons template paste textcolor"   ],   content_css: "css/content.css",   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",   style_formats: [        {title: ‘Bold text‘, inline: ‘b‘},        {title: ‘Red text‘, inline: ‘span‘, styles: {color: ‘#ff0000‘}},        {title: ‘Red header‘, block: ‘h1‘, styles: {color: ‘#ff0000‘}},        {title: ‘Example 1‘, inline: ‘span‘, classes: ‘example1‘},        {title: ‘Example 2‘, inline: ‘span‘, classes: ‘example2‘},        {title: ‘Table styles‘},        {title: ‘Table row 1‘, selector: ‘tr‘, classes: ‘tablerow1‘}    ] });</script>{% endblock %}

：

650) this.width=650;" src="http://s5.51cto.com/wyfs02/M01/88/5E/wKiom1fyjuTxY3XDAADR8lzu6Ts847.jpg-wh_500x0-wm_3-wmp_4-s_4270795401.jpg" title="編輯器.jpg" alt="wKiom1fyjuTxY3XDAADR8lzu6Ts847.jpg-wh_50" />

本文出自 “奮鬥吧” 部落格，請務必保留此出處http://lvnian.blog.51cto.com/7155281/1858664

Django 程式中添加js外掛程式文字編輯器