百度 迷你版 UMeditor富文本编辑器 使用方法

第一步:下载编辑器



到官网下载 umeditor 最新版源码版本,下载之后打开 _examples/index.html 就可以看到演示例子。[下载页面]

第二步:部署编辑器到页面



    解压下载的包,放到你的项目中。

    在你的页面要插入编辑器的位置,插入代码:



<!-- 加载编辑器的容器 -->

<script id="container" name="content" type="text/plain" style="width:600px;height:200px;">

    这里写你的初始化内容

</script>



    在<head></head>标签最后,插入需要引用的文件和实例化编辑器的代码(注意修改引用文件的路径):



<!-- 样式文件 -->

<link rel="stylesheet" href="./umeditor/themes/default/css/umeditor.css">

<!-- 引用jquery -->

<script src="./umeditor/third-party/jquery.min.js"></script>

<!-- 配置文件 -->

<script type="text/javascript" src="./umeditor/umeditor.config.js"></script>

<!-- 编辑器源码文件 -->

<script type="text/javascript" src="./umeditor/umeditor.js"></script>

<!-- 语言包文件 -->

<script type="text/javascript" src="./umeditor/lang/zh-cn/zh-cn.js"></script>

<!-- 实例化编辑器代码 -->

<script type="text/javascript">

    $(function(){

        window.um = UM.getEditor('container', {

            /* 传入配置参数,可配参数列表看umeditor.config.js */

            toolbar: ['undo redo | bold italic underline']

        });

    });

</script>



    这时候你再浏览器打开你的页面,看到下面这样的编辑器,说明你已部署成功。 部署成功



第三步:获取和设置编辑器的内容



/* 获取编辑器内容 */

var html = um.getContent();

var txt = um.um.getContentTxt();



/* 设置编辑器内容 */

um.setContent('要设置的编辑器内容.');



相关链接



UMeditor官网: http://ueditor.baidu.com

 

你可能感兴趣的:(editor)