前端 - 360US

Nodejs 数组Array去重的方法

在 `Node.js` 中，你可以使用多种方法对数组进行去重。以下是几种常见的方法： - **方法一：使用 Set** `Set` 是 `ES6` 中引入的一种数据结构，它只存储唯一的值。你可以利用它来对数组进行去重。 ```js const array = [1, 2, 3, 4, 4, 5, 5, 6]; const uniqueArray = [...new Set(array)]; console.log(uniqueArray); // [1, 2, 3, 4, 5, 6] ``` - **方法二：使用 filter 和 indexOf** 你可以使用 `filter` 方法结合 `indexOf` 来过滤掉重复的元素。 ```js const array = [1, 2, 3, 4, 4, 5, 5, 6]; const uniqueArray = array.filter((item, index) => array.indexOf(item) === index); console.log(uniqueArray);...

发布日期： 2024-06-21 分类：前端浏览量： 1104

ReactJS + NextJS集成CKEditor5富文本编辑器

按照官方文档里面React的集成方法做，从其他页面跳转到编辑器页面是没有问题的，但是你要点击刷新按钮刷新整个编辑器所在页面时就会报错了：`ReferenceError: self is not defined` 本文解决的是这个问题。新增文件`components/Editor.jsx`： ```jsx import React, { useEffect, useRef } from "react"; const editorCfg = { language: 'zh-cn' } function Editor({ onChange, editorLoaded, name, data }) { const editorRef = useRef(); const { CKEditor, ClassicEditor } = editorRef.current || {}; useEffect(() => { editorRef.current = { CKEditor...

发布日期： 2023-04-28 分类：前端浏览量： 1413

material-ui的makeStyles创建的css样式如何用在class组件里面

material-ui的官方示例css都是用`makeStyles`创建的，用在`function`组件上。但是如果我用的是`class`组件该怎么用呢？答案是用不了。 `makeStyles`只能用在`function`组件上，要在`class`组件上使用需要用`withStyles`。用法如下： ```js import React, { Component } from 'react'; import { withStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; const styles = { root: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', border: 0, borderRadius: 3, boxShadow: '0 3px 5px 2px rgba(255, 105...

发布日期： 2020-01-03 分类：前端浏览量： 4835

CKEditor5 支持上传图片配置（integrate CKFinder with CKEditor 5）

**editor config**： ```javascript ClassicEditor .create( editorElement, { ckfinder: { uploadUrl: '/ckfinder/upload.php' #配置上传地址 } } ) .then( ... ) .catch( ... ); ``` `uploadUrl` response format，服务器响应格式: ```json { "uploaded ": true, "error": { "message": "no error" }, "url": "https://example.com/upload/images/213432434.png" } ``` ```json { "uploaded ": false, "error": { "message": "file extension not allow" ...

发布日期： 2018-11-23 分类： Javascript 浏览量： 6865

html页面模板

这是一份写HTML的样板，每写一个新的HTML页面都可以用它来初始化。 <!doctype html> <html> <head> <meta charset="utf-8">  <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>My Site</title> ...

发布日期： 2015-06-24 分类： HTML/CSS 浏览量： 3679

pjax的用法

pjax=ajax + pushState。像github上面点击一个链接都会有个load的动画，github用的就是pjax加载的这些链接内容。这里用jQuery的pjax库：jquery-pjax.js，github地址：https://github.com/defunkt/jquery-pjax最基础的用法：$(document).pjax('a', '#pjax-container')会在本页面的所有a链接上面启用pjax，内容替换的容器是id为pjax-container的元素，也可以是一个class的元素。上面这句话会使页面上所有的a链接都启用pjax，但是如果我只想部分链接启用呢？我们可以给a元素加上data-pjax属性，然后选择器写上a[data-pjax]，这样就只有类似<a data-pjax href=""></a>的链接才会启用pjax。pjax函数的原型：$(document).pjax(selector, [container], options)第一个参数selector是一个字符串，代表一个可以被点击的元素。第二个参数是选择器字...

发布日期： 2015-06-24 分类： Javascript 浏览量： 4545

HTML5-Ajax文件上传

我们能够如此简单的实现Ajax的文件上传要得益于两个新的对象：File和FormData对象，还有就是w3c标准化XMLHttpRequest之后的扩展。现在新的浏览器都支持这些东西。先来看一下File对象。取得File对象有两个途径：1、用户在一个<input>元素上选择文件后返回的FileList对象。2、来自由拖放操作生成的 DataTransfer对象。这里主要讲的是第一个，第二个有兴趣的同学可以自行查找相关资料。假如有这样一个inpu元素：<input id="file" type="file" name="file">可以像下面那样获取到File对象：var input = document.getElementById("file"); console.log(input.files[0]);input.files是就是上面所说的FileList对象，这是一个数组对象，每一个元素都是一个File对象。File对象的主要属性如下：name：当前File对象所引用文件的文件名。size：文件大小，单位是字节。type：文件MIME类型。还有其他一些信息...

发布日期： 2015-03-27 分类： Javascript 浏览量： 4795

纯CSS的箭头和提示框

最近看到那种带箭头的提示框，忽然想看一下到底什么原理，也就去网上搜了一下，现在总结一下实现方法。大概也就三种方法。第一种方法就是纯粹的利用div的边框图中A和B，C和D分别是一对实现向右和向左箭头的前后图。看图A：<div class="arrow-right-a"></div>CSS:.arrow-right-a { width: 0; height: 0; border-left: 20px solid #ccc; border-top: 10px solid #000; border-bottom: 10px solid #000; border-right: 10px solid #ccc; }把div的高和宽都设为0，然后设置这个div的四个边框，边框宽度设置大一点。最终看效果（图A）。我们可以看到四个边框都是三角形的，那么我们是不是可以让其中的任意三个边框透明，只显示一个三角形，是不是就可以得到四个方向的箭头了呢？看图B：<div class="arrow-right-b"></div...

发布日期： 2014-10-09 分类： HTML/CSS 浏览量： 4810

HTML5触摸事件（多点、单点触控）

HTML5的触摸API支持处理单点和多点的触摸事件处理。接口1、TouchEvent：代表了一个触摸事件。主要属性：TouchEvent.changedTouches：一个TouchList对象。代表了所有上一个接触点到当前点状态发生变化的点。TouchEvent.touches：一个TouchList对象。代表的所有当前触摸点，不管目标或者状态是否改变。TouchEvent.type：触摸事件类型。有touchstart、touchend、touchmove、touchenter、touchleave和touchleave。2、Touch：代表一个单独的触摸点。主要属性：Touch.identifier：这个触摸对象的唯一标识。3、TouchList：代表一组触摸点。比如同时有多根手指放在在屏幕上面。4、DocumentTouch：包含创建Touch和TouchList对象的方法。触摸事件touchstart：触摸的时候发生。touchend：手指从屏幕抬起时发生。手指划出了屏幕也会触发这个事件。touchmove：手指沿着屏幕滑动时触发。touchenter：触摸点进入到一个元素...

发布日期： 2014-08-20 分类： Javascript 浏览量： 53308

input标签file类型样式的改变

话说默认的样式超级难看，而这个东西又比较特殊，input其他的类型都可以自定义的，唯独file不能被改变。起初上网搜索了一下，都说不能改变，无奈。都是用一个text和一个button的input，然后隐藏掉file，再用js控制。也挺简单，看下面代码：<script> function fileup(){ var fileup = document.getElementById("fileupload"); file.click(); } function change(){ var file = document.getElementById("file"), fileup = document.getElementById("fileupload"); fileup.value = file.value; } </script> <input type="text" id="fileupload" /> <input type="button" id="button" value="browse" onclick="fileup()" /&...

发布日期： 2013-04-25 分类： Javascript 浏览量： 4123