如何制作富文本框

第一看到导师使用div+textarea实现富文本框的时候,有下面两个疑问:

1.为什么不能直接使用textarea?

自己试了一下,发现textarea会将html标签看做字符串,就算是用append()和html()也不可以。这样就没办法通过span等html标签给文本内容附上样式。

2.那直接用div呢?

一个最重要的问题,div不可编辑。哈,当然可以通过设置 contenteditable=“true”;来解决。可是,你会发现一个问题。因为我做的富文本框要跟后台数据

进行校验,正确和错误都要设置不同的颜色。所以需要引入valuechange()方法。但是每次调用valuechange()方法就会发现光标怎么跑到文本前面去了。伙

伴们想要在div+contenteditable=“true”;动态加载图片的时候也会遇到这个问题。

可以把光标设置在文本最末端?

当然可以。使用range对象可以让光标一直处在最末端(el是div对象)

var el=$(‘#text‘)[0];//如何把jquery对象转为domvar range = document.createRange();range.selectNodeContents(el);range.collapse(false);var sel = window.getSelection();sel.removeAllRanges();sel.addRange(range);

But!如果想记录上一次光标插入的位置!看了很多大牛的博客,input等可输入文本都可以成功设置光标在指定位置。然而,div就是不!行!!!但是,我就是有一种执念,觉得没有解决不了的问题,只有不过硬的技术!下面是不是应该接着写解决办法了。loading。。。各位大牛有想到解决办法,求评论
时间: 2024-10-17 09:38:36

如何制作富文本框的相关文章

selenium处理富文本框,日历控件等 调用JS修改value值

http://blog.csdn.net/fudax/article/details/8089404 document.getElementById("js_domestic_fromdate").value = "2014-10-10" selenium处理富文本框,日历控件等 调用JS修改value值,布布扣,bubuko.com

[布局]记录部件字段富文本框如何设置统一高度

在使用快速开发平台构建业务功能中,往往都会用到记录部件,如何布局各个字段位置使用户一目了然,往往就是我们头大的问题.在一个固定大小的窗体下,各个字段的样式都是系统自动默认的,如下图: 此种布局方式真是惨不忍睹,那么如何布局多个富文本字段的位置才能使界面简单明了呢?今天为大家带来记录部件中富文本框(数据表中字段编辑类型word)的布局方法:首先在 空白区域鼠标右键唤出菜单[定制版面],单击进入[记录部件布局定制]模式: 选中富文本字段,鼠标右键点击[创建群组]: 群组创建完成,在顶部空白区域右键唤

kindeditor富文本框,上传文件后,显示文件名称

kindeditor作为一个应用广泛富文本框,我们经常会利用到它,然而在使用的过程中,发现有的地方使用起来很不方便,例如本文要说的,用户上传文件之后,默认只有文件URL,没有文件说明,如图: 点击确定之后,内容中显示的只是一串很长的地址,这并不是我们想要的. 更多的时候,我们只是希望它这里能默认显示文件名称,只有在文件说明里,填写了文件名称,在内容里面才会以名称的形式呈现.这个时候,我们就要给它做个小手术,来完善它,下面贴出代码: 1.修改asp.net/upload_json.ashx文件,大

轻量级web富文本框——wangEditor使用手册(2)——扩展一个“缩进”功能

1. 引言 上一节<轻量级web富文本框——wangEditor使用手册(1)——基本应用>中我们讲解了如何应用wangEditor创建最基本的富文本编辑器,本节继续讲如何扩展一个简单的按钮.本节是继续上一节的内容来的,所使用的代码也是接着上一节的来的,错过的朋友请先看上一节,再看本节. 下载地址:https://github.com/wangfupeng1988/wangEditor demo演示:http://www.cnblogs.com/wangfupeng1988/p/4185508

基于bootstrap的富文本框——wangEditor【欢迎加入开发】

先来一张效果图: 01. 引言 老早就开始研究富文本框的东西,在写完<深入理解javascript原型与闭包>之后,就想着要去做一个富文本框的插件的例子. 现在网络上开源的富文本框插件非常多,一搜索一大堆,但是基于bootstrap的还不多,现在只有一个“bootstrap-wysiwyg”,老外写的,没有一个汉字,大家可以fork一下源码看看,写的非常简洁,压缩之后不到10KB,非常厉害!我也还没来得及研究,一定要看一下. 02. wangEditor 老外的东西,满地英文,给程序猿用着还可

轻量级web富文本框——wangEditor使用手册(4)——配置下拉菜单

1. 引言 上一节(第三节)<轻量级web富文本框——wangEditor使用手册(3)——如何自定义配置菜单>描述了如何自定义配置一个新加入的菜单.在第二节中我们演示了如何添加一个简单的菜单,这一节我们要加入一个稍微复杂一点的菜单——下拉菜单类型——增加一个“设置标题”下拉按钮 下载地址:https://github.com/wangfupeng1988/wangEditor demo演示:http://www.cnblogs.com/wangfupeng1988/p/4185508.htm

轻量级web富文本框——wangEditor使用手册(1)——基本应用

1. 介绍&下载 wangEditor是用javascript编写的轻量级web富文本编辑器,依赖于jQuery和fontAwesome字体库,支持所有浏览器.使用wangEditor可以轻松创建web富文本框,并可以自定义扩展菜单功能.wangEditor所有源码都已经在github上开源下载. 下载地址:https://github.com/wangfupeng1988/wangEditor 交流QQ群:164999061 2. 生成富文本框 2.1 下载 从https://github.c

基于bootstrap的富文本框——wangEditor【欢迎增加开发】

先来一张效果图: 01. 引言 老早就開始研究富文本框的东西,在写完<深入理解javascript原型与闭包>之后,就想着要去做一个富文本框的插件的样例. 如今网络上开源的富文本框插件许多,一搜索一大堆,可是基于bootstrap的还不多.如今仅仅有一个"bootstrap-wysiwyg".老外写的,没有一个汉字.大家能够fork一下源代码看看,写的很简洁.压缩之后不到10KB.很厉害!我也还没来得及研究,一定要看一下. 02. wangEditor 老外的东西,满地英文

轻量级web富文本框——wangEditor使用手册(3)——如何自定义配置菜单

1. 引言 上一节<轻量级web富文本框——wangEditor使用手册(2)——扩展一个“缩进”功能>最后提到,新建的菜单不能只是默认放在菜单的后面,应该可以自定义的放在当前菜单栏中的任何位置.这一节就讲述wangEditor目前支持的几种自定义配置菜单的使用. 下载地址:https://github.com/wangfupeng1988/wangEditor demo演示:http://www.cnblogs.com/wangfupeng1988/p/4185508.html 交流QQ群: