HTML在线文本编辑器实现原理
相信很多人都使用过多种富文本编辑器,富文本编辑器常用于编辑博客、用户交互,富文本编辑器分为两种:所见即所得和非所见即所得
两种富文本编辑器的实现原理是不相同的。
1. 非所见即所得编辑器
这种编辑器的实现原理很简单,用textarea元素就可以实现,假如要实现粗体、斜体、下划线、颜色字、图片的效果,只需在字的中间加上自定义标签即可,例如:[b]富文本编辑器[b] ,[img]src=”http://www.google.com.hk/intl/zh-CN/images/logo_cn.png”[img]当然这些规则你得自己通过js进行定制。当POST提交后,再把这些标签转换为html标签。
2. 所见即所得编辑器
在1中我提到的几种效果,我们无法在textarea中见到立竿见影的效果(所见即所得),而文本域本身也只是支持一些字符的输入,并不支持显示html。
如何做到编辑像文本域,又能够即时所见呢?答案就是使用iframe作为内容编辑区域。iframe本身也是一个嵌套页面,它如何能够被编辑呢?这里有一些关键的属性,它们可以做到让iframe可以被编辑。
还是直接上代码来得方便一些,代码也很少。
<html> <script language="javascript" type="text/javascript"> //初始化编辑器 function init() { var ifr = document.getElementByIdx_x("editor"); var doc = ifr.contentDocument || ifr.contentWindow.document; // W3C || IE doc.designMode="on"; doc.contentEditable= true; doc.write('<html><head><style>body{ margin:3px; word-wrap:break-word; word-break: break-all; }</style></head><body>GoodNessEditor</body></html>'); alert(doc.body.innerHTML); } //设置选定的文本为粗体/正常 function setBold() { var win=document.getElementByIdx_x("editor").contentWindow; win.document.execCommand("Bold",false,null); win.focus(); } </script> <p> <input type="button" id="bBtn" value="B" style="font-weight:bold" οnclick="setBold();" /> </p> <p> <iframe id="editor" width="600px" height="400px" style="border:solid 1px;"></iframe> </p> <script type="text/javascript"> init(); </script>
很重要的几点
大家可以运行上面的代码,可以看到如下截图中的效果:
但是在实际运行的时候,你是否发现除了chrome浏览器外(用IETester, Firefox,Chrome测试)打开这个页面都处于正在加载的状态(那个轮子转啊转,转个不停…)
只要在doc.write()方法前后加上doc.open(),doc.close()就可以了(在写之前开启,写完之后关闭)。
最后,我们的Web程序中经常使用jQuery作为基础类库,那就把上面的代码也改造为jQuery吧。代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>KF富文本编辑器</title> <script type="text/javascript" src="jquery.min.js"> </script> <script type="text/javascript"> $(function(){$d = $("#editor")[0].contentWindow.document; // IE、FF都兼容 $d.designMode="on"; $d.contentEditable= true; $d.open(); $d.close(); $("body", $d).append("<div>A</div><div>B</div><div>C</div>"); $('#insert_img').click(function(){ // 在iframe中插入一张图片 var img = '<img src="' + $('#path').val() +'" />'; $("body", $d).append(img); }); $('#preview').click(function(){ // 获取iframe的body内容,用于显示或者插入到数据库 alert($('#editor').contents().find('body').html()); $('#preview_area').html($('#editor').contents().find('body').html()); }); }); </script> </head> <body> <p><iframe id="editor" width="600px" height="200px" style="border:solid 1px;"></iframe></p> <input type="text" id="path" value="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png"/> <input type="button" id="insert_img" value="插入图片" /> <input type="button" id="preview" value="预览" /> <p style="border: 1px dashed #ccc;" id="preview_area"></p> </body> </html>
效果图如下:
是不是觉得很简单呢?
HTML在线文本编辑器实现原理相关推荐
- 在线文本编辑器实现原理
from: https://io-meter.com/2014/09/01/contenteditable-and-selection/ 最近研究了一下在浏览器中实现的 WYSIWYG 文本编辑器的原 ...
- FCKeditor在线文本编辑器初级应用
2019独角兽企业重金招聘Python工程师标准>>> 首先从FCKeditor的官网( http://www.fckeditor.net/)下载该编辑器,我下载的版本是FCKedi ...
- 这个在线文本编辑器的源代码
第一次用CSND的Blog的时候就被它的在线编辑器所吸引了.一直想自己写一个这样优秀的在线编辑器,但是一直没有时间. 但是,今天上网的时候却看见了这个在线文本编辑器的源代码 .很是激动,以后写的网站程 ...
- 在线文本编辑器(一)—FreeTextBox
FreeTextBox是最常见的在线文本编辑器了,有诸多好处. 从官方网站http://freetextbox.com/上下载最新的版本,目前来讲最新的版本是4.0 Beta1,是Beta版,我下载了 ...
- 怎样选择在线文本编辑器
在线文本编辑器就是我们平时在网上写博客,写文章时候用到的,比如这篇文章就是用在线文本编辑器写出来的.下面就讨论下几种常用的在线文本编辑器,以及他们的优点. FCKeditor FCKeditor是一款 ...
- kindeditor在方法中动态创建在线文本编辑器
官方编辑器初始化代码: KindEditor.ready(function(K) { editor = K.create('textarea[name="content"]', { ...
- java html文本编辑器,基于Java WebHTML在线文本编辑器解决方案.doc
基于Java WebHTML在线文本编辑器解决方案 基于Java WebHTML在线文本编辑器解决方案 摘要:FckEditor作为众多优秀HTML在线文本编辑器之一,以其支持多语言的优势而受到众多国 ...
- 基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
- 在线文本编辑器-ueditor实践
2019独角兽企业重金招聘Python工程师标准>>> 1.在线文本编辑器的作用? UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户 ...
最新文章
- JsBridge Uncaught TypeError: Cannot call method 'callHandler' of undefined, source
- HTTPD(三)--HTTP2.4.9编译安装
- 结构体成员赋值-标记化结构体初始化语法-结构体成员前面加小数点
- 安卓开发面试书籍,每个程序员都必须掌握的8种数据结构!面试必会
- i++ 和 ++i 效率的分析以及自定义类型的自增/自减运算符重载实例
- “Windows Sandbox”——PC主系统从未如此安全
- 基于Seay的PHP源代码审计
- access做仓库管理
- 【Matlab】除法取整函数用法
- 软考初级程序员考试大纲
- 六、CISSP 官方学习指南(OSG)第 7 版术语对照表
- 强大的RSS阅读器 Reeder 4 for Mac 4.1.1
- 老机器上安装了kubuntu先尝试安装Manjaro但是鼠标按键无法使用彻底解决办法
- 游戏美术基础:游戏贴图
- TrueType字体变成宋体的方法
- Matlab中图形对象属性gca使用
- Python初学笔记4-【嵌套循环】
- PostgreSQL汉字转拼音
- 一个div分上下两部分,上部分高度不固定,下面部分自动填满剩余高度
- 程序员在十年后还会有现在的收入吗?
热门文章
- Bootstrap入门、CSS样式【栅格系统】
- 前传:03.意外的荧光
- 资源整合+《 Android课程视频同步笔记 》
- 基于深度学习的图像分类:使用卷积神经网络实现猫狗分类器
- swf怎么转换成mp4格式,用这个方法就可以了
- 文件系统 1 之 根文件系统制作
- 360浏览器 兼容模式下页面显示异常(出现不改出现的HTML标签)
- 计算机毕设Python+Vue医院药品进销存系统(程序+LW+部署)
- 计算机仿真撤稿,Science 也撤稿了? 杯具啊 - 论文投稿 - 小木虫 - 学术 科研 互动社区...
- 重装系统后桌面找不到计算机,重装系统后网络图标不见了怎么办