初识百度前端编辑器UEditor

最新推荐文章于 2025-07-10 12:48:34 发布

原创最新推荐文章于 2025-07-10 12:48:34 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端富文本编辑器

电子病历专栏收录该内容

5 篇文章

订阅专栏

介绍了专业医养综合系统中B/S结构电子病历的开发需求，并重点介绍了百度UEditor作为富文本编辑器的特点及部署过程。

专业医养综合系统的开发框架已经基本构建完成，采用了B/S模式，以适应未来分布式和云平台应用。

对于医院信息系统来说，电子病历是关键的功能模块之一，而B/S结构的电子病历并不常见，因此为了配合开发框架的使用，必须自主研发一款B/S结构的电子病历，而对于电子病历来说，前端的富文本编辑器尤其重要。

随着网络技术的不断发展，B/S结构软件越来越普遍，对前端编辑器的要求与日俱增，因此涌现出了大量的前端编辑器，如UEditor、bootstrap-wysiwyg、query notebook、YUI3、WebEditor等等，每款编辑器各有特点，这里不一一详述了，重点介绍一下百度的UEditor。

UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

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

部署也很简单，将下载包解压后，在解压目录中创建一个html文件，如: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="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>
</html>

在浏览器中打开demo.html，即可看到以下效果。