js简单的文本编辑器

最新推荐文章于 2024-09-09 10:52:14 发布
最新推荐文章于 2024-09-09 10:52:14 发布
阅读量8k 收藏 5
点赞数
分类专栏： 前端技术

转自   http://blog.csdn.net/naruto1021/article/details/7998298

     项目页面需要一个简单的文本编辑器，网上的那些富文本编辑器功能都很强大，很多东西用不到，所以自己用js写了一个简单的文本编辑器。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>简单文本编辑器</title>
</head>
<body>
<div
style="width: 450px; height: 30px; border-top: 1px solid; border-left: 1px solid; border-right: 1px solid;">
<select οnchange=document.execCommand('FontSize',false,this.value)>
<option value=3>3号字</option>
<option value=4>4号字</option>
<option value=5>5号字</option>
<option value=6>6号字</option>
<option value=7>7号字</option>
</select> <input type=button value="红色" οnclick=document.execCommand('ForeColor',false,'#ff0000')>
<input type=button value="绿色" οnclick=document.execCommand('ForeColor',false,'#00ff00')>
<input type=button value="蓝色" οnclick=document.execCommand('ForeColor',false,'#0000ff')>
<input type=button value="左对齐"
οnclick="document.execCommand('JustifyLeft')"> <input
type=button value="居中" οnclick=document.execCommand('JustifyCenter')>
<input type=button value="右对齐" οnclick=document.execCommand('JustifyRight')>
</div>
<div id="editArea" contenteditable style="height: 200px; width: 450px; border: 1px solid; overflow-y: auto;">
</div>
<div align="center" style="width: 450px;">
<input type="button" value="↓" οnclick='htmlsource.value=editArea.innerHTML;'>
<input type="button" value="↑" οnclick='editArea.innerHTML=htmlsource.value;'>
</div>
<div>
<textarea id="htmlsource" name="htmlsource" cols="62" rows="10"></textarea>
</div>
</body>
</html>

实现原理：

1.将id为editArea的div元素添加contenteditable，这个div则拥有了编辑的功能，document执行的execCommand函数就能针对这个div中选中的区域进行相应的操作。

2.至于document的execCommand函数怎么用的，网上有很多解释，我就不重复说了。

效果图如下所示：（在chrome和IE8下显示的html源码有点不同，换行回车，chrome用<div>表示的，而IE8则用<p>表示的）

chrome：


IE8:





koself
关注
专栏目录
javascript 简单文本编辑器
11-02
JavaScript 简单文本编辑器是一种轻量级的、基于Web的代码编辑工具，它主要由JavaScript编程语言构建，用于创建基本的文本编辑功能。这种编辑器通常适用于快速编写和预览简短的文本，如几句话或一小段代码。在网页...
js - 支持word上传的富文本编辑器
Mr_Zang666的博客
07-19 583
但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容，如果上传到服务器后其他人也访问不了，网上找了很多编辑器发现没有一个能直接解决这个问题。发现不管什么编辑器只要将图片转换成base64后就可以直接使用（IE8及一下可能不支持），由于编辑器中添加word文档功能也只是自己用，因此可以忽略这种浏览器了。这个时候我们在编辑器中使用jsonp获取到处理完的图片数据替换原来的file:///xxxxxx.jpg路径就搞定了。所有图片都能够保存在服务器中，而且支持分布式图片存储。
几大开源免费的 JavaScript 富文本编辑器测评
玖涯博客
03-09 2万+
MarkDown 编辑器用的时间长了，发现发现富文本编辑器用起来是真的舒服。
JS – 支持WORD上传的富文本编辑器
最新发布
alisky119的博客
09-09 2184
功能：一键导入Word转HTML，不装控件，不装Office，平台：Windows,macOS,Linux,安卓Android,苹果iOS,鸿蒙HarmonyOS)
探索新一代文本编辑器：Editor.js
gitblog_00047的博客
05-10 625
探索新一代文本编辑器：Editor.js editor.jsA block-style editor with clean JSON output项目地址:https://gitcode.com/gh_mirrors/ed/editor.js 在数字化的时代，一款高效的文本编辑器是不可或缺的工具。让我们一起深入了解Editor.js，一个创新的开源文本编辑器，旨在提供更优质的写作体验和灵活的数据...
html+css+js实现文本编辑器
jakelihua
01-14 1399
本文讲解，如何制作使用html+css+js实现一个好看的文本编辑器。
整理15款实用javascript富文本编辑器 转自136go
热门推荐
lin520wei的专栏
11-12 4万+
1 百度UEditor 官方网址：http://ueditor.baidu.com/website/ UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码... 2bootstrap-wysiwyg 官方网址：http://www.bootcss.com/p/boots
TinyMCE富文本编辑器资源包
02-23
TinyMCE是一款强大的开源富文本编辑器，广泛应用于网页内容编辑和内容管理系统中。这个"TinyMCE富文本编辑器资源包"包含了TinyMCE的最新版本——版本6的相关资源，旨在提供一个功能完备、易用且高度可定制的文本编辑...
javascript 在线文本编辑器实现代码
10-29
JavaScript在线文本编辑器是一种网页应用，它允许用户在浏览器中编辑和格式化文本，类似于Microsoft Word等桌面应用程序。实现这样的编辑器通常涉及到HTML、CSS和JavaScript的综合运用，特别是利用DOM（Document ...
Javascript实现简单的富文本编辑器附演示
10-25
主要介绍了通过Javascript实现的简单富文本编辑器,需要的朋友可以参考下
PHP版百度富文本编辑器ueditor
08-08
**PHP版百度富文本编辑器ueditor** 在Web开发中，富文本编辑器是不可或缺的工具，它允许用户以类似于Microsoft Word的方式创建和编辑内容，然后以HTML格式存储。其中，百度开发的ueditor是一款非常受欢迎的开源富...
免费JS富文本编辑器 总有一款会适合你
极客小俊
11-19 2万+
什么是富文本编辑器? 概述: javascript Text Editor ​ 我们平常在页面上写文章 或者 后台发布文章内容、或内容描述等、一直都是用的是富文本编辑器,包括很多论坛发帖的文字窗口也是典型的富文本编辑器, 它跟office中的word界面非常类似! 富文本编辑器的使用是与word非常类似的,所见即所得的排版方式,操作也与word类似，点击鼠标使用相应功能就行,对用户而言使用上相对比较简单，也比较容易进入状态! 如图 总的来说富文本编辑器就是一种基于JS并且可内嵌于web浏览器中所见即
基于 JavaScript 的富文本编辑器框架简单使用
m0_62785037的博客
08-03 733
WangEditor 是一个基于 JavaScript 的富文本编辑器框架，用于在网页中实现富文本编辑功能
HTML中使用JS实现文档编辑器
weixin_44488927的博客
07-03 1244
本篇是介绍一款tinymce富文本实现编辑器。TinyMCE是一个轻量、简洁、功能强大的编辑器，跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。首先要引入TinyMCE脚本，直接在head中引入tinymce.min.js文件 但是上面这种引入需要在官网申请一个api_key,不过是免费的，如果你觉得麻烦，就到官网吧 社区版及开发版官方最新打包地址：https://www.tiny.cloud/get-tiny/self-hosted/ 不过官网下载比较慢，国外网站嘛。
JavaScript写一个最简单的富文本编辑器
TANKING，开源开发者！
03-21 1251
当用户点击按钮时，对应的 JavaScript 函数会调用。方法，它会将当前选中文本的样式或属性修改为函数指定的值。方法，从而改变当前选中的文本的样式或属性。方法在一些浏览器中已经被废弃，我们需要考虑使用其他替代方案。当用户点击按钮时，对应的函数会被调用，然后执行。
如何选择开源富文本编辑器？
mnilz的博客
02-23 383
StackEdit 是一款基于 Web 的在线 Markdown 编辑器，使用者可以通过它轻松编辑 Markdown 文档、同时还可以直接将 Markdown 文档同步到一些云端存储服务如 Dropbox 、Google Drive 、GitHub 等，这是 StackEdit 的另一大特点。无论你是一位专业的开发人员，还是一个有兴趣的学习者，这些开源编辑器将带给你无限的创造空间，同时可以轻松扩展和自定义，让你的工作更加高效和愉悦。它使用可扩展的、可配置的、可组合的模块来管理文本内容的编辑。
js简单的文本编辑器（所见即所得）
平常心
09-20 4915
项目页面需要一个简单的文本编辑器，网上的那些富文本编辑器功能都很强大，很多东西用不到，所以自己用js写了一个简单的文本编辑器。 代码如下： 简单文本编辑器 <div style="width: 450px; height: 30px; border-top: 1px solid; border-left: 1px solid; border-right: 1px soli
Vue2-Editor：一款基于Vue.js的富文本编辑器
gitblog_00043的博客
03-23 793
Vue2-Editor：一款基于Vue.js的富文本编辑器 项目地址:https://gitcode.com/gh_mirrors/vu/vue2-editor Vue2-Editor是一个强大的、可定制的富文本编辑器，它充分利用了Vue.js的灵活性和高效性，为开发者提供了一种简单的方式来在Web应用中集成文本编辑功能。通过上的开源项目，你可以直接获取并开始使用这个组件。 技术分析 Vue2-E...
JavaScript实现简单文本编辑器源码分享
资源摘要信息: "本资源为一款使用 JavaScript 编写的简单文本编辑器项目，该项目包含源代码文件。它模拟了官方的 Wordpad 应用程序，是一个适用于 Web 环境的单页文本编辑工具，提供了与 Microsoft Word 类似的功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值