富文本编辑器

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了富文本编辑器相关的知识,希望对你有一定的参考价值。

Django 的富文本编辑器

想要用 首先 下载

pip install django-tinymce

创建应用
python manage.py startapp task_1

创建模型
from django.db import models
from tinymce.models import htmlField

class MessageInfo(models.Model):
username = models.CharField(max_length=20)
email = models.EmailField(blank=True, null=True)
subject = models.CharField(max_length=50)

info = HTMLField()

在settings中注册应用

INSTALLED_APPS = [
‘django.contrib.admin‘,
‘django.contrib.auth‘,
‘django.contrib.contenttypes‘,
‘django.contrib.sessions‘,
‘django.contrib.messages‘,
‘django.contrib.staticfiles‘,

#需要使用到第三方的静态资源  必须注册应用
`‘tinymce‘`

]**
生成迁移文件:根据模型 类生成sql语句**
python manage.py makemigrations

执行迁移:执行sql语句生成数据表
python manage.py migrate

tinymce配置
TINYMCE_DEFAULT_CONFIG = {
‘theme‘: ‘advanced‘,
‘width‘: 600,
‘height‘: 400,
}

配置项目URL
from django.conf.urls import url
from . import views
app_name= ‘blog‘

urlpatterns = [

url(r‘^contactus/$‘, views.contactus, name=‘contactus‘),

]

编写视图函数
from django.shortcuts import render
from .models import MessageInfo

def contactus(request):
if request.method == ‘GET‘:
return render(request, ‘contact.html‘)
elif request.method == ‘POST‘:
x = MessageInfo()
x.username = request.POST[‘name‘]
x.email = request.POST[‘email‘]
x.subject = request.POST[‘subject‘]
x.info = request.POST[‘message‘]
x.save()
return render(request, ‘index.html‘)
编写模板文件
<!DOCTYPE html>
<html>
<head>
<title>Black & White</title>

    <!-- meta -->
    <meta charset="UTF-8">

    <script src="/static/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript">
      tinyMCE.init({
          ‘mode‘:‘textareas‘,
          ‘theme‘:‘simple‘,
          ‘width‘: ‘100%‘ ,
          ‘height‘:100
      });
    </script>
</head>
<body>
    <div>
        <form action="{% url ‘blog:contactus‘ %}" method="post">
                <input type="text" name="name" placeholder="姓名" required>
                <input type="email" name="email" placeholder="邮箱" required>
                <input type="text" name="subject" placeholder="建议标题" required>
                <textarea name="message" rows="7" placeholder="输入你的建议" required></textarea>
                <button type="submit">提交</button>
        </form>
    </div>
</body>

</html>

以上是关于富文本编辑器的主要内容,如果未能解决你的问题,请参考以下文章

谁会将富文本编辑器代码插入到html页面中

富文本编辑器代码编辑实时高亮

2016-6-5富文本编辑器

为啥在div里面做富文本编辑没有作用

从 HTML 正文中提取文本片段(在 .NET 中)

富文本编辑器代码