<html>

<head>

    <!--在这里字符集的设定很重要，如果设定不当将会出现乱码-->

    <meta charset="UTF-8">

    <title>wangEditor demo</title>

</head>

<body>

<!--wangEditor是一款基于jquery框架开发的插件-->

<script src="http://cdn.bootcss.com/wangeditor/2.1.20/js/lib/jquery-2.2.1.js"></script>

<!--编辑器位置-->

<div style="max-width:700px;margin:50px">

    <div id="txtdiv" style="border:1px solid gray;min-height:240px">

    </div>

</div>

<!--效果展示框-->

<div id="show_box" style="border: 1px solid gray;margin-left:50px"></div>

<!--脚本控制-->

<script>

    $(function(){

        //初始化编辑器

        editor = new wangEditor("txtdiv");

        editor.create();

        //内容修改事件，此处做的是实时展示实际效果

        editor.onchange = function(){

            //获取editor的html值

            var html = editor.$txt.html();

            $("#show_box").html(html)

        }

    })

</script>

<!--按照官网上的说明，js和css的这两个引用应该放在body的末尾-->

<script src="http://cdn.bootcss.com/wangeditor/2.1.20/js/wangEditor.js"></script>

<link href="http://cdn.bootcss.com/wangeditor/2.1.20/css/wangEditor.css" rel="stylesheet">

</body>

</html>

　　

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="UTF-8">

</head>

<body>

<!-- body container -->

<div class="container">

        <div style="max-width:1100px;">

            <!--demo-->

            <div style="text-align:left;">

                <div id="divDemo"><p>欢迎使用<b>wangEditor 富文本编辑器</b>，请输入内容...</p></div>

            </div><!--demo end-->

        </div>

</div><!-- body container end -->

<script type="text/javascript" src='http://www.wangeditor.com/js/jquery-1.10.2.min.js'></script>

<script type="text/javascript" src='http://www.wangeditor.com/bootstrap-3.3.0/js/bootstrap.min.js'></script>

<script type="text/javascript" src='http://unpkg.com/wangeditor/release/wangEditor.min.js'></script>

<script type="text/javascript" src='http://www.wangeditor.com/index.js'></script>

</body>

</html>

http://www.wangeditor.com/

wangeditor Demo的更多相关文章

  1. 轻量级web富文本框——wangEditor使用手册（4）——配置下拉菜单 demo

    最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...

  2. 轻量级web富文本框——wangEditor使用手册（3）——如何自定义配置菜单 demo

    最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...

  3. 轻量级web富文本框——wangEditor使用手册（2）——扩展一个“缩进”功能 demo

    最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...

  4. 轻量级web富文本框——wangEditor使用手册（1）——基本应用 demo

    最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...

  5. 轻量级富文本编辑器wangEditor源码结构介绍

    1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.c ...

  6. 【前端】wangEditor（富文本编辑器） 简易使用示例

    转载请说明作者或者注明出处,谢谢 说到前端常用的编辑器,自然也少不了富文本编辑器(RichText Editor) 笔者在此之前也看了一些相关的在线编辑器,其中包括了当百度搜索“富文本编辑器”字样时出 ...

  7. 是时候选择一款富文本编辑器了（wangEditor）

    需要一款富文本编辑器,当然不能自己造轮子.本来想使用cnblog也在用的TinyMCE,名气大,功能全.但是发现TinyMCE从4.0开始,不再支持直接下载.所以还是决定选用wangEditor.遗憾 ...

  8. asp.net core 通过ajax上传图片及wangEditor图片上传

    asp.net core 通过ajax上传图片 .net core前端代码,因为是通过ajax调用,首先要保证ajax能调用后台代码,具体参见上一篇.net core 使用ajax调用后台代码. 前端 ...

  9. 轻量级web富文本框——wangEditor使用手册（6）——配置“上传图片”功能

    最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...

随机推荐

  1. Oracle：控制语句 IF..ELSIF语句、CASE语句、FOR循环语句

    --多重if语句(注意点:BEGIN END ,IF 条件 THEN,ELSIF 条件 THEN,ELSE... END IF)BEGIN IF FALSE THEN DBMS_OUTPUT.put_ ...

  2. 简单易用的IT运维服务器管理程序

    程序修改历史: 2012.02.04 v1.0 leopku 2012.02.09 v1.1 oldboy(老男孩) QQ:31333741 MAIL:oldboy521@gmail.com 本软件由 ...

  3. Dreamweaver cs6中文版完整安装步骤：

    Dreamweaver cs6中文版完整安装步骤: http://www.cr173.com/soft/72633.html 1.首先我们需要下载Dreamweaver cs6官方中文原版安装程序,下 ...

  4. Java数据持久层框架 MyBatis之API学习九（SQL语句构建器详解）

    对于MyBatis的学习而言,最好去MyBatis的官方文档:http://www.mybatis.org/mybatis-3/zh/index.html 对于语言的学习而言,马上上手去编程,多多练习 ...

  5. 安卓开发-intent在Activity之间数据传递

    安卓开发-intent在Activity之间数据传递 [TOC] intent实现普通跳转 使用intent的setclass方法,示例(由此界面跳转到NewActivity界面) //使用setOn ...

  6. python_如何统计序列中元素

    问题1: 随机数列[12,5,8,7,8,9,4,8,5,...] 中出现次数最高的3个元素,他们出现的次数 问题2: 对某英文文章的单词,进行词频统计,找出出现次数最搞得10个单词,他们出现的次数是 ...

  7. 无废话XML--XML细节

    今天开始研究xml,其实在实际的开发中,我们参与到真正的XML开发并不是很多,最多写一个配置,但是我还是觉得很有必要把XML的知识整理一遍.作为基本的2种的数据交互载体(还有一个是json),基本的X ...

  8. 通过脚本生成poco实体

    今天在做开发时,需要把表映射成实体,又没有EF这种工具,就从网上下了一个工具,但使用时觉得太重了,所以就自己写了一个,基于mysql的. 功能:输入表名,得到这个表的poco实体 SELECT COL ...

  9. libev-4.20编译安装及简单使用

    1.源码下载地址: http://www.csdn.net/tag/libev/download 2.库的编译与安装 解压文件,进入文件目录 编译的时候需要首先切换为管理员(root)账户,然后执行以 ...

  10. SQL Server ——动态SQL

    EXECUTE 执行 Transact-SQL 批中的命令字符串.字符串或执行下列模块之一:系统存储过程.用户定义存储过程.标量值用户定义函数或扩展存储过程.SQL Server 2005 扩展了 E ...