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  os
import  models
from s10day12bbs import settings
class 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):
        pass
def 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 %}

效果图:

时间: 10-03

Django 程序中添加js插件文本编辑器的相关文章

django项目中使用KindEditor富文本编辑器

先从官网下载插件,放在static文件下 前端引入 <script type="text/javascript" src="/static/back/kindeditor/kindeditor-all.js"></script> <script> KindEditor.ready(function (K) { window.editor = K.create('#content', { {# 加上这句话可以使jquery能获取到富

vue2.0项目中使用Ueditor富文本编辑器示例

最近在vue项目中需要使用富文本编辑器,于是将Ueditor集成进来,作为公共组件.在线预览:https://suweiteng.github.io/vue2-management-platform/#/editor项目地址:https://github.com/suweiteng/vue2-management-platform 记得在右上角点个赞哦~ 1.放入静态资源并配置 首先把官网下载的Ueditor资源,放入静态资源src/static中.修改ueditor.config.js中的wi

VS2010的MFC对话框程序中添加菜单栏的过程

VS2010的MFC对话框程序中添加菜单栏的过程 最近在看一个用MFC写的界面的项目的代码,在代码和界面中一直没有看到关于菜单控件是如何添加进对话框的,于是就百度了下.结果,与其它控件(Button等)添加的方式不一样: VS2010的MFC对话框程序中添加菜单栏的过程大致分了这五步. 一.将Menu加入Resource视图中 在WorkSpace中的Resource视图下,在左边目录的任意位置上,先右键-->选择Insert Resource(插入资源)选项,在弹出的对话框中选择Menu以后,

基于MFC对话框程序中添加菜单栏 (CMenu)

vs2013MFC对话框程序中添加菜单栏的过程,我大致分了这五步. 一.将Menu加入Resource视图中 在WorkSpace中的Resource视图下,在任意一个文件夹图标上,右击选择Insert(插入)选项,在弹出的对话框中选择Menu以后,再点击,new按钮,菜单就会添加成功了,但是现在还没有完成,还不能进行编译,因为现在的菜单时空的,在编译的时候会被清除的. 二.用菜单编辑器添加菜单栏及菜单项 菜单添加成功后,菜单编辑器自动打开,可以在其中添加菜单栏及菜单项,比较简单. 三.将菜单加

对类HelloWorld程序中添加一个MessageBox弹窗

对类HelloWorld程序中添加一个MessageBox弹窗 分析: 任一程序运行的时候都会加载kernel32.dll的,但MessageBoxA()这个API却是在user32.dll中的.所以在HelloWorld.exe中是没办法直接添加MessageBoxA()的调用. 不过好在有kernel32.dll,其中有两个API可以解决user32.dll没加载的问题,分别是LoadLibraryA(filename)和GetProcAddress(hModule, 函数名). 操作: 清

MyEclipse添加JS插件(Spket控件)

一.安装Spket 网上更新方式 1.插件首页:http://www.spket.com        2.插件名称:Spket IDE        3.更新连接(Update Site):http://www.agpad.com/update 更新安装方法: 1.[Help]-[Software Updates]-[Find and Install...] 2.[Search for new features to install] -> [Next] 3.[New Remote Site.

Django Admin Cookbook-23如何在Django admin中添加嵌套的内联

23.如何在Django admin中添加嵌套的内联? 假设我们定义了以下模型: class Category(models.Model): ... class Hero(models.Model): category = models.ForeignKey(Catgeory) ... class HeroAcquaintance(models.Model): hero = models.OneToOneField(Hero, on_delete=models.CASCADE) ... 你想拥有

如何在RCP程序中添加一个banner栏

前言:这段时间还算比较空闲,我准备把过去做过的有些形形色色,甚至有些奇怪的研究总结一下,也许刚好有人用的着也不一定,不枉为之抓耳挠腮的时光和浪费的电力.以前有个客户提出要在RCP程序中添加一个banner栏,研究了很久才搞定.代码是基于eclipse4.3.2的. 先看一下效果预览: 为了添加一个banner栏,我们必须重写RCP程序最外层的layout类,即TrimmedPartLayout.java.这个layout类是用来控制menu,toolbar等最基本的layout布局的.我们写一个

MyEclipse 中 添加 js自动完成模版

MyEclipse 中 添加 js自动完成模版: window>preference>MyEclipse>Files and Editors>JavaScript>Editor>Templates|New 进行添加.在编写的过程中可以进行变量的添加: 例如:Name: clg Pattern: console.log(${});${cursor} 这样在()中输入之后,再回车就到行尾了: 还有其他变量可以进行了解: