Home » 富文本编辑器
  • 24
  • 12月

本文介绍如何在Flask项目中集成富文本编辑器xhEditor,并实现图片上传、文件 上传、视频上传、远程抓图等(包括拖拽上传)功能。

[TOC]

xhEditor简介

xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化HTML编辑器,基于网 络访问并且兼容IE 6.0+, Firefox 3.0+, Opera 9.6+, Chrome 1.0+, Safari 3.22+。

xhEditor曾经是我比较喜欢的编辑器,也是率先支持拖拽上传的编辑器之一。 xhEditor在当年是优秀的编辑器,功能足够强大,使用体验也相当好,拖拽上传是 我最喜欢的功能,只可惜已经停止开发了。xhEditor最后的稳定版本是1.1.14,至 今已超过2年未更新(2013年发布了开发版本1.2.1),作者已经停止开发和维护了 ,社区论坛完全不能打开。

由于xhEditor基于jQuery开发,而对于新版本的jQuery,它并不能很好的支持,只 …

Read More...

  • 23
  • 12月

本文介绍如何在Flask项目中集成富文本编辑器CKeditor,并实现图片上传、文件上传、视频上传等功能。

CKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了CKeditor。

[TOC]

下载CKeditor

访问CKeditor官方网站,进入下载页面,选择Standard Package(一般情况下 功能足够用了),然后点击Download CKEditor按钮下载ZIP格式的安装文件。如果 你想尝试更多的功能,可以选择下载Full Package

下载好CKeditor之后,解压到Flask项目static/ckeditor目录即可。

在Flask项目中使用CKeditor

在Flask项目中使用CKeditor只需要执行两步就可以了:

  1. <script>标签引入CKeditor主脚本文件。可以引入本地的文件,也可以引用CDN上的文件。
  2. 使用CKEDITOR.replace()把现存的<textarea …

Read More...

  • 23
  • 12月

本文介绍如何在Flask项目中集成富文本编辑器UEditor,并实现文件上传、图片上传、视频上传及涂鸦功能。

[TOC]

UEditor简介

UEditor是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。

由于1.4.2版本之后的版本与之前版本存在较大的差异,本文以1.4.3版本为蓝本。

具体文档参见:http://fex-team.github.io/ueditor/

在Flask项目中加入UEditor

下载UEditor:

访问UEditor首页,下载1.4.3 PHP UTF-8版本的UEditor,并解压到Flask应用程序的static目录。解压之后的目录结构是这样的:

| static/
| | ueditor/
| | |+dialogs/
| | |+lang/
| | |+php/
| | |+themes/
| | |+third-party/
| | |-config.json
| | |-index.html …

Read More...