版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014094101/article/details/80546493
本文介绍如何在Flask项目中集成富文本编辑器CKeditor
CKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了CKeditor。
下载CKeditor
访问CKeditor
官方网站,进入下载页面,选择Standard Package
(一般情况下功能足够用了),然后点击Download CKEditor
按钮下载ZIP格式的安装文件。如果你想尝试更多的功能,可以选择下载Full Package
。
下载好CKeditor之后,解压到Flask项目static/ckeditor
目录即可。
在Flask项目中使用CKeditor
在Flask项目中使用CKeditor只需要执行两步就可以了:
- 在
<script>
标签引入CKeditor主脚本文件。可以引入本地的文件,也可以引用CDN上的文件。 - 使用
CKEDITOR.replace()
把现存的<textarea>
标签替换成CKEditor
。
示例代码:
<!DOCTYPE html>
<html>
<head>
<title>A Simple Page with CKEditor</title>
<!-- 请确保CKEditor文件路径正确 -->
<script src="{{ url_for('static', filename='ckeditor/ckeditor.js') }}"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// 用CKEditor替换<textarea id="editor1">
// 使用默认配置
CKEDITOR.replace('editor1');
</script>
</form>
</body>
</html>
因为CKeditor足够优秀,所以第二步也可只为追加名为ckeditor的class属性值,CKeditor就会自动将其替换。例如:
<!DOCTYPE html>
<html>
<head>
<title>A Simple Page with CKEditor</title>
<!-- 请确保CKEditor文件路径正确 -->
<script src="{{ url_for('static', filename='ckeditor/ckeditor.js') }}"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" class="ckeditor" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
</form>
</body>
</html>
CKEditor脚本文件也可以引用CDN上的文件,下面给出几个参考链接:
<script src="//cdn.ckeditor.com/4.4.6/basic/ckeditor.js"></script>
基础版(迷你版)<script src="//cdn.ckeditor.com/4.4.6/standard/ckeditor.js"></script>
标准版<script src="//cdn.ckeditor.com/4.4.6/full/ckeditor.js"></script>
完整版
…..
完整DEMO
这里有个简单的DEMO:https://coding.net/u/wtx358/p/flask-ckeditor-demo/git