富文本编辑器实践

最新推荐文章于 2024-10-31 15:13:31 发布

原创最新推荐文章于 2024-10-31 15:13:31 发布 · 963 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#编辑器 #html

前端同时被 2 个专栏收录

52 篇文章

订阅专栏

HTML5

8 篇文章

订阅专栏

本文介绍如何使用UMEditor富文本编辑器进行快速开发，包括环境搭建、配置及使用方法，并提供实例代码。

1.选择

国产编辑器百度ueditor 和 kindeditor
国外编辑器 bootstrap-wysiwyg 和 simditor

百度ueditor功能丰富，文档易读，我们使用ueditor为例。

2.实践

ueditor分为两大类：UE和UM(UMeditor，简称UM，是 ueditor 的简版)
下载umeditor,解压后在文件夹中建立一个test.html文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>umesitor示例</title>
    <link rel="stylesheet" href="./themes/default/css/umeditor.css">
</head>

<body>
    <script src="./third-party/jquery.min.js"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="./umeditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="./umeditor.js"></script>
    <!-- 语言包文件 -->
    <script type="text/javascript" src="./lang/zh-cn/zh-cn.js"></script>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain" style="width:600px;height:200px;">
        这里写你的初始化内容
    </script>
    <!-- 实例化编辑器代码 -->
    <script type="text/javascript">
    $(function() {
        window.um = UM.getEditor('container', {
            /* 传入配置参数,可配参数列表看umeditor.config.js */
            //toolbar: ['undo redo | bold italic underline']  //配置的工具条,注释掉就可以使用默认的工具条
        });
    });
    </script>
</body>

</html>

获取编辑器的内容

/* 获取编辑器内容 */
var allHtml = um.getAllHtml();
var html = um.getContent();
var txt = um.getContentTxt();

参考资料：

https://github.com/fex-team/umeditor