富文本框编辑器

第一种方法

第一步，安装django-tinymce

第二步，在setting文件中配置

INSTALLED_APPS={
    #添加富文本框编辑器这个模块
    'tinymce',
}



#在setting配置中配置tinymce的配置项参数
# tinymce 的配置项
TINYMCE_JS_URL = "/static/tiny_mce/tiny_mce.js"
TINYMCE_JS_ROOT = "/static/tiny_mce/"
TINYMCE_DEFAULT_CONFIG = {
	'theme': "advanced",
	 'width': 600,
	 'height': 400,
}

第三步，在model中使用下边的内容，然后同步到数据库之中

from tinymce.models import HTMLField
# content = models.TextField()
content = HTMLField()

第四步，在admin.py加入，并注册

from django.contrib import admin
from . import models
# Register your models here
admin.site.register(models.Article)

第五步，在控制台创建高级管理员

python manage.py createsuperuser

第六步，如果在前端页面中要是用，需要配置页面如下内容

<script src="/static/tiny_mce/tiny_mce.js"></script>
<script>
    tinyMCE.init({
        "mode":"textareas",
       "theme":"advanced",
        "width":500,
        "height":300
            })
</script>




在所需添加富文本编辑框的地方添加下边的
店铺封面：<br><textarea name="content" id="" cols="30" rows="10"></textarea><br>

第二种方法

第一步，下载安装

注意，目前 DjangoUeditor 官方下载的不支持 python3，所以
不建议使用 pip 安装，当然如果的 python 是 2.x 版的话，直接 
pip 安装即可

# 如果是 python2 的可以使用如下命令完成
pip install DjangoUeditor

# 如果 python3 的则需要下载源代码，地址：
https://github.com/twz915/DjangoUeditor3/

下载后之后，使用离线安装方式安装，解压压缩包，在压缩包中执行命令：
python setup.py install

第二步，在setting文件中配置

INSTALLED_APPS = [
… 
# 百度的 ueditor 编辑器
"DjangoUeditor",
]

第三步，在setting配置中配置图片的上传路径

	# 图片上传路径，位置自己定义即可
	MEDIA_URL = '/static/uepload/'
	MEDIA_ROOT = './static/uepload/'

第四步，在主路由中配置ueditor的路由

urlpatterns = [
…
# 百度 ueditor 的路由
 url(r'^ueditor/', include('DjangoUeditor.urls'))
]

第五步，在model中使用，然后后天就会自动设置为富文本框了

from DjangoUeditor.models import UEditorField
# content = models.TextField()
content = UEditorField()

第六步，如果在前端页面中使用，需要在前端页面加入以下内容

<script id="id_content" name="content" style="display: inline-block;" type="text/plain"></script>
<link rel="stylesheet" href="/static/ueditor/themes/default/css/ueditor.css">
<script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/static/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="/static/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
		var id_content = UE.getEditor('id_content',{
 'initialFrameWidth': 600,
 'initialFrameHeight': 300,
 'serverUrl': '/ueditor/controller/?imagePathFormat=&filePathFormat='});
 id_content.ready(function(){});
</script>

猜你喜欢