道招
wangEditor富文本编辑器改造记录之一——了解wangEditor结构
最近鉴于项目要求,需要对自己使用的富文本编辑器进行改造。 我们首先简单了解下wangEditor的源码结构 第一步:polyfill 当然现在这些基本都用不上了,现代点的浏览器都支持这些方法的 基于document封装了一套dom操作类DomElement 里面有 forEach 、 css 、 show 、 on 、 addClass 、 children 、 find 、
web前端开源流程图组件库调研记录
前期公司的一个项目需要绘制流程图,设计师给的效果大致是这样的 对,全是马赛克。 项目的大致要求如下: 点击流程节点后会弹出对应的流程详情,可以查看和编辑 最好是支持流程节点的拖拽来实现节点之间的层级改动 流程节点尽可能的居中 我就大致搜了下,找了不少不错的,但是都是付费的居多,比如gojs。 自己也看了几个开源的可以制作流程图的库,生成的全部是svg。
改造富文本编辑器wangEditor成react组件
我们知道wangEditor常用的功能是editor实例的 txt.html() 和 txt.text() 方法,尤其是 txt.html() 方法,这是一个类似与jQuery常用的那种get和set一体的方法。 我们怎么把这种传统模式书写的第三方库引入到react项目中,并且方便其它同事使用呢?我们需要做一个react组件,让它来完成wangEditor的“react化”。 对于编辑器
转译:使用react hooks优化回调函数在组件间的传递,useState,useReducer?
我们先看一下使用 useState hooks写的todoList组件,里面我们需要层层传递回调函数。 import React, { useState } from "react"; const AddTodoBtn = ({ onAddTodo }) => ( <div className="action-add">
参考教程实现WordPress更新博文通知钩子插件
搞一个更新博客文章的钩子插件,目前的功能是更新自己的PWA缓存版本 <?php /* Plugin Name: Daozhao Blog Description: wordpress操作post的钩子处理插件 Version: 1.1 Author: Shadow Prompt Author URI: https://www.daozhao.com Lic
WordPress钩子Action Hook与Filter Hook
WordPress的Action Hook与Filter Hook WordPress中的 Hook 有两种,分别是 Action Hook 及 Filter Hook ,一开始你可以先把这两种 Hook 看成是一样的东西,只是 Filter 多了一点点不同的特色,接着说明。 Action Hook WP核心 (或主题、插件)在做它们该做的事时,如果执行到有埋 action hook
小改wordpress的get_permalink,支持固定链接设置值和插件获取值不同
因为本站的前端展示放弃使用WordPress博客系统的,而是改用自己的vue服务端渲染了,在保留原来的链接地址(比如 https://www.daozhao.com/8531.html )不变的情html况下,只能更改WordPress里面的固定链接了,只能委屈WordPress使用 https://www.daozhao.com/8531.php 这的链接了。 但是我这样的改造对于WordPr
Did you mean to use React.forwardRef()?搞懂react的createRef和forwardRef
最近在使用react过程中发现在使用ref时的一些场景,自己初步感觉react的ref没有vue那么强大。 现在我就简单看下怎么使用ref? createRef 我们直接看源码 // node_modules/react/umd/react.development.js // an immutable object with a single mutable value
WordPress博客项目改用react前端展示
之前自己的主打技术栈是vue全家桶,所以将自己的wordpress博客改成了vue版本服务端渲染,现在因为公司需要将我的项目从vue转到react,本人后面可能也就要主打eact技术栈了。 我记得这个网站还是在清明节假期三天改造完成的,当时还写了一篇 《道招网终于完成改版了》 ,想不到这么快又要改了,当然这次我是不准备额外增加功能,主要以迁移技术栈为主,虽然自己最开始学习框架的时候是使用的r
富文本编辑器wangEditor多语言、工具栏体验改造
支持多语言 首页wangEditro本身是支持使用多语言的,通过源码可以看到里面有个 replaceLang 方法,虽然这种写法有点非主流,但是是有效的,里面部分地方在支持多语言方面有些遗漏。 以“加粗”功能为例 // 构造函数 function Bold(editor) { this.editor = editor; this.title = '加粗'
关注道招网公众帐号
道招开发者二群