<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. 数据库复习总结（20）-存储过程以及.net调用存储过程

    一.存储过程(注意区分将一段select语句进行封装叫做视图)(1)将一段t-sql脚本进行封装,以完成一个逻辑操作(2)创建存储过程:            create proc 名称      ...

  2. 【开发技术】 使用JSP开发WEB应用系统-------笔记

    1.主机IP地址是:localhost     or    127.0.0.1    or     实际的IP地址 2.Tomcat 服务器是一个免费的开放源代码的Web 应用服务器 3.WebRoo ...

  3. angular 4 http 之web api 服务

    Angular Http是获取和保存数据的.主要是为了取到我json文件里的数据. 直接上代码吧: 1.  先介绍Promise模式的:(直接代码) heroes.json: 1 2 3 4 5 6 ...

  4. myeclipse 10怎么安装与激活

    http://jingyan.baidu.com/article/5553fa82eae0ce65a2393406.html

  5. 闲聊cassandra

    原创,转载请注明出处 今天聊聊cassandra,里面用了不少分布式系统设计的经典算法比如consistent hashing, bloom filter, merkle tree, sstable, ...

  6. C#总结（四）调用C++动态库

    由于公司很多底层的SDK,都是C++开发,上层的应用软件却是C# Winform程序.在实际工作的过程中,就经常碰到了C# 程序调用C++ 动态库的问题.最近一直在和C++ 打交道,C# 怎么调用C+ ...

  7. fhs文件系统层级结构

    文件系统:操作系统用于明确存储设备或分区上的文件的方法和数据结构:层次化管理文件的结构就是文件系统: linux层次化文件结构,倒树状结构文件结构        FHS  filesystem hie ...

  8. ROM、SDRAM、RAM、DRAM、SRAM、FLASH区别

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  9. 可等待计时器添加APC测试

    可等待计时器和用户计时器的最大区别在于用户计时器需要在应用程序中使用大量的用户界面基础设施,从而消耗更多的资源.此外,可等待计时器是内核对象,这意味着他们不仅可以在多个线程间共享,而且具备安全性. 用 ...

  10. 转-WebService到底是什么？

    原文链接:WebService到底是什么? 一.序言 大家或多或少都听过WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多 ...