为啥在div里面做富文本编辑没有作用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为啥在div里面做富文本编辑没有作用相关的知识,希望对你有一定的参考价值。

我用的div实现富文本编辑 先给它一个contentEditable 属性为true 然后定义一个span 昨晚按钮 绑定“click”事件 然后用execCommand方法 但是却没有效果

代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>富文本编辑</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<span id="bold">加粗</span>
<span id="italic">斜体</span>
<div id="text">123</div>
<script type="text/javascript" src="text.js"></script>
</body>
</html>

js代码如下
var EventUtil =
addHandler : function (element,type,handler)
// body...
if (element.addEventListener)
element.addEventListener(type,handler,false);
else if (element.attchEvent)
element.attchEvent("on" + type,handler);
else
element["on" + type] = handler;

,
removeHandler : function (element,type,handler)
// body...
if (element.removeEventListener)
element.removeEventListener(type,handler,false);
else if (element.detachEvent)
element.detachEvent("on" + type,handler);
else
element["on" + type] = null;


;
var button = document.getElementById('bold'),
italic1 = document.getElementById('italic');
var text = document.getElementById('text');
EventUtil.addHandler(window,"load",function ()
// body...
text.contentEditable = "true";
);
EventUtil.addHandler(button,"click",function (argument)
// body...
document.execCommand("bold",false,null);
text.focus();
)

参考技术A <p>将div换成textarea</p> <p>不行的话将这两个文件调换一下试试:</p> <p>editor_all.js:带全部功能(排除UI)的js文件压缩后的版本</p> <p>editor_ui_all.js:带全部功能(包含UI)的js文件压缩后的版本</p> <p>而我的还更惨,在IE(IE6~9)都正常,但在manthon/FF/chrome下就变形了!</p> <p></p>

我为啥要做富文本编辑器

  富文本编辑器,RichTextEditor,简称RTE,是一种可内嵌于浏览器,所见即所得的文本编辑器。它提供类似于比如谷歌、火狐效果都非常不错,在功能的丰富性来说,还是IE强些(但IE的6、7、8、9几个版本就足够搞死开发者了)。
  富文本编辑器不同于文本编辑器,程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里(当然付费的功能会更强大些),方便用户编辑文章或信息。
  比较好的文本编辑器有kindeditor,fckeditor等,百度推出的开源富文本编辑器UEditor算是其中的后起之秀。
参考技术A 这是对应于记事本之类的纯文本编辑器而言,就是文本中带有控制符的文本编辑器,如可以带文字的字体、字号、颜色等控制符,而纯文本编辑器编辑的文件是不带这些控制符的。

以上是关于为啥在div里面做富文本编辑没有作用的主要内容,如果未能解决你的问题,请参考以下文章

为啥放弃WebView 而 使用 crosswalk

我在页面里选中一段文字,怎么用jquery单独把这段文字加粗?我想做富文本编辑器文字加粗的效果!谢谢了

为啥富文本编辑器提交的为editorvalue

ios富文本编辑器

移动端h5踩坑之 显示富文本内容设置图片宽度

如何将word图片粘贴到富文本编辑器里面