django中嵌入百度editor插件
一、安装和配置步骤:
1、先下载百度ueditor插件,并安装pip install DjangoUeditor
2、把下载好的ueditor插件放到自己的项目中
3、配置setting
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'Web',
'DjangoUeditor',
)
4、配置url
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
# url(r'^ueditor/',include('DjangoUeditor.urls' )),
url(r'^ueditor/',include(DjangoUeditor_urls)),
5、启动你的项目,进入django后台,即可看到百度插件编辑器
二、在项目的form中嵌入百度插件
1、确保你下载的百度插件已经放到你的项目中,如statics目录下的pugins目录中
2、在前端中加入渲染插件脚本(form)
<div id=id_content name="content" class="edui-default" style="display: inline-block;" >
<div id="edui1" class="edui-editor edui-default"style="width: 1000px; z-index: 999;">
{{ form|safe }}
</div>
</div>
3、在前端中加入以下(js)
<script type="text/javascript">
var id_content = UE.getEditor('id_content',{'toolbars': [['source', 'undo', 'redo', 'bold', 'italic', 'underline', 'forecolor', 'backcolor', 'superscript', 'subscript', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', 'blockquote', 'formatmatch', 'removeformat', 'autotypeset', 'inserttable', 'pasteplain', 'wordimage', 'searchreplace', 'map', 'preview', 'fullscreen'], ['insertcode', 'paragraph', 'fontfamily', 'fontsize', 'link', 'unlink', 'insertimage', 'insertvideo', 'attachment', 'emotion', 'date', 'time']], 'initialFrameWidth': 1000, 'initialFrameHeight': 300, 'serverUrl': '/ueditor/controller/?imagePathFormat=uploads%2Fimages%2F&filePathFormat=uploads%2Ffiles%2F'});
id_content.ready(function(){
});
</script>
注意:一般js放到页面底部,这样可以减轻前端的加载速度,页面响应速度较快
django中嵌入百度editor插件的更多相关文章
- 网页中嵌入百度地图报错:The request has been blocked,the content must served over Https
网页中嵌入百度地图 1.进入百度地图开发平台:http://lbsyun.baidu.com/index.php?title=jspopular 2.获取密钥:http://lbsyun.baidu. ...
- pc网页中嵌入百度地图
pc网页中嵌入百度地图 1 打开百度地图生成器: http://api.map.baidu.com/lbsapi/creatmap/ 2 设置好了之后,点击获取代码,将代码粘贴到文件中保存为html文 ...
- 在ionic/cordova中使用百度地图插件
在ionic项目中,如果想实现定位功能,可以使用ng-cordova提供的cordova-plugin-geolocation. 但由于高墙的缘故,国内andorid环境下,此插件不起作用(ios环境 ...
- 在Eclipse中使用Propertites Editor插件来解决property文件中文显示乱码
在一般情况下,propertites文件在eclipse中的显示中文一直显示乱码,想要解决这个问题,需要通过在eclipse中安装一个Propertites Editor插件来进行解决. 在Eclip ...
- C# 程序中嵌入百度地图
本例是对WinForm中使用百度地图的简要介绍.百度地图目前支持Android开发,IOS开发,Web开发,服务接口,具体可以参照'百度地图开放平台'. [动态加载百度地图]涉及到的知识点: WebB ...
- [ json editor] 如何在网页中使用Json editor 插件
[目的] 在自己的网页上交由用户进行json的可视化编辑 [难点]1.json中含有递归嵌套的数组和对象 2.json中的基本值类型有数字.字符串和布尔型 [方法]使用daviddurman的Flex ...
- 使用CKplayer插件在网页中嵌入视频的方法(常用笔记2)
在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...
- C#开发ActiveX插件-aspx中嵌入
刚到新的公司,第一周让我熟悉一下他们用的silverlight和arcgis.这周,也就是昨天分配了我一个小小的任务! 哪个项目的不知道,是让我实现一个在aspx中嵌入activeX插件! 在网上找了 ...
- 【CKplayer】使用CKplayer插件在网页中嵌入视频的方法
在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...
随机推荐
- 【C语言】03-第一个C程序代码分析
前面我们已经创建了一个C程序,接下来分析一下里面的代码. 项目结构如下: 一.代码分析 打开项目中的main.c文件(C程序的源文件拓展名为.c),可以发现它是第一个C程序中的唯一一个源文件,代码如下 ...
- 使用本地yum源
[root@xaiofan ~]# mount /dev/sr0 /mnt/ [root@xaiofan ~]# cat /etc/yum.repos.d/local.repo [loacl]name ...
- PDO常用方法及其应用
PDO::query() 主要是用于有记录结果返回的操作,特别是SELECT操作 PDO::exec() 主要是针对没有结果集合返回的操作,如INSERT.UPDATE等操作 PDO::prepare ...
- php代码审计基础笔记
出处: 九零SEC连接:http://forum.90sec.org/forum.php?mod=viewthread&tid=8059 --------------------------- ...
- android之打开网页
首先改写strings.xml文件 代码如下: <resources> <string name="app_name">Intent应用</strin ...
- PHP 错误与异常 笔记与总结(14 )记录和发送异常信息
当发生异常时,把异常信息记录到日志文件中: <?php header('content-type:text/html; charset=utf-8'); class LogException e ...
- Javascript 笔记与总结(2-10)删除节点,创建节点
[删除节点] 步骤: ① 找到对象 ② 找到他的父对象 parentObj ③ parentObj.removeChild(子对象); [例] <!DOCTYPE html> <ht ...
- UIbutton 圆角和边线
#define WhiteColor [UIColor whiteColor]#define YellowColor Color_RGB(253,131,42,1)//主题黄#define Font ...
- PHP实现远程下载文件到本地
PHP实现远程下载文件到本地 投稿:hebedich 字体:[增加 减小] 类型:转载 经常写采集器发布接口需要使用到远程附件的功能,所以自己写了一个PHP远程下载文件到本地的函数,一般情况下已经 ...
- Yii源码阅读笔记(七)
接上次的组件(component)代码: /** * Returns a list of behaviors that this component should behave as. * 定义该对象 ...