Django中富文本编辑器总结

富文本编辑器

概念

  • 能够设置文字样式的页面成为文本编辑器(带有格式的文本信息)

tinyce 配置：

1.在虚拟环境中安装包。

pip install django-tinymce==2.6.0

2.在test6/settings.py中为INSTALLED_APPS添加编辑器应用。

 

INSTALLED_APPS = (
...
'tinymce',
)

3.在test6/settings.py中添加编辑器配置。

TINYMCE_DEFAULT_CONFIG = {
　　'theme': 'advanced',
　　'width': 600,
　　'height': 400,
}

4.在test6/urls.py中配置编辑器url。

urlpatterns = [
...
url(r'^tinymce/', include('tinymce.urls')),
]

　

在后台管理页面中使用(Admin)：


1）在booktest/models.py中，定义模型类，模型类的属性为HTMLField()类型。

from django.db import models
from tinymce.models import HTMLField

class GoodsInfo(models.Model):
gcontent=HTMLField()

2）生成迁移文件。

python manage.py makemigrations

3）执行迁移。

python manage.py migrate

4）在booktest/admin.py中注册模型类GoodsInfo

from django.contrib import admin
from models import *
class GoodsInfoAdmin(admin.ModelAdmin):
list_display = ['id']

admin.site.register(GoodsInfo,GoodsInfoAdmin)

5）运行服务器，进入admin后台管理，点击GoodsInfo的添加，即可看到效果
在编辑器中编辑内容后保存。即可

自定义编辑器：

1）在booktest/views.py中定义视图editor，用于显示编辑器。

 

def editor(request):
return render(request, 'booktest/editor.html')

2）在booktest/urls.py中配置url。

url(r'^editor/',views.editor),

3）在项目的目录创建statics文件夹在该文件的文件夹里面创建js,css，img文件夹并在配置文件setting.py里面添加静态文件的查找路径

STATICFILES_DIRS = [os.path.join(BASE_DIRS, 'statics')]

4）打开py_django虚拟环境的目录，找到tinymce的目录。

/home/python/.virtualenvs/py_django/lib/python2.7/site-packages/tinymce/static/tiny_mce

5）拷贝tiny_mce.js文件、langs文件夹以及themes文件夹拷贝到项目目录下的static/js/目录下。

6）在templates/booktest/目录下创建editor.html模板。

    <head>
    <meta charset="UTF-8">
    <title>editor</title>
    <script src="/static/js/tiny_mce_src.js"></script>
    <script>

        tinymce.init({
            'mode': 'textareas',
            'theme': 'advanced',
            'width': 500,
            'height': 300,

        })
    </script>
    </head>
    <body>
    <form action="/get_content/" method="post">
    {% csrf_token %}
    <textarea name="content" id="" cols="30" rows="10" ></textarea>
        <input type="submit" value="提交">
    </form>
    </body>
js示例Code

7 )配置url

8）运行服务器，在浏览器中输入如下网址：

http://127.0.0.1:8000

使用已保存的富文本内容

通过富文本编辑器产生的字符串是包含html的:例如：

'<title>展示富文本编辑器内容</title>'

在模板中显示字符串时，默认会进行html转义，如果想正常显示需要关闭转义。

问：在模板中怎么关闭转义
　　方式一：过滤器safe
　　方式二：标签autoescape off

使用流程：

1）在booktest/views.py中定义视图show，用于显示富文本编辑器的内容。

def show_goods(request):
    """显示数据库当中的内容"""
    contents = GoodsInfo.objects.get(id=2)
    return render(request, 'booktest/show_goods.html', {'contents': contents})

2）在booktest/urls.py中配置url。

3）在templates/booktest/目录下创建show.html模板。

<body>
    {{ contents.gcontent| safe }}
    {% autoescape off%}
    {{ contents.gcontent }}
    {% endautoescape %}
</body>

4）运行服务器，在浏览器中输入如下网址：即可显示

http://127.0.0.1:8000

　　

posted @ 2017-07-29 19:48  凯哥吧  阅读(2687)  评论(0)  编辑  收藏  举报