富文本编辑器--使用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 ...
随机推荐
- oracle性能诊断sql
--1.阻塞及等待事件信息查询-- 查询所有会话的状态.等待类型及当前正在执行的SQL脚本select t.SID, t.SERIAL#, t.Status, t.Action, t.Event, t ...
- [论文理解] An Analysis of Scale Invariance in Object Detection – SNIP
An Analysis of Scale Invariance in Object Detection – SNIP 简介 小目标问题一直是目标检测领域一个比较难解决的问题,因为小目标提供的信息比较少 ...
- Winform使用ML.NET时无法加载 DLL“CpuMathNative”问题的解决方法
同样的代码运行在netcore下可以,运行在winform中就出现错误: 引发的异常:“System.DllNotFoundException”(位于 Microsoft.ML.Data.dll 中) ...
- 升级日志sdfsdfsdfsdfsdfdsf
升级日志sdfsdfsdfsdfsdfdsf 升级日志小书匠 版本号 新功能 修改
- 如何引用vue
Vue.js 安装 https://www.runoob.com/vue2/vue-install.html 1.独立版本 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 &l ...
- flutter json转字符串 字符串转json
一段json字符串 var jsonStr = '{\"errorCode\": \"0\", \"message\": \"成功 ...
- shell 部分语法
语法: variable_name=${variable_name:-xxxx} 如果variable 已经有值,则不被新值覆盖,否则将新值赋给variable split命令切割文件
- CMD(命令提示符)-------javac编译程序出现“”编码GBK的不可映射字符“”
问题描述:使用命令提示符(CMD)编译写好的java程序的时候出现“编码GBK的不可映射字符” 问题截图: 问题分析:看提示就知道是代码的注释出现问题,但注释格式完全正确,那么问题就只可能是注释编码出 ...
- 使用Navicat为Oracle新增用户
步骤请参考帖子https://www.cnblogs.com/franson-2016/p/5925593.html 需要注意的是新增用户时不能使用小写,否则不能登录,之前新增一个小写的用户名,授予c ...
- nginx创建www用户作用
linux创建www用户组和用户 wdcp中的nginx服务启动需要依赖www用户,因此若没有此用户就可能会启动失败.创建这个用户的方法: [root@bogon local]# id www [ro ...