**在页面加入 wangEditor**
在该页面的基础上,引用wangEitor的css、js,添加textarea,生成编辑器。 不明白的同学,可参见【开始使用】一节。之后该页面的代码如下:
```html
<!--引入wangEditor.css-->
<link rel="stylesheet" type="text/css" href="css/wangEditor-1.3.10.css">
……省略其他内容……
<div id="uploadContainer">
<input type="button" value="选择文件" id="btnBrowse"/>
<input type="button" value="上传文件" id="btnUpload">
<ul id="fileList"></ul>
</div>
<textarea id='textarea1' style='height:300px; width:100%;'></textarea>
……省略其他内容……
<!--引入jquery、wangEditor.js、plupload.js-->
<script type="text/javascript" src='js/jquery-1.10.2.min.js'></script>
<script type="text/javascript" src='js/wangEditor-1.3.10.min.js'></script>
<script type="text/javascript" src="plupload/plupload.full.min.js"></script>
<script type="text/javascript">
$(function(){
//获取dom节点
var $uploadContainer = $('#uploadContainer'),
$fileList = $('#fileList'),
$btnUpload = $('#btnUpload');
var editor = $('#textarea1').wangEditor();
……plupload配置的内容……
});
</script>
```
截止到此,plupload和wangEditor的功能都是相互独立的,两者没有任何关系。
此时,你点击“图片”菜单,肯定得不到你想要的结果。 接下来,我们将把两者结合起来。
- 关于wangEditor
- 基本应用
- 开始使用
- 下载wangEditor
- 创建页面
- 生成编辑器
- 与font-awesome的冲突
- 设置高度
- 设置绝对高度
- 默认高度和最大高度
- 初始化内容
- html方式
- javascript方式
- 获取内容
- 追加内容
- 基本配置
- 自定义配置菜单
- 配置onchange监听事件
- 自定义配置表情图标
- 简单表情
- 多组表情
- 配置代码高亮
- 下载highlight
- 使用highlight
- 与wangEditor集成
- 不过滤javascript代码
- 图片上传
- 非跨域
- 使用plupload做一个上传图片的页面
- 在页面加入wangEditor
- 将两者结合
- 后台代码示例
- C#
- java
- php
- nodejs
- 征集
- 跨域
- 下载 wangEditor_uploadImg_assist.html
- 编写后台代码
- 配置url地址
- 后台代码示例
- C#
- java
- python
- nodejs
- 征集
- 粘贴截图
- 其他
- 多语言支持
- 默认中文
- 使用英文
- 使用其他语言
- 单页多个编辑器
- 使用requirejs
- 使用seajs
- 增加 placeholder 功能
- 定制开发