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

Posted 2022-07-31 亓官劼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小白都能看得懂的教程一本教你如何在前端实现富文本编辑器相关的知识，希望对你有一定的参考价值。

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

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