javascript制作简单的富文本，基本功能都实现，除了上传图片只能用URL

最新推荐文章于 2024-05-09 15:55:35 发布
最新推荐文章于 2024-05-09 15:55:35 发布
阅读量268 收藏
点赞数
分类专栏： javascript学习日记 文章标签： javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdcdhj/article/details/133690900
版权
本文介绍了如何在HTML5页面中使用CSS图标库和JavaScript实现一个基本的富文本编辑器，包括使用`execCommand`处理格式化、样式、链接等功能，并通过事件处理模拟将编辑内容保存到数据库。
摘要由CSDN通过智能技术生成

//所有的图标用的字符，以后可以换成网上的css-icon图标库的图标，再设置一下css样式即可简单的使用
//这里所有的标签元素都是直接获取，没有使用委托，如果使用委托性能会更好，这里只做了简单的清理，让内存回收

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8"></html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link type="text/css" href="public/css/test.css" rel="stylesheet"/>
        <script type="text/javascript" src="common.js"></script>
        
        <title>制作富文本的测试页面</title>
        <style type="text/css">
            #containerIframe
            {
              width: 600px;
              height: 600px;
              margin: 0 auto;
              margin-top: 10px;
              font-size: 1em;
              border: 1px solid #ccc;
             
            }
            #containerIframe #toolbar 
            {
              height: 30px;
              background-color: #C0C0C0;
              width: 100%;
            }
            #toolbar a
            {
              margin-right: 2px;
              margin-left: 5px;
              line-height: 1.95em;
              font-size: 0.875em;
            }
            #toolbar a:link
            {
              text-decoration: none;
              color: #333333;
            }
            #heading
            {
              list-style: none;
              margin: 0;
              padding: 0;
              font-size: 1em;
              position: relative;
              top: 0px;
              left: 55px;
              width: 30px;
              background-color: #ccc;
            }
            #heading li
            {
              width: 25px;
              height: 20px;
              text-align: center;
            }
            .clear 
            {
              clear:both;
            }
   
        </style>
 
    </head>
    <body>
      <div id="containerIframe">
        <div id="toolbar">
          <a href="Javascript:void(0)" data-type="B" title="字符加粗">B</a>
          <a href="Javascript:void(0)" data-type="I" style="font-style:italic" title="斜体">I</a>
          <a href="Javascript:void(0)" data-type="U" style="text-decoration:underline" title="字符下划线">U</a>
          <a href="Javascript:void(0)" data-type="H" title="标题">H</a>
          <a href="Javascript:void(0)" data-type="left" title="字符居左">左</a>
          <a href="Javascript:void(0)" data-type="center" title="字符居左">中</a>
          <a href="Javascript:void(0)" data-type="right" title="字符居右">右</a>
          <a href="Javascript:void(0)" data-type="P" title="插入段落">P</a>
          <a href="Javascript:void(0)" data-type="indent" title="缩进文本">缩</a>
          <a href="Javascript:void(0)" data-type="outdent" title="减少缩进">凸</a>
          <a href="Javascript:void(0)" data-type="forecolor" title="文本颜色">色</a>
          <a href="Javascript:void(0)" data-type="removeformat" title="删除粘贴样式">清理</a>
          <a href="Javascript:void(0)" data-type="createlink" title="创建URL">URL</a>
          <a href="Javascript:void(0)" data-type="unlink" title="删除URL">删除URL</a>
          <a href="Javascript:void(0)" data-type="ollist" title="有序排列">有序</a>
          <a href="Javascript:void(0)" data-type="lilist" title="无序排列">无序</a>
          <a href="Javascript:void(0)" data-type="image" title="插入图片">图片</a>

          <ul id="heading" style="display:none;">
            <li><a href="Javascript:void(0)" data-type="h1">h1</a></li>
            <li><a href="Javascript:void(0)" data-type="h2">h2</a></li>
            <li><a href="Javascript:void(0)" data-type="h3">h3</a></li>
            <li><a href="Javascript:void(0)" data-type="h4">h4</a></li>
            <li><a href="Javascript:void(0)" data-type="h5">h5</a></li>
          </ul>
        </div> 
       <iframe name="richedit" style="height:100%;width:100%;" src="" frameborder="0" allowTransparencty="true" id="edit" scrolling="no"></iframe>     
       <input type="submit" name="submit1" value="提交" />   
      </div>
    
    <script type="text/javascript">
      //获取到iframe框架
      var edit=document.getElementById("edit");
      //这句是获取到iframe框架下的文档document或window,兼容IE
      editPane=edit.contentDocument|| edit.contentWindow.document;

      editPane.designMode="on";
      editPane.open();
      editPane.write('<p color="black" size=+0.7 class="editor">编辑区</p>');
      editPane.close();
      //工具标签
      var toolbar=document.getElementById("toolbar");
      //获取工具标签下面所有的a标签
      var a=toolbar.getElementsByTagName("a");
      var heading=document.getElementById("heading");
      for(var i=0,len=a.length;i<len;i++)
      {
        //循环得到特征data-type的值
        switch(a[i].getAttribute("data-type"))
        {
          case "B": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("Bold",false,null);
            });
            break;
          case "I": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("italic",false,null);
            });  
            break;
          case "U": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("underline",false,null);
            }); 
            break;
          case "H": 
            EventUtil.addHandler(a[i],"click",function(){
              if(heading.style.display=="none")
              {
                heading.style.display="block";
              }else
              {
                heading.style.display="none";
              }
                //循环H标签的菜单，点击谁则相应的设置成谁
                var ha=heading.getElementsByTagName("a");
                for(var j=0,leng=ha.length;j<leng;j++)
                {
                  switch(ha[j].getAttribute("data-type"))
                  {
                    case "h1": 
                      
                      EventUtil.addHandler(ha[j],"click",function(){
                        var format=editPane.queryCommandValue("formatBlock");
                        console.log(format);
                        if(format.toLowerCase()==="p")
                        {
                          editPane.execCommand("formatBlock",false,"h1");
                          
                        }else
                        {
                          editPane.execCommand("formatBlock",false,"p");
                          
                        }
                        heading.style.display="none";
                      });
                      
                      break;
                      case "h2": 
                      
                      EventUtil.addHandler(ha[j],"click",function(){
                        var format=editPane.queryCommandValue("formatBlock");
                        if(format.toLowerCase()==="p")
                        {
                          editPane.execCommand("formatBlock",false,"h2");
                          
                        }else if(format.toLowerCase()==="h1" || format.toLowerCase()==="h3" ||format.toLowerCase()==="h4"||format.toLowerCase()==="h5")
                        {
                          editPane.execCommand("formatBlock",false,"h2");
                          
                        }else
                        {
                          editPane.execCommand("formatBlock",false,"p");
                        }
                        
                        heading.style.display="none";
                      });
                      
                      break;  
                      case "h3": 
                      
                      EventUtil.addHandler(ha[j],"click",function(){
                        var format=editPane.queryCommandValue("formatBlock");
                        if(format.toLowerCase()==="p")
                        {
                          editPane.execCommand("formatBlock",false,"h3");
                          
                        }else
                        {
                          editPane.execCommand("formatBlock",false,"p");
                          
                        }
                        heading.style.display="none";
                      });
                      
                      break;
                      case "h4": 
                      
                      EventUtil.addHandler(ha[j],"click",function(){
                        var format=editPane.queryCommandValue("formatBlock");
                        if(format.toLowerCase()==="p")
                        {
                          editPane.execCommand("formatBlock",false,"h4");
                          
                        }else
                        {
                          editPane.execCommand("formatBlock",false,"p");
                          
                        }
                        heading.style.display="none";
                      });
                      
                      break;
                      case "h5": 
                      
                      EventUtil.addHandler(ha[j],"click",function(){
                        var format=editPane.queryCommandValue("formatBlock");
                        if(format.toLowerCase()==="p")
                        {
                          editPane.execCommand("formatBlock",false,"h5");
                          
                        }else
                        {
                          editPane.execCommand("formatBlock",false,"p");
                          
                        }
                        heading.style.display="none";
                      });
                      
                      break;

                  }
                }
                ha=null;
                
            }); 
            break;

          case "left": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("JustifyLeft",false,null);
            }); 
            break; 

          case "center": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("JustifyCenter",false,null);
            }); 
            break; 

          case "right": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("JustifyRight",false,null);
            }); 
            break;  
          
          case "P": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("insertparagraph",false,"p");
            }); 
            break; 
           //增加缩进 
          case "indent": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("indent",false,null);
            }); 
            break;  
          //减少缩进  
          case "outdent": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("outdent",false,null);
            }); 
            break;
            //为字体设置颜色，这里只设置了红色，以后可以像h标签一样添加
          case "forecolor": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("forecolor",false,"red");
            }); 
            break;
          //清除粘贴过来的样式，和自己设置的模式  
          case "removeformat": 
            EventUtil.addHandler(a[i],"click",function(){
              //首先获取到范围内的p元素标签有多少个
              var p=editPane.getElementsByTagName("p");
              
              //循环p元素
                for(var l=0,leng=p.length;l<leng;l++)
                {
                  //检查P元素下面是否有子节点
                  if(p[l].children.length>0)
                  {
                    //循环子节点
                    for(var a=0,lengg=p[l].children.length;a<lengg;a++)
                    {
                      //获取子节点的名称是否等于span
                      if(p[l].children[a].tagName.toLowerCase()==="span")
                      {
                        //检查span是否有style特征，如果有则删除style
                        var att=p[l].children[a].getAttribute("style");
                        if(att)
                        {
                          
                          p[l].children[a].removeAttribute("style");
                        }
                        //继续循环，因为清理时一般都会按多次，这里就是多次清理
                        continue;
                      }else
                      {
                        editPane.execCommand("removeformat",false,"span");
                      }
                    }

                    //如果没有子节点则直接清理p标签的style
                  }else
                  {
                    if(p[l].getAttribute("style"))
                    {
                      p[l].removeAttribute("style");
                    }
                  }
                }

              editPane.execCommand("removeformat",false,"style");
              p=null;
            }); 
             
            break; 
          //创建文本的url
          case "createlink": 
            EventUtil.addHandler(a[i],"click",function(){
              var result=prompt("输入你的本地URL或外链","");
              if(result !==null)
              {
                editPane.execCommand("createlink",false,result);
              }
              
            }); 
            break;  
          //清除url连接
          case "unlink": 
            EventUtil.addHandler(a[i],"click",function(){
                editPane.execCommand("unlink",false,null);

            }); 
            break;
           //有序排列 
          case "ollist": 
            EventUtil.addHandler(a[i],"click",function(){
                editPane.execCommand("insertorderedlist",false,null);

            }); 
            break;  
          //无序排列  
          case "lilist": 
            EventUtil.addHandler(a[i],"click",function(){
                editPane.execCommand("insertunorderedlist",false,null);

            }); 
            break;
            //插入图片，占时只能插入图片的URL，本地上传用xrh还未做
          case "image": 
            EventUtil.addHandler(a[i],"click",function(){

               var result=prompt("输入你的图片连接","");
              if(result !==null)
              {
                editPane.execCommand("insertimage",false,result);
              }

            }); 
            break;  
        }
      }
      
      //模拟将iframe框架中格式化的文本赋值给表单的字段，以便存入数据库
      var button=document.getElementsByName("submit1")[0];
      EventUtil.addHandler(button,"click",function(){
        var text=editPane.body.innerText;
        console.log(text);
      });
      
     

      edit=null;
      toolbar=null;
      a=null;
     
    </script>
           
    </body>
</html>

//最后实现的样式
在这里插入图片描述
在这里插入图片描述

cdcdhj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
创建一个简单的富文本编辑器
YoungMan_09的博客
04-23 1194
vue + wangeditor 创建一个简单的富文本编辑器
html加载富文本_HTML基础
weixin_39830323的博客
11-19 2182
主流浏览器内核IE/Edge - TridentFireFox - GeckoSafari - WebkitChrome - Webkit 升级到 BlinkOpera - Presto 升级到 Webkit 升级到 BlinkHTMLHTML叫做超文本标记语言(Hypertext Markup Language) ,用于搭建网页的结构HTML是一种纯文本格式的文件，内部只能书写文字内容，不能添加...
JS实现富文本编辑器JS实现富文本编辑器
12-31
JS 富文本编辑器 所见即所得 轻量级富文本编辑器
javascript富文本框
10-22
javascript富文本框，javascript富文本框
【JavaScript】富文本编辑器
嘿嘿
01-15 387
这是js写的富文本编辑器，还存在一些bug，但基本功能已经实现，通过这个练习，巩固了js富文本编辑方面的知识，里面包含颜色选择器、全屏、表情、上传图片等功能，每个功能实际对应的就是一个小插件啦 部分程序： var RichEditor = function(container, params) { params = params || {}; ...
前端实现富文本框
suiyingsuiyi的博客
05-07 1万+
这次我们项要求实现博客形式的富文本框，之前没有接触过，顿时毫无头绪。不过还好在网上找到了一个差不多的例子。下面附上网址：http://www.jb51.net/article/32689.htm知识点：实现富文本框可以使用iframe，修改iframe的designMode属性。&lt;script&gt;myEditer.document.designMode = 'on';&lt;/scrip...
使用JavaScript将富文本HTML转换为纯文本
最新发布
sg_knight的专栏
05-09 1077
在Web开发中，我们经常需要处理HTML内容，但有时为了特定的目的，比如文本处理、搜索或显示在非HTML环境中，我们可能希望将富文本HTML转换为纯文本。这里，我们将探讨如何使用JavaScript来实现这一功能。
前端实现富文本编辑器功能
10-19
前端使用wangEditor插件实现富文本编辑器功能，简单方便，容易上手。
vue前端项目富文本应用
xiatianit的博客
01-15 3579
quill
JS开发 富文本编辑器TinyMCE详解
10-16
关于富文本编辑器TinyMCE的详细介绍，本文将从其安装与配置、功能扩展、图片上传处理等关键知识点进行深度解析，帮助读者理解和掌握这一流行的前端编辑器。 ### 一、TinyMCE简介 TinyMCE是一个流行的开源富文本编辑...
H5下最简洁好用的富文本编辑器
05-05
H5下最简洁好用的富文本编辑器，接口文档丰富，使用简单有效。
ckeditor富文本编辑器需要引入的js文件
03-05
CKEditor是一款功能强大的富文本编辑器，广泛应用于网页制作、内容管理系统和其他需要用户编辑HTML内容的场景。它提供了丰富的文本格式化选项，如字体、大小、颜色、对齐方式等，以及图片上传、链接插入、表格创建等...
新浪博客网页编辑器ASP版带上传图片
06-01
【新浪博客网页编辑器ASP版带上传图片】是一款专为新浪博客用户设计的基于ASP语言的在线编辑工具，它提供了丰富的文本格式化功能，并且集成了图片上传功能，使得用户在编写博客文章时能够更加便捷地插入和管理图片。...
前端入门-富文本编辑器(一)
jsjxieyang的专栏
08-11 4154
simditor的扩展 自定义上传图片
javascript编写富文本的一些简单例子和思路
cdcdhj的博客
09-15 238
【代码】javascript编写富文本的一些简单例子和思路。
小白都能看得懂的教程 一本教你如何在前端实现富文本编辑器
亓官劼的博客
03-30 1万+
小白都能看得懂的教程 一本教你如何在前端实现富文本编辑器 更多优质博文地址： 第一讲：小白都能看懂的实战教程 手把手教你Python Web全栈开发 第一讲 Flask基本语法：Flask学习（一）博客地址 Bootstrap用法：一文教会你Bootstrap，让你也可以快速建站 白嫖开发环境（IDEA/Pycharm/Clion）：一文教你如何白嫖JetBrains全家桶（IDEA/PtChra...
前端入门-富文本编辑器(二)
jsjxieyang的专栏
09-05 1104
接上一篇。 1 介绍富文本编辑器中涉及到的一些名词，以及simiditor涉及思想 js selection 模块化改名 2代码优化：模块化，封装调用
前端 富文本编辑器原理——从javascript、html、css开始入门
热门推荐
编程知识分享，主打前端
10-05 3万+
大家好，我是yma16，本文分享关于前端 富文本编辑器原理——从javascript、html、css开始。富文本编辑器富文本编辑器是指具有格式化文本和图像编辑功能的文本编辑器Contenteditable属性Contenteditable是一种HTML属性，用于指定页面中的元素是否可以编辑。以下是Contenteditable的总结：Contenteditable属性可以应用于HTML元素上，如div、span、p、h1等等。
javascript用for循环生成div和img元素，再生成img的src属性，并添加到div元素里面
cdcdhj的博客
07-14 3266
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script language='javascript'> for(var i=0;i<5;i++){ var div=document.createElement('div');.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值