wangeditor Demo

时间：2022-11-03 23:51:52
<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>

wangeditor Demo

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）——扩展一个&OpenCurlyDoubleQuote;缩进”功能 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&period;net core 通过ajax上传图片及wangEditor图片上传

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

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

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

随机推荐

  1. Java 动态代理机制详解

    在学习Spring的时候,我们知道Spring主要有两大思想,一个是IoC,另一个就是AOP,对于IoC,依赖注入就不用多说了,而对于Spring的核心AOP来说,我们不但要知道怎么通过AOP来满足的 ...

  2. 理解Javascript的异步等待

    目前async / await特性并没有被添加到ES2016标准中,但不代表这些特性将来不会被加入到Javascript中.在我写这篇文章时,它已经到达第三版草案,并且正迅速的发展中.这些特性已经被I ...

  3. 实现Linux下的ls -l命令

    基本实现了Linux下的ls -l命令,对于不同的文件显示不同的颜色和显示符号链接暂时没有实现: /************************************************** ...

  4. 与后台进行连接，mysql模块 第六篇

    var mysql = require("mysql"); var client = function(sql, callback) { var db = mysql.create ...

  5. 201521123069 《Java程序设计》 第2周学习总结

    1. 本章学习总结 (1)String类.StringBuilder类(频繁进行字符串的修改应选用StringBuilder,不会生成大量的字符串对象).Math类的用法.字符串池的概念 (2)Sca ...

  6. Java I&sol;O---IO流的规律小结

    IO流的规律总结:解决的问题,就是开发中具体要使用哪个流对象的问题. 1,明确数据源,数据汇(数据目的) 其实就是在明确要使用的IO体系:字节流 InputStream & OutputStr ...

  7. 最受欢迎的前端框架 —— Bootstrap学习

    Bootstrap是Twitter的Mark Otto和Jacob Thornton开发的,是目前最受欢迎的前端框架,它简单灵活,使得Web前端开发更加快捷方便. 首先,要基本掌握Bootstrap框 ...

  8. 利用jquery判断点是否在椭圆内

    源码例子下载 : <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&quot ...

  9. 一张表搞清楚 php 的 is&lowbar;null、empty、isset的区别

    isset 判断变量是否已存在 empty 判断变量是否为空或为0 is_null 判断变量是否为NULL 变量 empty is_null isset $a=”” true false true $ ...

  10. pip 常用命令

    列出已安装包 pip freeze or pip list 安装包 在线安装包 pip install <package name> 或 pip install -r requiremen ...

相关文章