第一步：下载编辑器

到官网下载 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

百度 迷你版 UMeditor富文本编辑器 使用方法的更多相关文章

  1. 百度umeditor富文本编辑器插件扩展

    富文本编辑器在WEB开发中经常用到,个人比较喜欢用百度出的ueditor这款,ueditor这款本身支持插件扩展的,但是ueditor的mini版本 umeditor 就没有那么方便了,不过找了很多资 ...

  2. 使用百度UMeditor富文本编辑器，修改自定义图片上传，修改源码

    富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...

  3. JSP嵌入ueditor、umeditor富文本编辑器

    一.下载: 1.什么是富文本编辑器?就是: 或者是这个: 其中第一个功能比较详尽,其主要用来编写文章,名字叫做udeitor. 第二个就相对精简,是第一个的MINI版,其主要用来编辑即时聊天或者发帖, ...

  4. 使用UMeditor富文本编辑器上传图片

    注:本文系作者原创,但可随意转载. 最近写自己的网站玩儿,写到博客的部分,打算使用UMeditor,因为之前也用过(但是好像没实现图片上传的功能),感觉用起来还比较简单. 不过还是折腾了一下午...遇 ...

  5. PHP接入umeditor(百度富文本编辑器)

    2015年6月28日 23:08:49 星期日 效果: 开搞;) 首先: 百度官网上下载 umeditor 简版的富文本编辑器(这里) 然后: 解压放到自己的项目中, 配置服务器, 保证能在浏览器端加 ...

  6. PHP如何搭建百度Ueditor富文本编辑器

    本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下 ...

  7. django之百度Ueditor富文本编辑器后台集成

    Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...

  8. WPF开发时光之痕日记本（一）——富文本编辑器

    本篇给大家推荐一个 WPF 版的富文本编辑器,SmithHtmlEditor,具体网址大家可以找一找,我在这个编辑器的基础上修改了界面,增加了一些功能,模仿了kindeditor 的界面,鉴于自己现在 ...

  9. Java-Swing中使用Web富文本编辑器

    资料下载 (截取出了邮件发送的功能.) 2018/11/10 因为要 win7 电脑 IE 8 的原因,使用了 jxBrower 拓展,更容易使用,参考链接(推荐) 问题介绍 window客户端软件的 ...

随机推荐

  1. iOS 播放声音文件

    播放声音可以通过3中方式来完成. 1.AVAudioPlayer 使用简单方便,但只能播放本地音频,不支持流媒体播放. //初始化文件地址 NSBundle *bundle = [NSBundle m ...

  2. 推荐一个代码生成工具：freemarker

    freemarker:http://freemarker.org/ 还有velocity:http://velocity.apache.org/

  3. fw:学好Python必读的几篇文章

    学好Python必读的几篇文章 from:http://blog.csdn.net/hzxhan/article/details/8555602 分类: python2013-01-30 11:52  ...

  4. python-appium手机自动化测试（仅需安装包）前期准备（pydev-eclipse编辑器）

    1.jdk安装与环境变量配置教程http://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html 我本机安装的是1.6.043 2.sdk下 ...

  5. 查看mysql 的物理存储路径

    mysql> show global variables like "%datadir%";

  6. flex安装时停在计算时间界面的解决办法

    现象:安装FLEX BUILDER4.6时停在计算时间界面,过了一会后弹出安装失败的对话框. 环境:WIN7 解决: 1.下载AdobeCreativeCloudCleanerTool, 地址:htt ...

  7. 用命令实现Win7远程桌面关机和重启

    关机 shutdown -s -t 0 重启 shutdown -r -t 0 打开运行框(Win+R键),输入上述命令即可,后面的数字表示关机/重启延迟的时间 at 12:00 shutdown - ...

  8. hdu 3336【Count the string】(KMP)

    一道字符串匹配的题目,仅仅借此题练习一下KMP 因为这道题目就是要求用从头开始的n个字符串去匹配原来的字符串,很明显与KMP中求next的过程很相似,所以只要把能够从头开始匹配一定个数的字符串的个数加 ...

  9. Android控件大全(一)——DialogFragment创建对话框

    DialogFragment在android 3.0时被引入.是一种特殊的Fragment,用于在Activity的内容之上展示一个模态的对话框.典型的用于:展示警告框,输入框,确认框等等. 在Dia ...

  10. [drp 6]接口和抽象类的区别，及其应用场景

    导读:在很多时候,接口和抽象类可以替换.发现这个问题,还是之前学习设计模式的时候,看到那个UML图发现的.那么,究竟在什么时候使用接口,什么时候使用抽象类呢?现在结合这个项目,做一个总结. 一.接口 ...