按照官方文档里面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    分类: 前端    浏览量: 481   0条评论  
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    分类: 前端    浏览量: 4292   0条评论  
**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    浏览量: 6299   0条评论  
这是一份写HTML的样板,每写一个新的HTML页面都可以用它来初始化。<!-- HTML5. Use tags like <article>, <section>, etc. See: http://www.sitepoint.com/web-foundations/doctypes/ --> <!doctype html> <html>   <head>     <meta charset="utf-8">     <!--     Ask IE to behave like a modern browser     See: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible     -->     <meta http-equiv="x-ua-compatible" content="ie=edge">     <title>My Site</title>   ...
 发布日期: 2015-06-24    分类: HTML/CSS    浏览量: 3153   0条评论  
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    浏览量: 4012   0条评论  
我们能够如此简单的实现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    浏览量: 4307   0条评论  
最近看到那种带箭头的提示框,忽然想看一下到底什么原理,也就去网上搜了一下,现在总结一下实现方法。大概也就三种方法。第一种方法就是纯粹的利用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    浏览量: 4262   0条评论  
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    浏览量: 51851   0条评论  
话说默认的样式超级难看,而这个东西又比较特殊,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    浏览量: 3658   0条评论  
简介:JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来人们对这一门语言的误解,即认为 JavaScript 不是一门面向对象的语言,或者只是部分具备一些面向对象的特征。本文将回归面向对象本意,从对语言感悟的角度阐述为什么 JavaScript 是一门彻底的面向对象的语言,以及如何正确地使用这一特性。前言当今 JavaScript 大行其道,各种应用对其依赖日深。web 程序员已逐渐习惯使用各种优秀的 JavaScript 框架快速开发 Web 应用,从而忽略了对原生 JavaScript 的学习和深入理解。所以,经常出现的情况是,很多做了多年 JS 开发的程序员对闭包、函数式编程、原型总是说不清道不明,即使使用了框架,其代码组织也非常糟糕。这都是对原生 JavaScript 语言特性理解不够的表现。要掌握好 JavaScript,首先一点是必须摒弃一些其他高级语言如 Java、C# 等类式面向对象思维的干扰,全面地从函数式语言的角度理解 JavaScript 原型式面向对象的特点。把握好这一点之后,才有可能进一步使用好这门语言。本文适合群体:使用过 JS ...
 发布日期: 2013-04-23    分类: Javascript    浏览量: 3259   0条评论