基于React的可编辑在线简历模板

codecook 发布于2019-08-22 15:20 / 2829人阅读

摘要：总结最后介绍一下整个页面的功能可以对每个字段进行编辑可以对列表字段随意添加移动删除可以直接使用的语法来插入链接可以上传本地头图可以保存为三种格式在线预览地址戳我仓库戳我，欢迎

在线预览地址：戳我

GitHub仓库: 戳我，欢迎star

介绍

技术栈为纯React。接下来介绍一些稍微重要的技术点：

contentEditable

核心的编辑功能用到了HTML5的 contentEditable 属性，但是在 react 中，你不能直接写下面的这种组件


    hello world

这会被 react 提示警告：

试想，平时的 react 组件的 children 都是我们写好内容并控制更新，而不是交给用户去随意更改。就算是可以随意更改的组件，它的初始值也是一个 html 的 attribute 而不是 dom 的属性。

回到 contentEditable，一个带 contentEditable 的组件被更改后，其 children 的内容实际上并没有随着 dom 的更改而更新，这有点类似非受控组件，但是非受控组件并不带 children，刚才说到的，用一个 html attribute 来初始值，并通过 onChange 来获取 value 的更新。

然后我在 npm 上随便翻了下，果然有可以直接用的 contentEditable 组件，看了下源码，核心思想就是：

写一个普通的元素，比如 span，赋予 contentEditable 属性，不带 children ，然后用 dangerouslySetInnerHTML 来初始化，通过 onInput 来监听每次修改，通过 ref 来获取 innerHTML 就可以将编辑后的内容传递给 props 中的 onChange，没有了 children 的冗余，组件只是在维护一份 innerHTML。这就解决了普通的 contentEditable 的两大痛点：1. 非受控 2. 状态冗余。

这里我没有直接使用 npm 上现成的组件库，因为需要比较多的钩子函数和自定义的功能，所以按照这个思路定制了一个具有 contentEditable 属性的组件。

List

还有一个问题是 List，需求是这样：右键单击 List 中任意一个 item 会弹出菜单，可以调整 List 中 items 的顺序，如图：

通过维护一个类似 key 的 index prop 来标注所有 item 的顺序，item 根据初始化的顺序有一个从 1 开始的 index prop，在 List 的 state 中维护一个数组来记录所有 item 的顺序，插入 / 移动 / 删除对应的 item 时更新数组，render 函数再根据数组中标记的顺序来渲染，每次只渲染移动的 item。

总结

最后介绍一下整个页面的功能：

可以对每个字段进行编辑

可以对列表字段随意添加移动删除

可以直接使用 markdown 的 []() 语法来插入链接

可以上传本地头图

可以保存为 PNG, PDF, HTML 三种格式

在线预览地址：戳我

GitHub仓库: 戳我，欢迎star

GPU云服务器云服务器 html表格的可编辑简历模板 html工作简历模板个人简历网页模板

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93389.html

GitHub 值得收藏的前端项目[每月更新...]

摘要：也是一款优秀的响应式框架站点所使用的一套框架为微信服务量身设计的一套框架一组很小的，响应式的组件，你可以在网页的项目上到处使用一个可定制的文件，使浏览器呈现的所有元素，更一致和符合现代标准。 GitHub 值得收藏的前端项目整理与收集的一些比较优秀github项目，方便自己阅读，顺便分享出来，大家一起学习，本篇文章会持续更新，版权归原作者所有。欢迎github star与fork 预...

maxmin 2019-08-29 16:07 评论0 收藏0
其实，前端还可以这样做简历

摘要：接下来，亮出自己做的简历。登录进入后，就可以选择一个你喜欢的简历模板进行制作简历了。将页面左边的工具栏拿掉，然后将简历宽度放大到接近浏览器宽度即可达到像素最高的效果。此外，会自动保存你做的简历，方便下次编辑。以下文章摘自我的博客，原文链接下面的简历图片不上传了，想看的点击原文链接就能看到了。简述下原理：首先找一个可以在线制作简历并提供简历模板的网站，然后在模板上填好自己的信息，并...

zhaochunqi 2019-08-20 14:43 评论0 收藏0
vue开发可在线编辑简历的webApp

摘要：例如第二步在根目录下也就是中添加一个文件夹，文件夹名称为第一步中二级域名的前缀，也就是然后将你的项目或者其他项目添加入该文件夹中。项目初始在一个阳光明媚的下午，学院就业指导老师让我们每个人做一份简历，然后打印上交。后回到宿舍，苦苦在网上寻找，未果。因为不要钱的模板太丑，好看的模板得花钱...，像我等穷逼，哪里有什么闲钱。于是，果断下载了个丑不拉几的模板，打开word随便填了填交了上...

CatalpaFlat 2019-08-22 16:02 评论0 收藏0
react文档 Hello World

摘要：最小的示例如下它会显示一个的标题在页面上。指南的指南在这个指南中，我们将会检验的建筑模块和元素和组件。这是循序渐进的指南关于原则的第一章。它可能会花半小时到一个小时，但是好处是你不会感觉同时在学习和。注意此指南偶尔在示例中采用新的语法。 Hello World 最小的 React 示例如下： ReactDOM.render( Hello, world!, documen...

xuhong 2019-08-23 10:39 评论0 收藏0