正文 

当前位置： 首页 > IT > java教程

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

亓官劼 亓官劼     2023-03-14     513

关键词：

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

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

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

小白都能看得懂的教程看完这篇还不会生成随机验证码图片，你来打我！！！(代码片段)

小白都能看得懂的教程一文教你实现生成随机图像验证码大家好，我叫亓官劼（qíguānjié），三本计算机在读，目前在积极准备21计算机考研中，同时也在学习后端开发，准备工作。不敢孤注一掷，... 查看详情

小白都能看懂的实战教程手把手教你pythonweb全栈开发(day4)(代码片段)

大家好，我叫亓官劼（qíguānjié）,这个《小白都能看懂的实战教程手把手教你PythonWeb全栈开发》是一个零基础的实战教程，手把手带你开发一套系统，带你了解Pythonweb全栈开发，目前正在连续更新中，... 查看详情

小白都能看懂的实战教程手把手教你pythonweb全栈开发(day2)(代码片段)

小白都能看懂的实战教程手把手教你PythonWeb全栈开发Flask(PythonWeb)实战系列之在线论坛系统第二讲这是小白都能看懂的实战教程手把手教你PythonWeb全栈开发的第二讲，如果文中有基础知识不太熟悉的话，可以看博主前几期... 查看详情

❤️0基础小白也能看得懂的数据结构之栈❤️⭐建议收藏⭐(代码片段)

⭐欢迎来到数据结构专栏，一起学习，一起进步⭐⭐文章目录：一、栈是什么？二、集合框架中的栈三、栈方法的处使用3.1、初次使用Stack栈的方法3.2、栈的push方法3.3、栈的pop方法3.4、栈的peek方法3.5栈的empty方法3... 查看详情

《游戏系统设计十》从零复刻王者荣耀活动系统，策划都能看得懂的活动系统，源码奉送

目录1、活动类型2、需求3、文件下载4、文件解压5、json的读取6、模块组织方式 查看详情

《游戏系统设计十》从零复刻王者荣耀活动系统，策划都能看得懂的活动系统，源码奉送

目录1、活动类型2、需求3、文件下载4、文件解压5、json的读取6、模块组织方式 查看详情

小白都能看懂的实战教程手把手教你pythonweb全栈开发(day5)(代码片段)

大家好，我叫亓官劼（qíguānjié）,这个《小白都能看懂的实战教程手把手教你PythonWeb全栈开发》是一个零基础的实战教程，手把手带你开发一套系统，带你了解Pythonweb全栈开发，目前正在连续更新中，... 查看详情

小白都能看懂的实战教程手把手教你pythonweb全栈开发(day6）(代码片段)

大家好，我叫亓官劼（qíguānjié）,这个《小白都能看懂的实战教程手把手教你PythonWeb全栈开发》是一个零基础的实战教程，手把手带你开发一套系统，带你了解Pythonweb全栈开发，目前正在连续更新中，... 查看详情

外行人都能看得懂的机器学习，错过了血亏！(代码片段)

前言只有光头才能变强没错，这篇主要跟大家一起入门机器学习。作为一个开发者，”人工智能“肯定是听过的。作为一个开发面试者，肯定也会见过”机器学习“这个岗位(反正我校招的时候就遇到过)。可能还会听... 查看详情

外行人都能看得懂的机器学习，错过了血亏！(代码片段)

前言只有光头才能变强没错，这篇主要跟大家一起入门机器学习。作为一个开发者，”人工智能“肯定是听过的。作为一个开发面试者，肯定也会见过”机器学习“这个岗位(反正我校招的时候就遇到过)。可能还会听过或者见过... 查看详情

转载极域九法——小白看得懂的退出极域电子教室教程

...从没有说这里是所有的方法，只是我们常用的，给可怜的小白们科普一下， 查看详情

手把手教你使用vuex，猴子都能看懂的教程

点击上方 高级前端进阶，回复“加群”加入我们一起学习，天天进步为什么要做这篇文集呢？市面上关于vuex的教程多如牛毛，甚至vuex被某些大神都封装出花儿来了；一方面是想从最简单最基础的地方带大家使用一下vuex，另... 查看详情

[图解]小白都能看懂的fasterr-cnn–原理和实现细节(代码片段)

Contents [hide]1 论文原文2 介绍3 Anchors3.1 如何确定一个anchor是正样本还是负样本？4 实现细节5 调试信息6 参考资料论文原文FasterR-CNN:TowardsReal-TimeObjectDetectionwithRegionProposalNetworks介绍　　FasterRCNN由RossB.Girshick在2016年提出ÿ 查看详情

小白都看得懂的布局加载流程(代码片段)

本篇文章的起点是从Activity的setContentView方法说起。我先放一张加载布局的时序图，布局加载涉及的类相对比较少一些。1.Activity#setContentView()publicvoidsetContentView(@LayoutResintlayoutResID)getWindow().setContentView(layoutResID);init 查看详情

hdu1024maxsumplusplus小白都可以看得懂的解析

这道题弄了很久，网上的很多都看不懂，所以想要写一个像我这种菜鸟都可以看得懂的解析。题意是将一个长度为n的序列，分成m段不相交叉的子段，使得他们的和最大。于是可以用dp[i][j]来表示在前j个数中，以num[j]结尾并分为i... 查看详情

入门必看-算法基础知识讲解小白都也能看得懂(代码片段)

💂个人主页:IT学习日记🤟版权:本文由【IT学习日记】原创、在CSDN首发、需要转载请联系博主💬如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦💅想寻找共同成长的小伙伴，请点击【技... 查看详情

小白都能看懂的linux安装oracle数据库详细教程(代码片段)

作者简介作者：LuciferLiu，中国DBA联盟(ACDU)成员。目前主要从事OracleDBA工作，曾从事Oracle数据库开发工作，主要服务于生产制造，汽车金融等行业。现拥有OracleOCP，OceanBaseOBCA认证，擅长Oracle数据库运维... 查看详情

人人都看得懂的正则表达式教程

编写验证规则最流行和最简单的方法就是正则表达式了，但唯一的一个问题是正则表达式的语法太隐晦了，让人蛋疼无比。很多开发者为了在项目中应用复杂的验证，经常要使用一些小抄来记住正则式的复杂语法和各种常用命令... 查看详情