How to Configure and Use UEditor
UEditorrich text editorUEditor configurationUEditor tutorialueditor.config.js
Published·Modified·
UEditor is an excellent rich text editor that is feature-rich, lightweight, and highly customizable. Previously, I used CKEditor, but after trying UEditor, I found its configuration to be very simple. Here is a share of the process.
- First, download the latest UEditor package from the official website and extract it. You will see the contents as shown in the image below:
- Create a new HTML page and load the following three JavaScript files in the head section:
<!-- Import configuration file -->
<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<!-- UEditor core file -->
<script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
<!-- Import language pack file -->
<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
- Initialize the editor at the bottom of the body:
<script type="text/javascript">
UE.getEditor('editor'); // Initialize the editor
</script>
- Use a textarea tag to create the editor. Since the instance name in step 3 is 'editor', the id of the textarea tag must also be 'editor', otherwise it cannot be called.
<!-- ID must match the editor instance name, which is 'editor' -->
<textarea id='editor' name='editor'></textarea>
- After completing the above steps, a complete UEditor editor will be displayed on the frontend. The code below is for reference. For more content, please check the index.html file inside the compressed package.
<html>
<head>
<title>UEditor Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!-- Import configuration file -->
<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<!-- UEditor core file -->
<script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
<!-- Import language pack file -->
<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<!-- ID must match the editor instance name, which is 'editor' -->
<textarea id='editor'></textarea>
<script type="text/javascript">
UE.getEditor('editor'); // Initialize the editor
</script>
</body>
</html>
- Editor settings can be modified by editing the ueditor.config.js file, which contains detailed instructions. Simply uncomment and modify the values as needed, or keep the defaults.
