wangeditor Demo
<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的更多相关文章
- 轻量级web富文本框——wangEditor使用手册(4)——配置下拉菜单 demo
最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...
- 轻量级web富文本框——wangEditor使用手册(3)——如何自定义配置菜单 demo
最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...
- 轻量级web富文本框——wangEditor使用手册(2)——扩展一个“缩进”功能 demo
最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...
- 轻量级web富文本框——wangEditor使用手册(1)——基本应用 demo
最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...
- 轻量级富文本编辑器wangEditor源码结构介绍
1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.c ...
- 【前端】wangEditor(富文本编辑器) 简易使用示例
转载请说明作者或者注明出处,谢谢 说到前端常用的编辑器,自然也少不了富文本编辑器(RichText Editor) 笔者在此之前也看了一些相关的在线编辑器,其中包括了当百度搜索“富文本编辑器”字样时出 ...
- 是时候选择一款富文本编辑器了(wangEditor)
需要一款富文本编辑器,当然不能自己造轮子.本来想使用cnblog也在用的TinyMCE,名气大,功能全.但是发现TinyMCE从4.0开始,不再支持直接下载.所以还是决定选用wangEditor.遗憾 ...
- asp.net core 通过ajax上传图片及wangEditor图片上传
asp.net core 通过ajax上传图片 .net core前端代码,因为是通过ajax调用,首先要保证ajax能调用后台代码,具体参见上一篇.net core 使用ajax调用后台代码. 前端 ...
- 轻量级web富文本框——wangEditor使用手册(6)——配置“上传图片”功能
最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...
随机推荐
- JavaSE笔记-泛型
定义带泛型的类 public class Cat<T> { //可以用T定义实例变量 private T name; //可以用T定义形参 //构造器没有<> public C ...
- 数据结构与算法(c++)——反转链表
算法概述:要求实现将一条单向链表反转并考虑时间复杂度. 算法分析: 数组法(略): 将列表元素逐个保存进数组,之后再逆向重建列表 点评:实现逻辑最简单,需要额外的内存开销. 移动指针: 通过三个指针逐 ...
- eclipse F3可以查询某个方法的具体定义
eclipse F3可以查询某个方法的具体定义
- 《HelloGitHub》第 22 期
公告 年前最后一期,下次就是年后了,老时间 每月的 28 号,年后见- <HelloGitHub>第 22 期 兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 G ...
- 【WebApi系列】详解WebApi如何传递参数
WebApi系列文章 [01]浅谈HTTP在WebApi开发中的运用 [02]聊聊WebApi体系结构 [03]详解WebApi参数的传递 [04]详解WebApi测试和PostMan [05]浅谈W ...
- Linux指令--cat,tac
原文出处:http://www.cnblogs.com/peida/archive/2012/10/30/2746968.html cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内 ...
- 关键字final整理
关键字final整理 由于语境(应用环境)不同,final 关键字的含义可能会稍微产生一些差异.但它最一般的意思就是声明"这个东西不能改变".之所以要禁止改变,可能是考虑到两方面的 ...
- 浅谈Java Virtual Machine
Java Virtual Machine 就是指Java虚拟器,以下简称VM.关于VM的概念,最早出自CPU模拟器,众所周知的PC上的游戏机模拟器采用的便是和Java VM类似的技术.ja ...
- JMeter之断言 - 响应文本
1. 响应数据: 2. 添加响应断言: 3.设置响应断言,本例中 设置 响应文本 中 包括 success 字符串的 为真,即通过. 4.如果设置 响应文本 中 包括 error 字符串的 为真, ...
- query返回值
总结:PDO::query($sql)返回值是一个对象,其中包括了你输入的sql语句 而fetch()方法执行成功则返回包含一条记录的数组,失败返回false. $rs = $pdo -> ...