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

最新推荐文章于 2024-05-21 10:05:48 发布

置顶亓官劼

最新推荐文章于 2024-05-21 10:05:48 发布

阅读量1.5w

点赞数 126

分类专栏：前端小白都能看得懂的教程系列

本文链接：https://blog.csdn.net/qiguanjiezl/article/details/105160915

版权

小白都能看得懂的教程系列同时被 2 个专栏收录

16 篇文章 6 订阅

订阅专栏

前端

6 篇文章 1 订阅

订阅专栏

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

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

本文原创为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>

运行效果为：在这里插入图片描述

这样一个富文本编辑器就成功的嵌入到了我们的页面中。其中初试显示的内容就是<script id="editor" type="text/plain">这里将会显示在编辑器的初始化中！</script>中在<script>之间显示的内容。

在前端实现富文本编辑器你学会了吗？本文到这里就结束了，是不是很简答？如果有帮助给博主一个赞吧~

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

亓官劼

关注

126
点赞
踩
49

收藏

觉得还不错? 一键收藏
打赏
148
评论
小白都能看得懂的教程一本教你如何在前端实现富文本编辑器

小白都能看得懂的教程一本教你如何在前端实现富文本编辑器更多优质博文地址：第一讲：小白都能看懂的实战教程手把手教你Python Web全栈开发第一讲Flask基本语法：Flask学习（一）博客地址Bootstrap用法：一文教会你Bootstrap，让你也可以快速建站白嫖开发环境（IDEA/Pycharm/Clion）：一文教你如何白嫖JetBrains全家桶（IDEA/PtChra...
复制链接

扫一扫