你要的是所见即所得HTML编辑器,简单来说需要几个基本步骤:
http://blog.sina.com.cn/s/blog_4cd978f90100ce4h.html
1,需要一个可以编辑同时又可显效果的编辑框。textarea不行,它只能用来输入纯文本,不能显示颜色、斜体之类的文字样式,就像记事本。
你可以使用iframe来实现,修改iframe的designMode属性使其可以被编辑。
<iframe id="myEditer" width="100%" height="150px"></iframe>
<script>myEditer.document.designMode = \'on\';</script>
这样你就可以在这个iframe区域里写字了。
2,选中要添加样式的文字。通常我们用WORD编辑一段文字的样式时,一般是先打字,再编辑样式。所以你需要一个选中要处理文本的方法。JS的 selection.createRange()可以选中文本,返回一个对象,你可以通过访问该对象的text属性得到被选中的文本。
<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" onclick="Bold()">
<script>
myEditer.document.designMode = \'on\';
function Bold(){
var sel = myEditer.document.selection.createRange();
alert(sel.text);
}
</script>
3,改变被选中文本的样式。selection.createRange()选中文本,返回一个对象,该对象有一个方法execCommand(),可以用来改变被选中文本的样式。
<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" onclick="Bold()">
<script>
myEditer.document.designMode = \'on\';
function Bold(){
var sel = myEditer.document.selection.createRange();
//alert(sel.text);
sel.execCommand("Bold")
}
</script>
execCommand()的常用用法:
字体--宋体、黑体、楷体等
execCommand("fontname","",字体)
字号--字号大小
execCommand("fontsize","",字号)
加重
execCommand("Bold")
斜体
execCommand("Italic")
下划线
execCommand("Underline")
删除线
execCommand("StrikeThrough")
居左
execCommand("JustifyLeft")
居右
execCommand("JustifyRight")
居中
execCommand("JustifyCenter")
剪切
execCommand("Cut")
拷贝
execCommand("Copy")
粘贴
execCommand("Paste")
取消操作--IE5.0以后可以无限取消
execCommand("Undo")
重复操作
execCommand("Redo")
把上面的每个用法用按钮来实现,你就已经完成了一个简单的可视文本编辑器。
相关文章
- 制作HTML编辑器的基本方法(转)
- Html中嵌套其他HTML文件的几种方法(转)
- 百度数据开发面试题 Oracle行列转换Oracle行转列、列转行的Sql语句总结(转)链接中的基本都用到。1)wm_concat、listaggoracle拆分逗号分隔字符串 实现split博主这里没记住正则,开始傻傻的用循环暴力,后来面试的大叔让我随便用什么语言博主就写了个java的List数组拆分,后来想想完全不同,这里应该是String的split,用oracle的话就用正则,其他语言支持正则的都可以用正则。这是老夫版的,面试写的随意,使用方法名递归,估
- 只有APE文件的情况下自己制作CUE文件的方法-转,经过本人验证真实可靠good!终极解决版 - pyman
- 只有APE文件的情况下自己制作CUE文件的方法-转,经过本人验证真实可靠good!终极解决版 - pyman
- CentOS6.2 网络基本配置[转]---配置网络的集中方法,有用!
- HTML5中表单验证的8种方法(转)
- linux找不到动态链接库 .so文件的解决方法(转自:http://www.cnblogs.com/xudong-bupt/p/3698294.html)
- (转) UIALertView的基本用法与UIAlertViewDelegate对对话框的事件处理方法
- 【转】 UIALertView的基本用法与UIAlertViewDelegate对对话框的事件处理方法