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
LicWordPress钩子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 这的链接了。
但是我这样的改造对于WordPrDid 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 = '加粗'命令式组件Message、Dialog的主流写法分析 这里还是以element-ui为例，那我们就看看里面的Message。
它的dom结构什么的就写在node-modules/element-ui/packages/notification/src/main.vue里面
<template>
<transition name="el-notification-fade">
<di 关注道招网公众帐号
