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

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

博主博客文章内容导航(实时更新)
更多优质文章推荐:

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

亓官劼 CSDN认证博客专家 Python 全栈 数据结构与算法
大家好,我是亓官劼(qí guān jié),在博客中分享数据结构与算法、Python全栈开发、Java后端开发、前端、OJ题解及各类报错信息解决方案等经验。一起加油,用知识改变命运,未来可期。
若有事项需联系博主,可通过微信:qiguanjie2015 进行联系,有空会回复。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页
实付 29.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值