『前端学习实例』 HTML文本编辑功能实现（Javascript）

最新推荐文章于 2024-06-28 18:05:08 发布
最新推荐文章于 2024-06-28 18:05:08 发布
阅读量877 收藏 2
点赞数
分类专栏： 前端学习实例 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GLZX_HM/article/details/107635844
版权
本文档通过一个前端学习实例展示了如何利用HTML的contenteditable属性和JavaScript DOM、点击事件来实现文本编辑功能。功能包括使HTML内容变为可编辑、编辑后的内容展示，以及编辑状态的切换。
摘要由CSDN通过智能技术生成

参考文档：JavaScript 教程 W3school


文章目录



功能需求

  • 实现HTML界面文字内容的可编辑（H5中的contenteditable属性）。
    （使用Javascript DOM和点击事件）



结果展示

  • 默认状态：
    在这里插入图片描述

  • 点击文本内容：
    在这里插入图片描述

  • 编辑内容：
    在这里插入图片描述

  • 点击输入框之外：
    在这里插入图片描述

  • 再次点击（还可以继续修改）：
    在这里插入图片描述



源代码



index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=
最低0.47元/天 解锁文章
大熊软糖M
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
用JS写在线JavaScript编辑器 - 基于CodeMirror
weixin_52022921的博客
08-16 6351
JS编辑器-基于CodeMirror
超文本标记语言（html）之文字编辑
yysyyssmdsmd的博客
03-06 2123
前端基础知识
前端vue使用onlyoffice控件实现word在线编辑、预览（仅列出前端部分需要做的工作，不包含后端部分）
最新发布
个人博客
06-28 3699
ONLYOFFICE 文档 是一个开源办公套件，包括文本文档、电子表格、演示文稿和可填写表单的编辑器。它提供以下功能：创建、编辑和查看文本文档、电子表格、演示文稿和可填写表单；与其他队友实时协作处理文件。基于这个控件，可以实现前端word、excel、pdf等文件在线编辑、预览，可以说非常强大，目前项目中只使用到word编辑预览，但拓展其他文件也非常简单，完善类型传参，更改onlyoffice配置参数中的文件类型即可。
Vue+SpringBoot 集成 PageOffice 实现在线编辑Word、excel文档
Java笔记虾
06-24 2526
说明：PageOffice是一款在线的office编辑软件，帮助Web应用系统或Web网站实现用户在线编辑Word、Excel、PowerPoint文档。可以完美实现在线公文流转，领导批阅，盖章。可以给文件添加水印，在线安全预览防止用户下载和复制文件等一、环境要求前端Vue项目：Node.js10及以上版本（当前集成方式不支持vue3，原因是vue3不兼容ie。vue3集成pageoffice参考...
WEB前端实现在线预览、编辑Office文档
nuclear2011的博客
05-28 1万+
WEB前端实现在线预览、编辑Office文档 这篇文章介绍如何在web前端引入JS插件实现在线预览、编辑Office文档。 使用插件：Spire.Cloud在线Office文档编辑器（官网：https://cloud.e-iceblue.cn/） 重点：该方案仅需浏览器支持HTML5，不需要安装Office或控件，也不需要做环境配置就可以直接调用插件，非常简单。 准备工作 首先，使用浏览器打开：https://cloud.e-iceblue.cn/，点击右上角头像注册/登录账号。 其次，点击
web前端在线预览，编辑word文件的方法汇总（2021-7-14更新）
热门推荐
qq_41312395的博客
11-02 3万+
预览doc文件的方法首先我要声明，纯前端无法实现doc文档预览，只能通过其他手段（如第三方，或者自己通过和后端大大沟通）1.微软提供的 office在线预览地址：2.docx3. officeweb365.com4.kkFileView5. 后端大大配合你实现6.总结以上 声明：如果怕收费或者其他的什么，请直接点击第5点，让后端大大配合你实现 首先我要声明，纯前端无法实现doc文档预览，只能通过其他手段（如第三方，或者自己通过和后端大大沟通） 1.微软提供的 office在线预览地址： https://vi
前端实现富文本编辑器功能
10-19
在前端实现富文本编辑器功能时，开发者通常会借助第三方库或者插件来简化工作，其中`wangEditor`是一个受欢迎的选择。`wangEditor`是一款基于JavaScript的开源富文本编辑器，它轻量级、易用且功能强大，适合快速构建...
HTML前端wangEditor富文本编辑器demo（jQuery）
02-14
wangEditor就是这样一个强大的富文本编辑器，它专为JavaScript和jQuery设计，同时也能很好地融入Vue等现代前端框架。本示例是一个基于jQuery的wangEditor应用，具有丰富的功能，包括图片可拖拽调整大小，以及方便地...
前端学习案例合集，各种前端小案例实现源码.zip
05-14
前端学习案例介绍：项目中包含了 HTML、CSS、 JavaScript、JQuery、Vue等相关学习案例。 有多个文件的案例，放在了code文件夹中。 目录 01-B站移动端首页框架仿写 02-Js实现比较两个数大小和清空 03-彩色文字 04-...
157个HTML+CSS+JavaScript前端开发24实例
10-10
这个名为"157个HTML+CSS+JavaScript前端开发24实例"的压缩包文件，很显然提供了丰富的实践案例，帮助学习者深入理解和掌握这三种语言的应用。 首先，HTML（HyperText Markup Language）是网页的基础结构，用于定义...
JavaScript简单实现关键字文本搜索高亮显示功能示例
12-10
本文实例讲述了JavaScript简单实现关键字文本搜索高亮显示功能。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
js+html实现的Table可编辑
04-26
此代码是实现单击操作表格，用js和css 简单的实现类似于编辑器中的table
html 清爽简易的富文本编辑器
12-26
效果查看地址：https://blog.csdn.net/qq_25623257/article/details/103714875
HTML文本编辑标签
qq_59933216的博客
12-31 815
HTML基础——文本编辑标签：HTML标题、HTML段落、HTML换行、 HTML缩小文字、HTML保留文本格式、HTML注释（注音等）、HTML下标、HTML上标、HTML粗体、HTML斜体、HTML高亮、HTML分割线、HTML删除线、HTML下划线、HTML缩写、 HTML文本显示方向、HTML插入图片、HTML超链接。下一期我将出一个网页新闻的小案例巩固今天所学的内容！
可视化h5界面编辑器_超优秀 H5可视化制作编辑器H5DS
weixin_29028611的博客
02-05 6436
今天给大家推荐一款超棒的H5可视化网页制作编辑工具H5DS。h5ds基于技术栈前端：React+Mobx+Less+jQuery后端：NodeJs+Ngnix+MySQL工具：Babel+Webpack+Gulp项目模块架构项目结构安装$ npm i h5ds -S快速使用import React, { Component } from 'react'import H5dsEditor from...
用HTML和Javascript编写一个可在线编辑并存储表格的网页
涂宇鸽的博客
03-24 2861
1. 界面 原始界面： 编辑界面： 2. 写代码时参考的教程 JavaScript BookList App | No Frameworks Allowing users to edit text content with html5 W3School content editable 3. 我的代码：HTML Part <!DOCTYPE html> <html lang="...
JavaScript怎么保存html,使用javascript保存html文件
weixin_33501348的博客
06-10 1465
我使用的是javacsript来读取html文件的内容，我也改变了内容..但我无法保存该文件.. 我正在阅读和更改HTML文件的内容为：使用javascript保存html文件function edittheme(headtext, totext, bodytext, footertext) {alert(headtext);var xmlDoc;if (window.ActiveXObject)...
前端实现内网在线excel编辑和word在线编辑相关建议
weixin_44736549的博客
11-15 2721
1、实现内网在线excel编辑 涉及插件 luckysheet插件 (注意该插件仅支持xlsx类型，老版本xls不支持)，兼容老版本xls 就需要 后端 将xls文件转换成xlsx文件， 再返回 相应的 xlsx类型 二进制文件流，然后 前端 通过 二进制 文件流 转换成 对应的 file，通过file 使用 luckyExcel.transformExcelToLucky进行解析回显成相应的 excel。其中 转成file 核心代码。
HTML文本编辑
为自己加油gh的博客
10-23 519
音乐的魅力     生命如水，岁月如歌。当我们经历着四季变换，花开花谢，每天清晨感受着朝阳的温暖与晨露的滋润，聆听着山涧泉水的 叮咚，封闭已久的心灵不经意间被它开启，才发现天空是那样的清澈而蔚蓝;花草是那样的艳丽而娇美，流水是那样的轻柔而活泼，擦 肩而过的陌生人是那样的和蔼而可亲……原来，人生是这样的缤纷 而多彩。    为了保证全光网的透明性并保证信号在长途传送网
掌握HTML基础与JavaScript技巧：实例解析
这份文档适合初学者学习HTML的基础语法和基本的前端交互逻辑，同时也为深入理解JavaScript和CSS打下坚实基础。对于Web开发者来说，掌握这些基础知识至关重要，无论是在静态页面构建还是动态网页开发中都能派上用场。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大熊软糖M

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值