<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. Python3 引入模块的方法

    例子 import random 产生随机整数 import random secret = random.randint(0,10)

  2. vue-cli的webpack模版项目配置解析-build/dev-server.js

    我们在使用vue-cli搭建vuejs项目(Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目)的时候,会自动生成一系列文件,其中就包含webpack配置文件.我们现在来看下,这些配置到 ...

  3. 阿里巴巴Java开发手册评

    2016年底的时候阿里巴巴公开了其在内部使用的Java编程规范.随后进行了几次版本修订,目前的版本为v1.0.2版.下载地址可以在其官方社区-云栖社区https://yq.aliyun.com/art ...

  4. hive分区（partition）

    网上有篇关于hive的partition的使用讲解的比较好,转载了:一.背景1.在Hive Select查询中一般会扫描整个表内容,会消耗很多时间做没必要的工作.有时候只需要扫描表中关心的一部分数据, ...

  5. 关于Spring的69个面试题

    这篇文章总结了一些关于Spring框架的重要问题,这些问题都是你在面试或笔试过程中可能会被问到的.下次你再也不用担心你的面试了,Java Code Geeks这就帮你解答. 大多数你可能被问到的问题都 ...

  6. Oracle 数据库中在使用中文模糊查询时输入中文查询不到结果的解决方法

    添加环境变量 变量名:NLS_LANG 变量值:SIMPLIFIED CHINESE_CHINA.ZHS16GBK

  7. linux 3.10的kdump配置的小坑

    之前在2.6系列linux内核中,当发现某个模块不要在保留内核中加载的时候,可以通过blacklist参数将其在/etc/kdump.conf中屏蔽 blacklist <list of ker ...

  8. CSS深入理解学习笔记之vertical-align

    1.vertical-align基本认识 支持的属性值: ①线类:baseline(默认),top,middle,bottom ②文本类:text-top,text-bottom ③上标下标类:sub ...

  9. java1.8--OptionalInt,OptionalDouble,OptionalLong类

    OptionalInt,OptionalDouble,OptionalLong类的工作方式与Optional类十分类似,只不过他们是专门操作int,都变了,long类型的值而设计的.因此,他们分别定义 ...

  10. .NET 异步多线程，Thread，ThreadPool，Task，Parallel,异常处理，线程取消

    今天记录一下异步多线程的进阶历史,以及简单的使用方法 主要还是以Task,Parallel为主,毕竟用的比较多的现在就是这些了,再往前去的,除非是老项目,不然真的应该是挺少了,大概有个概念,就当了解一 ...