小白都能看得懂的教程一本教你如何在前端实现富文本编辑器

博主博客文章内容导航（实时更新）
更多优质文章推荐：

收藏！最详细的Python全栈开发指南看完这篇你还不会Python全栈开发你来打我!!!
一本教你如何在前端实现富文本编辑器
小白都能看得懂的教程一本教你如何在前端实现markdown编辑器
Flask学习(基本语法)
一文教会你Bootstrap，让你也可以快速建站
一文教你如何白嫖JetBrains全家桶（IDEA/PtChram/CLion）免费正版
小白都能看懂的实战教程手把手教你Python Web全栈开发 (DAY 1)
小白都能看懂的实战教程手把手教你Python Web全栈开发 (DAY 2)
小白都能看懂的实战教程手把手教你Python Web全栈开发 (DAY 3)
小白都能看懂的实战教程手把手教你Python Web全栈开发 (DAY 4)
小白都能看懂的实战教程手把手教你Python Web全栈开发 (DAY 5)
小白都能看懂的实战教程手把手教你Python Web全栈开发 (DAY 6)
小白都能看懂的实战教程手把手教你Python Web全栈开发 (DAY 7)

本文原创为CSDN博主亓官劼，原文链接为:小白都能看得懂的教程一本教你如何在前端实现富文本编辑器，请大家支持原创，拒绝抄袭!!!。

在前端实现富文本编辑器

这里我们可以使用UEDitor，是一个开源的富文本编辑器，简单易用。我们去可以UEDitor官网去下载他的任意版本都可以。

官网只有PHP,ASP和JSP的版本，没有Python 版本，不过没关系，我们任意下载一个就好了。然后我们创建一个UEDitor文件夹，将下面几项拖入到文件夹中即可使用。
这里拿目前正在开发的在线论坛系统为例，我将它放在了/static/ueditor/中

然后我们创建一个demo.html文件，来将uedior的配置文件引入进去，然后设置一个<script id="editor" type="text/plain"> 这里将会显示在编辑器的初始化中！ </script>这个会被初始化为一个富文本编辑器，然后我们再将它实例化即可<script type="text/javascript"> var editor = UE.getEditor('editor'); </script>实例化里面的名称就是上面的id。

本文原创为CSDN博主亓官劼，原文链接为:小白都能看得懂的教程一本教你如何在前端实现富文本编辑器，请大家支持原创，拒绝抄袭!!!。

全部的代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入配置文件 -->
    <script src="/static/ueditor/ueditor.config.js"}></script>
    <!-- 引入编辑器源码文件 -->
    <script src="/static/ueditor/ueditor.all.min.js"}></script>
</head>
<body>
<script id="editor" type="text/plain">
    这里将会显示在编辑器的初始化中！
</script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var editor = UE.getEditor('editor');
</script>
</body>
</html>