javascript 在线文本编辑器

最新推荐文章于 2024-04-09 22:19:36 发布
VIP文章 最新推荐文章于 2024-04-09 22:19:36 发布
阅读量3k 收藏 5
点赞数 2
分类专栏： javascript 文章标签： javascript 在线文本编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/phpfenghuo/article/details/40586397
版权

javascript 在线文本编辑器实现代码。效果如下：


<!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>Editor</title> 
<style type="text/css"> 
body{ font-size:12px;} 
#ed{ height:300px; width:800px; background-color: } 
.sssss{ background-image:url(http://www.zzsky.cn/build/images/20099493121.gif)} 
.tag{ background-image:url(http://www.zzsky.cn/build/images/20099493121.gif);height:22px; display:inline-table;float:left; ;cursor: pointer; margin-top:8px; margin-left:5px; margin-right:2px; vertical-align:middle; line-height:20px;} 
.span0_hover{background-position:-0px -2px;width:22px} 
.span1_hover{background-position:-30px -2px;width:22px} 
.span2_hover{background-position:-58px -2px;width:22px} 
.span3_hover{background-position:-86px -57px;width:73px} 
.span4_hover{background-position:-86px -28px;width:73px} 
.span5_hover{background-position:-164px -2px;width:22px; background-color:#000000} 
.span6_hover{background-position:-194px -2px;width:22px} 
.span7_hover{background-position:-45px -192px;width:22px} 
.span8_hover{background-position:-76px -192px;width:22px} 
.span9_hover{background-position:-58px -247px;width:22px} 
.span10_hover{background-position:-86px -247px;width:22px} 
.span11_hover{background-position:-113px -247px;width:22px} 
.span12_hover{background-position:-476px -192px;width:22px} 
.span13_hover{background-position:-505px -192px;width:22px} 
.span14_hover{background-position:-333px -247px;width:22px} 
.span15_hover{background-position:-532px -192px;width:22px} 
.span16_hover{background-position:-560px -192px;width:22px} 
.span17_hover{background-position:-455px -247px;width:22px} 
.span18_hover{background-position:-222px -2px;width:73px} 
.span19_hover{background-position:-380px -2px;width:74px} 
.span20_hover{background-position:-460px -2px;width:71px} 
.span0{background-position:-0px -57px;width:22px} 
.span1{background-position:-30px -57px;width:22px} 
.span2{background-position:-58px -57px;width:22px} 
.span3{background-position:-86px -57px;width:73px} 
.span4{background-position:-86px -28px;width:73px} 
.span5{background-position:-164px -57px;width:22px;background-color:#000000} 
.span6{background-position:-194px -57px;width:22px} 
.span7{background-position:-45px -84px;width:22px} 
.span8{background-position:-76px -84px;width:22px} 
.span9{background-position:-58px -140px;width:22px} 
.span10{background-position:-86px -140px;width:22px} 
.span11{background-position:-113px -140px;width:22px} 
.span12{background-position:-476px -84px;width:22px} 
.span13{background-position:-505px -84px;width:22px} 
.span14{background-position:-333px -140px;width:22px} 
.span15{background-position:-532px -84px;width:22px} 
.span16{background-position:-560px -84px;width:22px} 
.span17{background-position:-455px -140px;width:22px} 
.span18{background-position:-222px -57px;width:73px} 
.span19{background-position:-380px -57px;width:74px} 
.span20{background-position:-460px -57px;width:71px} 
.span0_active{background-position:-0px -28px;width:22px} 
.span1_active{background-position:-30px -28px;width:22px} 
.span2_active{background-position:-58px -28px;width:22px} 
.span3_active{background-position:-476px -299px;width:22px} 
.span4_active{background-position:-505px -299px;width:22px} 
.ebody{ height:auto; width:760px; border:1px solid #999999} 
.ebar{ width:100%; height:36px; background-color:#F0F2F5;}; 
.edit{ height:550px; width:100%; border:0px;} 
.popupfont{ width:200px; height:auto; border:1px solid #7B9EBD; background-color:#F7F7F7; position:absolute;padding:3px; } 
a.c1{ width:96%; height:auto; font-size:10px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;} 
a.c1:hover{width:96%; height:auto; font-size:10px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;} 
a.c2{ width:96%; height:auto; font-size:12px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;} 
a.c2:hover{width:96%; height:auto; font-size:12px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;} 
a.c3{ width:96%; height:auto; font-size:14px;display:block;border:1px solid #F7F7F7;padding:3px;color:#666666 ;text-decoration:none;} 
a.c3:hover{width:96%; height:auto; font-size:14px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;} 
a.c4{ width:96%; height:auto; font-size:16px;display:block;border:1px solid #F7F7F7;padding:3px; color:#666666;text-decoration:none;} 
a.c4:hover{width:96%; height:auto; font-size:16px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;} 
a.c5{ width:96%; height:auto; font-size:18px;display:block;border:1px solid #F7F7F7;padding:3px; color:#666666;text-decoration:none;} 
a.c5:hover{width:96%; height:auto; font-size:18px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;} 
a.c6{ width:96%; height:auto; font-size:22px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;} 
a.c6:hover{width:96%; height:auto; font-size:22px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;} 
a.c7{ width:96%; height:auto; font-size:26px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;} 
a.c7:hover{width:96%; height:auto; font-size:26px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;} 
a.n{ width:96%; height:auto; font-size:14px;display:block;border:1px solid #F7F7F7;padding:3px;color:#666666;text-decoration:none; } 
a.n:hover{width:96%; height:auto; font-size:14px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;} 
.textarea{ border:0px;display:none;} 
.toolbarlayer{position:absolute;opacity:0.7;filter:alpha(opacity:70);background-color:#ffffff;height:36px} 
.bottom{height:30px;width:100%;background-color:#F7F3F7;font-size:12px;} 
.checkbox{margin-top:10px;margin-top/*\**/:6px\9;margin-left:20px;margi
最低0.47元/天 解锁文章
风火程序员
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
javascript 在线文本编辑器实现代码
10-29
javascript 在线文本编辑器实现代码，非常值得学习。
很简单的一个在线文本编辑器
yaohonv的专栏
05-13 601
http://www.cnblogs.com/wtcsy/archive/2010/03/04/1678459.html
CodeMirror使用： 编写一个在线编辑HTML、JS、CSS文件，网页的模板页面-初实现
伊甸园的博客
04-09 1073
CodeMirror 是一个强大的基于浏览器的文本编辑器组件，主要用于网页中创建可编辑的源代码区域，特别适用于编写和展示程序代码。它支持多种编程语言的语法高亮、代码折叠、自动补全、查找替换等多种高级编辑特性。
在线文本编辑器
un28700的专栏
08-07 978
 editorbody{ font-size:12px;}#ed{ height:300px; width:800px; background-color: }.sssss{ background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090730/003356952.p.gif)}
javascript实现HTML在线编辑器
fengfan2006的专栏
12-17 262
javascript实现HTML在线编辑器 以前一直不知道好多网站上所说的在线编辑器是怎么回事，后来在文档里发现document 对象的一个方法。 document.execCommand(command, false, value); 才知道具体原理。 一、首先来看一个例子： Hello World! 保存为html网页，打开看看，在DIV里出现了一个光标，这...
简单在线文本编辑器....
apr40151的博客
03-04 87
以前写过 现在只是做了点修改........<!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...
js在线编辑器
04-29
仿Word在线编辑器
学习js在线html(富文本)编辑器
u011927449的博客
06-10 780
你要的是所见即所得HTML编辑器，简单来说需要几个基本步骤：1，需要一个可以编辑同时又可显效果的编辑框。textarea不行，它只能用来输入纯文本，不能显示颜色、斜体之类的文字样式，就像记事本。你可以使用iframe来实现，修改iframe的designMode属性使其可以被编辑。<iframe id="myEditer" width="100%" height="150px"></iframe><script>myEditer.document.designMode =
JavaScript 在线编辑器
Pomelo_Liam的博客
01-03 4770
JavaScript 在线编辑器JS在线编辑器:文档新特性使用技术安装正在实现的列表许可证 JS在线编辑器: 是一个Javascript在线编辑器。 是一个完全由前端语言Angular开发的编辑器， 没有服务器端。 在线演示: Demo 文档 简体中文 English 新特性 支持切换编辑器视角区域 支持全屏预览，并且实时更新 支持导出整个页面源代码 编辑器增强 控制台可视化 作品展...
RunJs 在线编辑JavaScript 代码
学而不思则罔 思而不学则殆
02-28 1614
http://runjs.cn/
js在线写作文本编辑器插件Writty
ICode联盟
10-20 342
Writty是一个轻量级的所见即所得文本编辑器，提供了一个全新样式的编辑器。引用了一些远程js类库，如果失效可以自行替换。主要特色垂直编辑器工具栏。黑暗与光明模式切换器。自动当前本地存储内容。
js代码编辑器制作javascript在线编辑器格式显示代码
05-14
js代码编辑器制作javascript在线编辑器格式显示代码js代码编辑器制作javascript在线编辑器格式显示代码
kindEditor在线HTML富文本编辑器改造版
04-17
KindEditor 是基于JavaScript 编写，可以与众多WEB应用程序结合。KindEditor 依靠出色的用户体验和领先的技术提供富文本编辑功能，是一款非常受欢迎的HTML在线编辑器。
19款Javascript富文本网页编辑器
10-28
19款javascript富文本编辑器。也许你还有兴趣查看15个基于Web的HTML编辑器和6款所见即所得(WYSIWYG)的在线Web编辑器。
4个顶级JavaScript高级文本编辑器
01-19
JavaScript无处不在，它在网络上的无处不在是不可否认的。每个应用程序都以一种或另一种...就像任何其他编程语言一样，JavaScript编辑器或IDE没有特定的要求集，但是一个好的需求应该能够处理所有与JavaScript相关的任
五种JavaScript富文本编辑器,总有一款适合你
infotw的博客
06-11 1484
也许，你时常会遇到要开发基于Web的文本编辑器的情况。有时候，只需实现一个简约且轻量级的应用程序，不必有其他任何不必要的功能。而有时候，你的首要任务是保护用户的商业机密。 在这样的情况下，如果想知道“背后发生了什么”，最好是从头开始创建应用程序。所幸，可采取的解决方案有很多。因此，总能找到一种工具，来创建符合用户需求和资金要求的在线文本编辑器。 本文将简要介绍五个JavaScript富文本编辑器，...
html文本编辑器 原理,学习js在线html(富文本,所见即所得)编辑器
weixin_42398055的博客
05-30 552
你要的是所见即所得HTML编辑器，简单来说需要几个基本步骤：1，需要一个可以编辑同时又可显效果的编辑框。textarea不行，它只能用来输入纯文本，不能显示颜色、斜体之类的文字样式，就像记事本。你可以使用iframe来实现，修改iframe的designMode属性使其可以被编辑。myEditer.document.designMode = 'on';这样你就可以在这个iframe区域里写字了。2...
js判断所有表单项不为空则提交表单
热门推荐
NiceGY
11-09 1万+
<script type="text/javascript"> function myCheck() { for(var i=0;i<document.form1.elements.length-1;i++) { if(document.form1.elements[i].value=="") {
JS实现点击按钮复制指定代码大全
NiceGY
05-12 1万+
<br><br>一、点击复制文本框内容的代码:<br><br> <script type="text/javascript"> function jsCopy(){ var e=document.getElementById("content");//对象是content e.select(); //选择对象 document.execCommand("Copy"); //执行浏览器复制命令 alert("已复制好，可贴粘。");
springboot vue富文本编辑器
最新发布
05-06
在页面中引入相应的CSS和JavaScript文件，以及富文本编辑器的初始化代码。 2. 在Vue中，可以使用npm或yarn等包管理工具安装富文本编辑器的Vue组件，并在需要使用编辑器的组件中引入和注册该组件。 3. 在Vue组件中，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值