At present, there are countless rich text editors on the Internet, but Baidu's UEditor can be regarded as one of the best. Today, let's take a brief look at this rich text editor.
Download: Click to open the link
In fact, almost all rich text editors are the same model. When downloading, they are divided into several versions. You can download the corresponding version according to your needs. One of the source code versions integrates all versions, and the relative file It's bigger, as shown in the picture:
After downloading and unzipping, it looks like this:
To see the effect is very simple, create a demo.html, the code is like this:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
<link rel="stylesheet" type="text/css" href="themes/default/_css/ueditor.css"/>
</head>
<style>
div{width:80rem; height: 30rem;}
</style>
<body>
<div>
<!-- The container that loads the editor-->
<script id="container" name="content" type="text/plain">
</script>
</div>
<!-- config file -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- Editor source file -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- Instance Editor-->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>
</html>
PS: There is no ueditor.all.js file in the downloaded source code version. You can download one yourself and go to the Internet, or you can directly download the PHP version, which is included. The final effect is as follows:
If your effect is delayed, there are several possibilities:
First: Open the F12 debugging tool and look at the prompts in the console. If it prompts that the file is missing, just find the corresponding file.
Second: The referenced css path is incorrect, resulting in no styles.
It can be seen here.
In the end, when there is no problem, it is basically ok, it can be directly applied to the H5 page, and a perfect rich text editor can be used. If you want to communicate more, you can add WeChat.
