node -- 使用UEditor富文本编辑器

最新推荐文章于 2025-03-15 10:09:59 发布

mnixu

最新推荐文章于 2025-03-15 10:09:59 发布

阅读量1.6w

点赞数 3

分类专栏： node.js node-js 文章标签：编辑器 node.js UEditor

本文链接：https://blog.youkuaiyun.com/a1104258464/article/details/52231737

版权

本文档详细介绍了如何在Node.js项目中集成并使用UEditor富文本编辑器，包括编辑器的下载、项目创建、后端配置、自动保存功能的启用与取消，以及解决图片过大超出编辑器的问题，旨在帮助开发者顺利完成微信素材编辑器的搭建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个微信素材编辑器的小项目，使用到了UEditor编辑器，使用中出现了许多问题。

1.介绍

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，

具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码...

2.下载

下载地址： http://ueditor.baidu.com/website/download.html#ueditor.

选择开发版，因为我们使用node ,所以随便下一个版本，这里下载1.4.3.3 jsp 版本

下载完成解压。

3.创建项目

使用express生成器生成一个项目,并安装好依赖模块

$express ue-test -ejs
$cd ue-test && npm install

把刚刚压缩好的文件重命名为ueditor 放入ue-test/pubilc 中

修改index.ejs页面:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="../ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="../ueditor/ueditor.all.min.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="../ueditor/lang/zh-cn/zh-cn.js"></script>
  </head>
  <body>
     <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
  </body>


<script type="text/javascript&

最低0.47元/天解锁文章