富文本编辑器--使用textarea即时更新文本域同步编辑器内容
使用 textarea
wangEditor 从v3版本开始不支持 textarea ,但是可以通过onchange来实现 textarea 中提交富文本内容。
<div id="div1">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<textarea id="text1" style="width:100%; height:200px;"></textarea>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="../wangEditor.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
var $text1 = $('#text1')
editor.customConfig.onchange = function (html) {
// 监控变化,同步更新到 textarea
$text1.val(html)
}
editor.create()
// 初始化 textarea 的值
$text1.val(editor.txt.html())
</script>
富文本编辑器--使用textarea即时更新文本域同步编辑器内容的更多相关文章
- 使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应)
一.使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题. HTML5中添加了一个新属性contenteditable,该属性可以让input,tex ...
- html5 表单 填表 select 下拉 textarea多行文本 output Js计算结果
<select> 下拉 <select>下有很多属性 name 其实有name就有value了,因为button提交的都是? name=value的格式, ...
- textarea高度随文本内容变化,且不出现滚动条
通常文本域的写法如下 <textarea type="text" class="form-control pull-left" id="desc ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:文本框(Textarea)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- js/jquery获取文本框的值与改变文本框的值
我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...
- 最好的文本框样式 最漂亮的文本框样式 textbox css样式
输入框景背景透明: <input style="background:transparent;border:1px solid #ffffff"> 鼠标划过输入框,输入 ...
- GUI编程笔记(java)07:GUI把文本框的值移到文本域案例
1.首先我们了解一下我们的需求,如下: 输入“风清扬”,点击“数据转移”,这样的文本会出现到下面的文本域中,这就是我们的需求. 2.代码如下: package cn.itcast_05; import ...
- HTML中让表单input等文本框为只读不可编辑但可以获取value值的方法;让文本域前面的内容显示在左上角,居中
HTML中让表单input等文本框为只读不可编辑的方法 有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使input text的内容,中国两个字不可以修改 有时候,我们希望 ...
- [Xcode 实际操作]九、实用进阶-(14)使用富文本CoreText框架创建丰富多彩的文本
目录:[Swift]Xcode实际操作 本文将演示如何使用富文本CoreText框架创建丰富多彩的文本图形. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] imp ...
随机推荐
- AndroidManifest.xml中的<uses-feature>以及和<uses-permission>之间的联系
概述:<uses-feature>用来声明应用中需要用的硬件和软件的功能. 硬件特性:表明您的应用需要用的硬件功能. 功能类型 特征描述 描述 音频 android.hardware.au ...
- webpack对vue单文件组件的解析
vue2.0 Step0: 首先vuelLoaderPlugin会在webpack初始化的时候 注入pitcher这个rule,然后将rules进行排序, [pitcher,...clonedRule ...
- 阶段3 3.SpringMVC·_04.SpringMVC返回值类型及响应数据类型_8 响应json数据之响应json格式数据
springMvc的框架已经帮我们做好了.发过来的数据转换为javaBean对象 发过来的键值的形式,如果属性和javaBean对应的话,可以直接封装到对象中. key做额外的转换的时候,需要另外的j ...
- flannel下k8s pod及容器无法跨主机互通问题
参照文档 https://blog.csdn.net/a610786189/article/details/80340556 https://blog.csdn.net/weixin_43092 ...
- spark基础概念(一):幂等性。
1) 出处:幂等性源自数学概念,表示f(x) = f(f(x)); 含义:多次执行一个函数得到的值和执行一次得到的值相同. 如:f(x) = pow(x, 1); f(x) = abs(x); 2) ...
- 备份和恢复IMail数据/IMail的服务端口
1.备份和恢复IMail数据 首先你需要备份它的系统文件.方法是将“\imail”整个目录树复制下来. 其次还需要备份它的注册表.可选“localhost→General→Backup”来复制:或打开 ...
- OpenCV阈值化处理
图像的阈值化就是利用图像像素点分布规律,设定阈值进行像素点分割,进而得到图像的二值图像.图像阈值化操作有多种方法,常用方法有经典的OTSU.固定阈值.自适应阈值.双阈值及半阈值化操作.这里对各种阈值化 ...
- JS-T
取整函数ceil:向上取整floor:向下取整round:四舍五入 js获取当前页面信息this.location.href JS打印对象 var data = JSON.stringify(res. ...
- OpenStack组件——Keystone身份认证
1.keystone介绍 keystone 是OpenStack的组件之一,用于为OpenStack家族中的其它组件成员提供统一的认证服务,包括身份验证.令牌的发放和校验.服务列表.用户权限的定义等等 ...
- 【C/C++】assert()函数用法总结
assert()函数用法总结 assert宏的原型定义在<assert.h>中,其作用是如果它的条件返回错误,则终止程序执行,原型定义: #include <assert.h> ...