富文本编辑器是项目中不可或缺的部分,目前市面上可以选择的富文本编辑器种类繁多,如何在项目中选择一款集轻量,美观,稳定,坑少,满足需求的富文本编辑器变成了团队中一个重要的问题。
现在项目中使用的是 WangEditor,为了寻找到更好的替代品,我针对 Ant Design 官方推荐的两款的富文本编辑器做了调研。Ant Design 称它们为“社区精选组件”,在心理层面上觉得应该会比较稳定,尤其是结合 Ant Design 使用。
我对这两款富文本编辑器都进行了使用,并结合目前的项目需求进行了比较。下面是我的使用体验。
第一款富文本编辑器叫作 react-quill,是国外一个社区维护的,贡献者有二三十人。quill 在英文中是鹅毛笔的意思,听起来还是很有美感的。点击这里查看 demo
下面是 react-quill 的最基本的用法,非常简单。
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.state = { text: '' }
this.handleChange = this.handleChange.bind(this)
}
handleChange(value) {
this.setState({ text: value })
}
render() {
return (
<ReactQuill value={this.state.text} onChange={this.handleChange} />
)
}
}
核心就是配置modules和 formats。modules是配置工具栏上的内容,即决定工具栏上有什么;formats是决定哪些工具栏选项可以启用,即决定工具栏的哪些可以生效。实例代码如下:
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
text: '',
}
}
modules = {
toolbar: [
[{ 'header': [1, 2, false] }],
['bold', 'italic', 'underline','strike', 'blockquote'],
[{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
['link', 'image'],
['clean']
],
};
formats = [
'header',
'bold', 'italic', 'underline', 'strike', 'blockquote',
'list', 'bullet', 'indent',
'link', 'image'
];
render() {
return (
<div className="text-editor">
<ReactQuill modules={this.modules} formats={this.formats} />
</div>
);
}
}
这里还有更高级的用法,我们可以在工具栏上加入自己设计的JXS元素,但是目前的项目需求用不到,这里就不展开了。
这是由中国人开发的个人项目,点这里查看 demo。
实例代码如下,需要注意的一点是,接收的 value 不再是 HTML 字符串了,而是editorState格式。 可以通过editorState.toHTML()得到 HTML 字符串。
import React from 'react';
import 'braft-editor/dist/index.css';
import BraftEditor from 'braft-editor';
class Braft extends React.Component {
constructor(props) {
super(props);
this.state = { editorState: BraftEditor.createEditorState(null) };
}
handleChange = editorState => {
this.setState({ editorStste });
};
render() {
return (
<BraftEditor value={this.state.editorStste} onChange={this.handleChange}/>
);
}
}
通过配置通过配置属性controls来自定义工具栏,也可以自定义工具栏图标的文字和样式。示例如下:
const controls = [
'undo', 'redo', 'separator',
{
key: 'bold', // 使用key来指定控件类型
title: '加粗选中文字哦', // 自定义控件title
text: '点我加粗', // 使用自定义文案来代替默认图标(B),此处也可传入jsx
},
'italic', 'underline', 'strike-through'
]
这两款编辑器的稳定性和对异常文本的处理能力都强于 WangEditor,但是存在的问题是都对于表格数据不支持,所以对于老数据的显示存在风险。
来源:https://segmentfault.com/a/1190000017355480
如今的 Web 前端已被 React、Vue 和 Angular 三分天下,尽管现在的 jQuery 已不再那么流行,但 jQuery 的设计思想还是非常值得致敬和学习的,特别是 jQuery 的插件化。
受控组件与非受控组件在官网与国内网上的资料都不多,有些人觉得它可有可不有,也不在意。这恰恰显示React的威力,满足不同规模大小的工程需求。
一般在传统模式下,我们构建前端项目很简单。就是下载各种js文件,如JQuery、Echart等,直接放置在html静态文件。Webpack则是JavaScript中比较知名的打包工具。这两个构建工具构成了React应用快速搭建的基础。
Gatsby能快速的使用 React 生态系统来生成静态网站,可以结合React Component、Markdown 和服务端渲染来完成静态网站生成让他更强大。
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式:函数式定义的无状态组件、es5原生方式React.createClass定义的组件、es6形式的extends React.Component定义的组件
React主要思想是通过构建可复用组件来构建用户界面,每个组件都有自己的生命周期,它规定了组件的状态和方法需要在哪个阶段改变和执行。所谓组件就是有限状态机,,表示有限个状态以及在这些状态之间的转移和动作行为的模型。
React 相关的优化:使用 babel-react-optimize 对 React 代码进行优化,检查没有使用的库,去除 import 引用,按需打包所用的类库,比如 lodash 、echarts 等.Webpack 构建打包存在的问题两个方面:构建速度慢,打包后的文件体积过大
这篇文章主要介绍React Router定义路由之后如何传值,有关React和React Router 。react router中页面传值的三种方法:props.params、query、state
react 高阶组件简单的理解是:一个包装了另一个基础组件的组件。高阶组件的两种形式:属性代理(Props Proxy)、反向继承 (Inheritance Inversion)
React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!