,用户需要快捷的复制一些相关的信息,然后进行下一步信息的填写。...想直接参考 react 使用的可以看 使用react和typescript改写和优化一下 大概设计如下,有多条信息,然后用户可以点击右边的复制 icon 进行快捷的复制。 ?... 如何使用copyme import React, { Fragment } <span class="hljs-keyword
一、项目介绍 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+nodejs 等技术混合开发的仿微信web端聊天室reactWebChat...react-dom 状态管理:redux / react-redux 页面路由:react-router-dom 弹窗插件:wcPop 打包工具:webpack 2.0 环境配置:node.js...--env=jsdom", "eject": "react-scripts eject" } } react-router-dom页面地址路由配置: /* * @desc 页面地址路由js...sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === $(".J__wcEditor")[0])) { var range = sel.getRangeAt...= { getRange: function () { if (_sel && _sel.rangeCount > 0) { return _sel.getRangeAt
vue2.0仿微信聊天室|vue-chatRoom实例项目|vue全家桶仿微信聊天app 基于vue+vuex+vue-router+webpack2.0+es6+wcPop+iconfont等技术开发的仿微信界面聊天室...技术栈 MVVM框架:Vue.js 2.0 状态管理:Vuex 页面路由:Vue-router 弹窗插件:wcPop 打包工具:webpack 2.0 环境配置:node.js + cnpm 图片插件:...20190404103720931.png 017360截图20190404103734242.png 018360截图20190404103753065.png 页面地址路由、登录拦截: /* * 页面地址路由js...== 3 && sel.anchorNode.parentNode === $(".J__wcEditor")[0])) { var range = sel.getRangeAt...getRange: function () { if (_sel && _sel.rangeCount > 0) { return _sel.getRangeAt
今天为大家带来的是全新开发的Vue3.x实战聊天室项目Vue3_Chatroom,基于vue3+vant3+vuex+vue-router+v3popup等技术搭建的聊天实例。...vue.js自定义顶部topbar和底部tabbar组件 Vue3自定义弹框组件 vue3chat中用到的弹框场景,都是最新开发的vue3.0自定义弹框V3Popup组件实现。...vue3.0系列之自定义手机端弹框组件|vue3全局弹层组件v3popup vue.config.js自定义配置 项目中的一些路径别名alias配置,避免过多的../../路径。.../router' import '@assets/js/fontSize' // 引入公共组件 import Plugins from '....&& sel.rangeCount) { range = sel.getRangeAt(0) let el
、项目介绍 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开发的web...react / react-dom 状态管理:redux / react-redux 页面路由:react-router-dom 弹窗插件:wcPop 打包工具:webpack 2.0 环境配置:node.js...20190619231933711.png 014360截图20190619232415011.png 017360截图20190619232643033.png /* * @desc 页面地址路由js...sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === $(".J__wcEditor")[0])) { var range = sel.getRangeAt...= { getRange: function () { if (_sel && _sel.rangeCount > 0) { return _sel.getRangeAt
if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'PRE') { newdiv.innerHTML = "<pre...那么问题来了,在真正复制内容时selection.getRangeAt(0).commonAncestorContainer.nodeName究竟是不是PRE呢,我们使用console.log()输出看看...从结果可以看出,当在复制内容时selection.getRangeAt(0).commonAncestorContainer.nodeName的值是CODE,而不是PRE。...if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'CODE') { newdiv.innerHTML = "<pre...if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'CODE') { newdiv.innerHTML = "<pre
前言 在官方最新版本的Matery主题版本中已经优化了代码块的问题,但在旧版本Hexo主题Matery中对hexo-prism-plugin只支持高亮显示,而且存在着许多的BUG。...代码块JS添加 打开目录themes\matery\source\libs,新建一个名字为codeBlock的目录,然后打开该目录。...在themes\matery\layout\_partial\post-detail.ejs文件中,大约在222行左右找到 selection.getRangeAt(0).commonAncestorContainer.nodeName...,将原先if条件中的的PRE修改为CODE即可。...if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'CODE') { newdiv.innerHTML = "<pre
,用户需要快捷的复制一些相关的信息,然后进行下一步信息的填写。...DocumentOrShadowRoot.getSelection(), Selection.rangeCount, Selection.getRangeAt(), Selection.removeAllRanges...document.getSelection().getRangeAt(0) // Store selection if found : false;...selection.getRangeAt(0) : false; targetNode.focus(); // focus 我们需要的文本 range.selectNodeContents...)} ); }; export default Item; 必要 api 参考 window/getSelection Selection/getRangeAt
在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的。...var selection = getSelection(); // 设置最后光标对象 lastEditRange = selection.getRangeAt...var selection = getSelection(); // 设置最后光标对象 lastEditRange = selection.getRangeAt...// 如果是文本节点 } else { // 获取光标对象 var range = selection.getRangeAt...selection.addRange(range); } // 记录最后光标对象 lastEditRange = selection.getRangeAt
(sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === _editor)) { var range = sel.getRangeAt...document.selection.createRange().pasteHTML(img); }else if(window.getSelection && window.getSelection().getRangeAt...){ range = window.getSelection().getRangeAt(0); range.insertNode(img); range.collapse(false...editor.focus(); _editor.blur(); //输入表情时禁止输入法 setTimeout(function(){ range = window.getSelection().getRangeAt
var node = document.createElement('div'); node.appendChild(window.getSelection().getRangeAt...pboot:pageurl}' + ''; var textData = window.getSelection().getRangeAt
稍稍有些小遗憾的是:它不能“针对每个字体设置不同的重点标志”,所以常常只用来做辅助突出功能 ★笔者一直认同的是:能用HTML完成的就不用CSS,能用CSS的就不用JS。...= "") { var rang = selecter.getRangeAt(0); var ele = document.createElement("span"); ele.style.cssText...ele.className = className; ele.textContent = selectStr; rang.surroundContents(ele); } } selecter.getRangeAt...(0):selection API是将每次选中的都保存到内部的数组里,而且是最新的保存到第一个这样的顺序。...我建议,在点击页面其余空白地方时改变状态 —— 因为为了更好的体验,上面选中使用的mouseup:这里涉及到一个“浏览器事件触发的优先级”。你可以让文本处于“高zIndex区域”、或者用JS去隔离。
:布尔值,表示选区的起点和终点是否重合 rangeCount:选区中包含的DOM范围的数量 方法 addRange(range):将指定的DOM范围添加到选区中 collapse(node,offset...):通过将focusNode和focusOffset移动到指定的值来扩展选区 getRangeAt(index):返回索引对应的选区中的DOM范围 removeAllRanges():从选区中移除所有DOM...方法 getRangeAt(index):从当前selection对象中获得一个range对象。... js...that.range.moveStart("character",-1); }else{ that.range=window.getSelection().getRangeAt
最近在做一个后台管理系统,要求可以对前台用户的作品进行评论,而评论要可以输入表情,常规的文字输入框都是用的文本域textarea来做的,但这种输入框只能输入文字,没有办法输入表情图标,这个时候可编辑div...selection对象的 getRangeAt() 方法获得,实现在光标处插入图片后将光标移到图片后边,就是使用这两个对象中的方法。...基本的实现步骤是这样的,首先获得 selection 选区对象,再获得范围对象 range,创建图片节点,将图片节点插入到范围中,接着将范围收缩为它末端的一个点,最后将选区清除,将收缩后的范围重新添加到选区中即可...,以下是核心的代码实现。...(sel && sel.rangeCount === 1 && sel.isCollapsed) { // 获取范围 var range = sel.getRangeAt
day03_js学习笔记_03_js的事件、js的BOM、js的DOM =================================================================...五、js的事件 1、js的常用事件 onclick 点击事件 onchange 用户改变域的内容事件...(开发中用的多) 3、阻止事件的默认行为 4、阻止事件的传播(相当于阻止事件冒泡) 六、js的BOM (1) Window对象(窗口对象...学习笔记_03_js的事件、js的BOM、js的DOM -------------------------------------------------------------------------...---- 一、js的简介 二、js的基本语法 三、js的内建对象 四、js的函数(相当于java中的方法) ----------------------------------------------
在core.js执行的时候读取这段文本,然后动态执行一次。浏览器不会执行之间的代码 html中的事件处理程序 当脚本所在的html文件被载入的时候。脚本里的js会执行一次。...为了可交互,js会定义事件处理程序即web浏览器先注册函数,并在之后调用其作为事件的响应。其中事件处理程序的属性可以包含任意条js语句。相互之间用逗号分隔。...url中的js 应用用途 书签 通过协议类型指定url内容为任意字符串,该字符串是会被js解释器运行的js代码,其会被当成单独的一行代码实现。即语句之间必须使用分号作为分割。 即,书签的实现。...事件驱动的js js还能通过注册事件程序函数写程序。之后在发生该事件的时候异步调用这些函数。 程序会响应一个事件,然后调用一个函数,该函数称为事件处理程序,事件监听器,或者回调,将该函数注册。 ...将一个监听器和回调函数绑定,当监听器被触发的时候,回调函数将会被触发。 客户端js线程模型 js的客户端为单线程模型。
效果可以看本博客的评论框 [collapse title="特效JS代码"] (function webpackUniversalModuleDefinition(a,b){if(typeof exports...return{x:u.left+v.left,y:u.top+v.top,color:m(t)}}var s=window.getSelection();if(s.rangeCount){var q=s.getRangeAt...true;POWERMODE.shake=false;document.body.addEventListener("input",POWERMODE); [/collapse] 将其上面代码复制进一个新建的js... 博主只在目前使用的模板测试成功使用,其他模板自测。
angular8.0仿微信聊天室|angular即时聊天IM系统|仿微信界面angular 运用angular+@angular/cli+@angular/router+@ngrx/store等技术实现开发的移动端聊天室...@angular/router 状态管理:@ngrx/store + rxjs 地址路由:@angular/router 弹窗组件:wcPop 打包工具:webpack 2.0 环境配置:node.js...sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === $(".J__wcEditor")[0])) { var range = sel.getRangeAt...= { getRange: function () { if (_sel && _sel.rangeCount > 0) { return _sel.getRangeAt
项目中使用到的弹窗及滚动条功能均是自定义组件实现功能效果。图片项目中用到的UI组件库,字节跳动前端UI库arco-design。...,让它在用户等待的时候显示 // 路由懒加载报错:react-dom.development.js:19055 Uncaught Error: A component suspended while...zustand一款轻量级的支持react18 hooks语法的状态管理,类似vue3 pinia状态管理工具。...sel.removeAllRanges() sel.addRange(lastCursor.current) } if(sel.getRangeAt...&& sel.rangeCount) { range = sel.getRangeAt(0) range.deleteContents()
h5开发的微信端智慧办公——weDingTalk项目,运用到了html5+css3+jquery+swiper+wcPop等技术进行开发,其中wcPop.js弹窗插件又进行了一次全面升级(新增全屏弹窗)...,另外项目中多处应用到了Material Design波纹效果,很多地方的1px进行了细化处理。...(sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === _editor)) { var range = sel.getRangeAt...window.getSelection(); var _rng = { getRange: function () { if (_sel && _sel.rangeCount > 0) { return _sel.getRangeAt...inArray(fileExt, fileTypeArr) < 0) { wcPop({content: '附件只支持jpg、jpeg、png、gif、txt、rar、zip、pdf、docx、xls格式的文件
领取专属 10元无门槛券
手把手带您无忧上云