UEditor富文本编辑器简单使用
UEditor富文本编辑器简单使用
一、下载地址:https://ueditor.baidu.com/website/
官网中并没有 python 版本的 UEditor 富文本编辑器,本文简单介绍 python 版本的 UEditor ,UEditor 源码下载链接:
UEditor 使用文档:http://fex.baidu.com/ueditor/
二、UEditor 使用
Ueditor富文本编辑器源码,分为前端源码及后端源码,我们需要将前端源码(js、css文件等)放置在前端代码目录,后端源码放置在后端代码目录,如下:
1、前端使用
1)js 文件引用:
<script src="{% static 'ueditor/ueditor.config.js' %}"></script>
<script src="{% static 'ueditor/ueditor.all.min.js' %}"></script>
2)需要使用 UEditor 的地方:
<script id="editor" type="text/plain"> // 固定用法
{{ news.content|safe }} // 内容
</script>
3)初始化 ueditor 富文本框:
<script>
// 初始化 ueditor
$(function () {
window.ue = UE.getEditor('editor',{ // window.ue 全局变量
'initialFrameHeight': 400, // ueditor 高度
'serverUrl': '{% url "ueditor:upload" %}' // ueditor 服务端url
})
});
</script>
2、后端使用
1)xfz/urls.py:凡是 ueditor 相关的url都转到ueditor目录下的urls.py中匹配
# xfz/urls.py
path('ueditor/',include('apps.ueditor.urls')), # ueditor 富文本
2)settings.py 相关配置
INSTALLED_APPS 注册:
INSTALLED_APPS = [
'…',
'apps.ueditor',
]
其他配置:
# ueditor 配置
UEDITOR_UPLOAD_TO_SERVER = True # 上传到当前服务器 ,true
MEDIA_UPLOAD = os.path.join(MEDIA_ROOT, 'news', 'newsImg')
UEDITOR_UPLOAD_PATH = MEDIA_UPLOAD # 上传的路径 UEDITOR_CONFIG_PATH = os.path.join(BASE_DIR,'front','dist','ueditor','config.json') # ueditor config 路径
至此,UEditor 富文本编辑器简单使用便介绍到这里了,如有兴趣可参考上述所给文档。
UEditor 初始化后界面:
此时,在UEditor 编辑器中上传图片等,会直接上传到 settings.py 中配置所指定的路径中。需要注意的是,在表单中使用 UEditor 富文本编辑器时,不能使用传统的 form 表单的形式提交数据,因为后端无法获取到富文本框中的数据。
如果表单中含有富文本数据需提交,建议使用 ajax 提交的方式来完成,具体实现可参考项目链接:
UEditor富文本编辑器简单使用的更多相关文章
- 前后端分离ueditor富文本编辑器的使用-Java版本
最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...
- MVC 使用 Ueditor富文本编辑器
一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...
- 百度ueditor富文本编辑器的使用
百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...
- ASP.NET MVC5 中百度ueditor富文本编辑器的使用
随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...
- PHP如何搭建百度Ueditor富文本编辑器
本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下 ...
- ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议
ueditor富文本编辑器默认支持百度地图组件,但是如果导入动态地图后会加很多默认的地图组件在上面.如果需要自定义动态地图的组件则需要修改ueditor特定的html. ueditor百度地图组件所在 ...
- WEB项目中使用UEditor(富文本编辑器)
Ueditor富文本编辑器是在很多项目里经常用到的框架,是百度开发团队开发的一款很好用的富文本编辑器 下面就是我在一个系统里用到的,有了富文本编辑器,管理员使用起来不是很方便? 所以本博客介绍这个富文 ...
- django之百度Ueditor富文本编辑器后台集成
Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...
- springMVC -- 整合UEditor(富文本编辑器)
工作中需要用到UEditor编辑文本,在与springMVC进行整合时,出现了一些问题,结果导致,在进行图片上传时出现如下提示: 上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题. 一种方 ...
随机推荐
- zookeeper源码分析:选举流程和请求处理
集群启动: QuorumPeerMain. runFromConfig() quorumPeer.start(); loadDataBase(); cnxnFactory.start(); ...
- Capabilities 入门教程:基础实战篇
该系列文章总共分为三篇: Linux Capabilities 入门教程:概念篇 Linux Capabilities 入门教程:基础实战篇 待续... 上篇文章介绍了 Linux capabilit ...
- python-unittest模块中的各类断言
unittest中断言主要有三种类型: 基本的布尔断言,即:要么正确,要么错误的验证 比较断言,如比较两个变量的值(跟上面的布尔断言区别不大,主要是通过比较两个变量的值得出布尔值) 复杂断言(一般用的 ...
- Akka系列(八):Akka persistence设计理念之CQRS
前言........ 这一篇文章主要是讲解Akka persistence的核心设计理念,也是CQRS(Command Query Responsibility Segregation)架构设计的典型 ...
- 浅谈Javascript数据属性与访问器属性
ES5中对象的属性可以分为‘数据属性’和‘访问器属性’两种. 数据属性一般用于存储数据数值,访问器属性对应的是set/get操作,不能直接存储数据值. 数据属性特性:value.writable.en ...
- 實現QQ第三方登錄
<?php // 写几个函数,分别用于获取code,token,openid,用户信息 // 跳转到QQ授权登录页面 function code(){ $response_type='code' ...
- 解决PHP上传文件、下载文件中由于文件过大导致的上传失败及下载不全问题
用php+apache上传文件的时候,由于文件过大,容易导致上传失败, 解决办法:修改php.ini中:upload_max_filesize 2m 即允许上传文件大小的最大值.默认为2M ,大小 ...
- unittest中的testCase执行顺序
1.方法顺序 def setUp(self): 在测试方法前执行 def tearDown(self): 在测试方法后执行 class TestMethod(unittest.TestCase): # ...
- ReactNative: Android与iOS平台兼容处理
方法一: 创建不同的文件扩展名:*.android.js*.io.js 方法二: import { Platform } from 'react-native'; if (Platform.OS == ...
- 用SQL存储过程生成唯一单据号
用SQL存储过程生成唯一单据号 在一些系统中,经理要生成单据号,为了不使多台客户端生成的单据号重复,一般要在服务端生成这种流水号,本文是在数据库中生成流水号,并且可以生成多种类型的单据号(比如 ...