前端富文本编辑器UEditor的使用（1）——下载、创建demo、ueditor.all.js文件找不到的解决方法

2022年6月22日 272次阅读 来源: Tansum

UEditor的使用可以查看：UEditor文档

1.下载

到官网下载UEditor编辑器：https://github.com/fex-team/ueditor

Step1：git clone 仓库
    https://github.com/fex-team/ueditor.git

Step2：安装依赖（如果没有安装 grunt , 请先在全局安装 grunt）
    npm install 

Step3：在终端执行 grunt default
    grunt default

2. 创建demo

官网的demo代码有点问题，它编辑器源码文件的路径写的是ueditor.all.js，然而下载的文件并没有这个文件，故对路径进行了修改，改为_examples文件夹下的editor_api.js。

_examples文件夹下的editor_api.js文件中的baseURL路径也要修改。

demo.html的内容：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>ueditor demo</title>
</head>
<body>
	<!-- 加载编辑器的容器 -->
	<script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
	<!-- 配置文件 -->
	<script type="text/javascript" src="ueditor.config.js"></script>
	<!-- 编辑器源码文件 -->
	<script type="text/javascript" src="_examples/editor_api.js"></script>
	<!-- 实例化编辑器 -->
	<script type="text/javascript">
	    var ue = UE.getEditor('container');
	</script>
</body>
</html>

 _examples/editor_api.js的修改

baseURL = './_src/';    //修改前是'../_src/'

 3.在浏览器打开demo.html

初次部署成功后，在浏览器能看到下面这样的编辑器。

《前端富文本编辑器UEditor的使用（1）——下载、创建demo、ueditor.all.js文件找不到的解决方法》

 

    原文作者：Tansum
    原文地址: https://blog.csdn.net/weixin_40161974/article/details/110918012
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞