初识百度前端编辑器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,即可看到以下效果。


    部署成功,功能非常强大。




版权声明:本文为hrbbec原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hrbbec/article/details/80838800