所见即所得富文本编辑器实现原理_weixin_30716141的博客-程序员宅基地

技术标签: 数据库  javascript  xhtml  

如何做到编辑像文本域,又能够即时所见呢?

答案就是使用iframe作为内容编辑区域。iframe本身也是一个嵌套页面,它如何能够被编辑呢?

这里有一些关键的属性,它们可以做到让iframe可以被编辑。

<!DOCTYPE HTML>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>KF富文本编辑器</title>
    <script src="Scripts/jquery-1.8.2.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><b>D</b>");

            $('#insert_img').click(function () {
                // 在iframe中插入一张图片
                var img = '<img src="11.jpg" width="200"/>';
                $("body", $d).append(img);
            });

            //设置选定的文本为粗体/正常 
            $('#btnB').click(function () {
                var win = document.getElementById("editor").contentWindow;
                win.document.execCommand("Bold", false, null);
                win.focus();
            });
            //
            $('#btnYuan').click(function () {
                $('#txtYuan').val($('#editor').contents().find('body').html());
            });
            $('#preview').click(function () {
                // 获取iframe的body内容,用于显示或者插入到数据库
                //alert($('#editor').contents().find('body').html());
                $('#preview_area').html($('#editor').contents().find('body').html());

            });
        });

    </script>

</head>

<body>
    源码显示区
    <textarea id="txtYuan" style="width: 600px; height: 200px">
    </textarea>
    <p>
        实时编辑区
        <iframe id="editor" width="600px" height="200px" style="border: solid 1px;"></iframe>
    </p> 
    <input type="button" id="insert_img" value="插入图片" />
    <input type="button" id="preview" value="预览" />
    <input type="button" id="btnYuan" value="显示源码" />
    <input type="button" id="btnB" value="加粗/正常" />
    预览区
    <p style="border: 1px dashed #ccc;" id="preview_area"></p>

</body>
</html>

PS:
1、用ifr.contentDocument || ifr.contentWindow.document方式获取iframe的文档对象
2、分别设置designMode属性为’on’,contentEditable属性为’true’让iframe可编辑
3、通过doc.body.innerHTML方法获取内容,这个内容是我们最终要插入到数据库或显示在页面上的(例如用户评论)
4、在doc.write()方法前后加上doc.open(), doc.close()可以防止浏览器不停显示加载中

 

效果如下图

 

本文摘自:keepfool博文

 

转载于:https://www.cnblogs.com/clear-dream/p/5896803.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30716141/article/details/97841794

智能推荐

异步调用Webservice_每天积累一点,一年后你会发现,自己变化很大-程序员宅基地

异步,说到异步需要首先将以下同步。同步就是代码按照顺序执行,当前面的代码的请求没有正常返回结果的情况下,后面的代码是不能运行。而异步正好和这点不同,异步是代码运行后,不管当前的请求是否返回结果,后面的代码都会继续运行。1.   编写服务端代码:      [java] view plaincopypublic class 

Ubuntu12.10 使用DNW传数据 进行ARM开发板烧写_u014251458的专栏-程序员宅基地

Part1前言最近在研究OK6410开发板;但windows下的rvds真是不好用,烧写程序到开发板还需要dnw,而这各种软件都要在win下搞,很是憋屈,而且64位的win7还出各种问题。我要移植的是Linux系统呢,咋的就不能在linux完成所有步骤呢?昨晚到处查找资料,总算找到了dnw可在linux成功运行的消息;又遇到了linux下的串口连接终端minicom和kermit; 不

uefi启动linux过程_linux内核启动流程分析 - efi_pe_entry_连役的博客-程序员宅基地

本文首发于我的个人公众号 ytcode,文章链接为linux内核启动流程分析 - efi_pe_entry​mp.weixin.qq.com接上一篇文章 linux内核启动流程分析 - efistub的入口函数,我们继续看efi_pe_entry这个函数。该函数有两个参数,根据uefi specification中有关entry point的定义可知:handle指向的是运行时的kernel,sy...

阿里云上各种Rpm包下载地址_IChen.的博客-程序员宅基地

下载地址:https://mirrors.aliyun.com/centos/7/os/x86_64/Packages/

java map包_java Map_午后茶语的博客-程序员宅基地

java MapCreateTime--2017年5月26日08:44:16Author:Marydon四、java数据类型之Map需要导入包:importjava.util.Map;import java.util.HashMap;(一)数据格式1.1 Map与HashMap{FHIGHPRICE_VILLLEVE=0, FSTATUS=1, FPROVLEVELLIMIT=1, FBEGIND...

基于Linux下开发的ELK自动部署工具以及ELK基本操作_hellopeng1的博客-程序员宅基地_elk一键部署

基于Linux下开发的ELK自动部署工具以及ELK基本操作前言:本文主要作为此次部署ELK环境的记录,希望我的一些经验可以帮到更多的人1.介绍自定义开发了一款基于linux和docker(各个节点之间需要可以互相ping通,可以配置linux之间的网关即可互通)快速分布式部署ELK环境的工具(该工具的百度网盘地址:https://pan.baidu.com/s/1gfNEcyJ  密码

随便推点

linux端口扫描 python,python 多线程完成linux服务器端口扫描_Get优品的博客-程序员宅基地

人性化交互式python脚本,采用多线程方式完成linux服务器开放端口扫描:以下为完整代码:#!/usr/bin/envpython#-*-coding:UTF-8-*-#func:scantheopenportofserver#author:youjiaLee#time:01/27/2013importsysimportsocketimportthreadimp...

安装服务命令_weirtang的专栏-程序员宅基地_安装服务命令

方法1:InstallUtil.exe xxx.exe方法2:sc create ldserver binPath= xxx.exe

2017 ACM-ICPC 亚洲区(乌鲁木齐赛区)网络赛-G: Query on a string(线段树+预处理)_污miao汪的博客-程序员宅基地

2017 ACM-ICPC 亚洲区(乌鲁木齐赛区)网络赛-G: Query on a string(线段树+预处理)

c语言 eval,分享:自己写的eval函数_鲁舒天的博客-程序员宅基地

该楼层疑似违规已被系统折叠隐藏此楼查看此楼自然,主程序的源码也分享如下:#include#include "peval.h"#include#include#include#includeusing namespace std;numtype x,s,t;string f,g;numtype varx(string a) {if (a=="x") return x;else return 0;}...

L1-5 电子汪 (10 分)——2018_是Elie呀的博客-程序员宅基地

据说汪星人的智商能达到人类 4 岁儿童的水平,更有些聪明汪会做加法计算。比如你在地上放两堆小球,分别有 1 只球和 2 只球,聪明汪就会用“汪!汪!汪!”表示 1 加 2 的结果是 3。本题要求你为电子宠物汪做一个模拟程序,根据电子眼识别出的两堆小球的个数,计算出和,并且用汪星人的叫声给出答案。输入格式:输入在一行中给出两个 [1, 9] 区间内的正整数 A 和 B,用空格分隔。输...

linux 重复模式元字符,【2017年整理】Linux Shell 通配符、元字符、转义符使用实例介绍.doc..._海盗船舵工-8381的博客-程序员宅基地

Linux Shell 通配符、元字符、转义符使用实例介绍(转载:/chengmo/archive/2010/10/17/1853344.html)说到shell通配符(wildcard),大家在使用时候会经常用到。下面是一个实例:1234[[email protected] ~/shell]$lsa.txt b.txt c.old#2?1234[[email protected] ~/she...

推荐文章

热门文章

相关标签