draft.js编辑器开发笔记

一：焦点控制

需求：光标在输入框内的时候，点击上方的格式按钮，不能让输入框失去焦点

解决方案：将格式按钮事件绑定在onmousedown事件上，并阻止默认事件。不要用click事件

二：父子组件通信

需求：父组件调用字组件内的方法

方案：通过this.refs.name.方法名实现调用

三：位置自适应的提示语组件：

需求：

方案：

分离为Tips组件，接收如下四个props：

parentDom：相对定位的父级（即包裹Tips组件的父级元素）
targetDom：响应提示语的dom标签（此处即button列表）
topTune：高度微调值
leftTune：left微调值（即响应提示组件的Dom标签的宽度）
title：提示语

难点：

Tips组件居中问题：需要获取到不同提示语下的的tips组件中，span元素的宽度，然后结合leftTune，计算出实际的left值，实现居中；
小三角居中问题：通过after实现的小三角，利用calc属性实现居中

组件核心代码：

draft.js编辑器开发笔记相关推荐

Unity编辑器开发笔记
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录注意事项 Inspector面板一些常用C#特性重写Inspector面板顶部菜单栏弹出窗口注意事项编辑器开发的代 ...
《Node.js入门》Windows 7下Node.js Web开发环境搭建笔记
最近想尝试一下在IBM Bluemix上使用Node.js创建Web应用程序,所以需要在本地搭建Node.js Web的开发测试环境. 这里讲的是Windows下的搭建方法,使用CentOS 的小伙伴 ...
Android开发笔记（六十四）网页加载与JS调用
内置浏览器网页视图WebView 如果一个网站已经有现成的网页及业务逻辑,那么使用WebView将其内嵌到app中,省去了app重画页面与http通信的事情,无疑是更经济的做法.WebView就是A ...
prototype.js开发笔记(转)
prototype.js开发笔记 Table of Contents 1. Programming Guide 1.1. Prototype是什么? 1.2. 关联文章 1.3. 通用性方法 1.3. ...
微信小程序开发笔记进阶篇③——onfire.js事件订阅和发布在微信小程序中的使用
文章目录一.前言二.onfire.js介绍三.API介绍四.实例应用五.onfire源码六.实例源码一.前言微信小程序开发笔记--导读二.onfire.js介绍一个简单实用的事件订 ...
node.js服务端笔记文档学会写接口，学习分类：path、包、模块化、fs、express、中间件、jwt、开发模式、cors。
node.js 学习笔记 node.js服务端笔记文档学会写接口,path.包.模块化.fs.express.中间件.JWT.开发模式.cors. gitee:代码接口笔记 1什么是node.js n ...
Java 开发笔记 - wangEditor 编辑器图片上传
Java 开发笔记 - wangEditor 编辑器图片上传前言转型 java 开发后入手的第一个项目,写写博客记录一下该项目使用的是 sping boot + mybatis plus + t ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器)，并批量上传图片
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器),并批量上传图片技能学习:学习使用php(tp6框架) + ...
微信小程序开发笔记——wsdchong
微信小程序开发笔记一.小程序简介小程序起源于微信的webview:此类API最初是提供给腾讯内部一些业务使用,很多外部开发者发现后,照葫芦画瓢,逐渐成为微信中网页的事实标准.2015年初,微信发布 ...
iphone开发笔记和技巧总结
在iphone程序中实现截屏的一种方法: //导入头文件 #importQuartzCore/QuartzCore.h //将整个self.view大小的图层形式创建一张图片imageUIGrap ...

draft.js编辑器开发笔记

draft.js编辑器开发笔记相关推荐

最新文章

热门文章