zoukankan      html  css  js  c++  java
  • 百度 迷你版 UMeditor富文本编辑器 使用方法

    第一步:下载编辑器
    
    到官网下载 umeditor 最新版源码版本,下载之后打开 _examples/index.html 就可以看到演示例子。[下载页面]
    第二步:部署编辑器到页面
    
        解压下载的包,放到你的项目中。
        在你的页面要插入编辑器的位置,插入代码:
    
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain" style="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
    
  • 相关阅读:
    C#数组的使用
    CLR设计类型之接口
    CLR类型设计之泛型(二)
    CLR类型设计之泛型(一)
    CLR类型设计之属性
    CLR类型设计之参数传递
    CLR类型设计之方法与构造器
    将博客搬至CSDN
    Unity_与android交互
    CSS3制作hover下划线动画
  • 原文地址:https://www.cnblogs.com/tmdsleep/p/4597685.html
Copyright © 2011-2022 走看看