前端实现富文本框

这次我们项要求实现博客形式的富文本框,之前没有接触过,顿时毫无头绪。不过还好在网上找到了一个差不多的例子。下面附上网址:http://www.jb51.net/article/32689.htm

知识点:

实现富文本框可以使用iframe,修改iframe的designMode属性。

<script>myEditer.document.designMode = 'on';</script>

js的selectionRange()可以选中文本,返回一个对象,可以通过该对象的text属性可以得到被选中的文本。

var sel = myEditer.document.selection.createRange();

alert(sel.text);

可以使用exeCommand()改变被选中文本的样式。

var sel = myEditer.document.selection.createRange();

sel.execCommand("Bold");

exeCommand方法。

字体--宋体、黑体、楷体等
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")


function.apply(thisObj,arg):apply()函数用于调用当前函数functionObject,并可同时使用指定对象thisObj作为本次函数执行时函数内部的this指针引用。

得到element元素的CSS:

element.currentStyle || document.defaultView.getComputedStyle(element, null);

判断是否有某种样式gueryCommand.

document.queryCommandState('italic');






猜你喜欢

转载自blog.csdn.net/suiyingsuiyi/article/details/80231766