java argox_GitHub - margox/braft-extensions at dev_table
Braft Editor扩展模块包
目前包含的模块列表
表格模块 Table
代码高亮模块 CodeHighlighter
高级取色器模块 ColorPicker
表情包扩展模块 Emoticon
输入字数限制模块 MaxLength
标题区块(h1-h6)id模块 HeaderId
安装
npm install braft-extensions --save
# 或者
yarn add braft-extensions
使用
需要分别import本模块包下面的各个模块,参见下方各模块的基本使用介绍
表格模块
支持添加/删除行列、合并/拆分单元格等基本操作
基本使用
import 'braft-editor/dist/index.css'
import 'braft-extensions/dist/table.css'
import BraftEditor from 'braft-editor'
import Table from 'braft-extensions/dist/table'
const options = {
includeEditors: ['editor-id-1'], // 指定该模块对哪些BraftEditor生效,不传此属性则对所有BraftEditor有效
excludeEditors: ['editor-id-2'] // 指定该模块对哪些BraftEditor无效
}
BraftEditor.use(Table(options))
使用注意事项
使用表格模块,请升级braft-editor、braft-convert和braft-utils至最新版本
暂不支持在表格中插入图片等媒体资源,因为draftjs不支持嵌套block,而每一个单元格和图片等都是一个单独的block,所以无法实现
每个表格前后都需要有一个空行才能正常展示,有疑问的请自行查阅源码
请勿在表格内进行过于复杂�的操作,例如任性合并/拆分单元格等,以免进入程序死角导致报错
调整列宽的功能会在后续版本中支持
代码高亮模块
使用prismjs和draft-js-prism开发的一个代码高亮模块,能在编辑器中实现代码高亮编辑功能,内置html、js和css语言支持,可扩展更多语言,在线演示
安装依赖
npm install prismjs draft-js-prism --save
# 或者
yarn add prismjs draft-js-prism
基本使用
import 'braft-editor/dist/index.css'
import 'braft-extensions/dist/code-highlighter.css'
import BraftEditor from 'braft-editor'
import CodeHighlighter from 'braft-extensions/dist/code-highlighter'
const options = {
includeEditors: ['editor-id-1'], // 指定该模块对哪些BraftEditor生效,不传此属性则对所有BraftEditor有效
excludeEditors: ['editor-id-2'] // 指定该模块对哪些BraftEditor无效
}
BraftEditor.use(CodeHighlighter(options))
扩展语言支持
请访问PrismJs官网查看全部支持的语言
// 首先需要从prismjs中引入需要扩展的语言库
import 'prismjs/components/prism-java'
import 'prismjs/components/prism-php'
// 通过opitons.
const options = {
syntaxs: [
{
name: 'JavaScript',
syntax: 'javascript'
}, {
name: 'HTML',
syntax: 'html'
}, {
name: 'CSS',
syntax: 'css'
}, {
name: 'Java',
syntax: 'java',
}, {
name: 'PHP',
syntax: 'php'
}
]
}
BraftEditor.use(CodeHighlighter(options))
使用其他Prism配色主题
该功能将在后续版本中支持
使用注意事项
使用该模块,必须引入braft-extensions/dist/code-highlighter.css文件
该模块仅用于对编辑器内的代码块进行高亮展示,并不会更改编辑器输出的实际内容,如果需要在展示页面进行代码高亮,请单独使用Prism.js或其他代码高亮方案进行处理
在展示页使用PrismJS进行代码高亮的时候,需要参考PrismJS/prism#598做一下处理
高级取色器模块
使用react-color来替换编辑器自身的颜色选择模块,设置颜色更自由!在线演示
安装依赖
npm install react-color --save
# 或者
yarn add react-color
基本使用
import 'braft-editor/dist/index.css'
import 'braft-extensions/dist/color-picker.css'
import BraftEditor from 'braft-editor'
import ColorPicker from 'braft-extensions/dist/color-picker'
const options = {
includeEditors: ['editor-id-1'], // 指定该模块对哪些BraftEditor生效,不传此属性则对所有BraftEditor有效
excludeEditors: ['editor-id-2'], // 指定该模块对哪些BraftEditor无效
theme: 'light', // 指定取色器样式主题,支持dark和light两种样式
}
BraftEditor.use(ColorPicker(options))
使用注意事项
使用该模块,必须引入braft-extensions/dist/color-picker.css文件
表情包扩展模块
替换内置的emoji组件,可以插入图片形式的表情,在线演示
基本使用
import 'braft-editor/dist/index.css'
import BraftEditor from 'braft-editor'
// 引入表情包扩展模块样式文件
import 'braft-extensions/dist/emoticon.css'
// 引入表情包扩展模块和默认表情包列表
import Emoticon, { defaultEmoticons } from 'braft-extensions/dist/emoticon'
// 转换默认表情包列表,让webpack可以正确加载到默认表情包中的图片,请确保已对png格式的文件配置了loader
// 如果你使用的webpack版本不支持动态require,或者使用的其他打包工具,请勿使用此写法
const emoticons = defaultEmoticons.map(item => require(`braft-extensions/dist/assets/${item}`))
// 也可以使用自己的表情包资源,不受打包工具限制
// const emoticons = ['http://path/to/emoticon-1.png', 'http://path/to/emoticon-2.png', 'http://path/to/emoticon-3.png', 'http://path/to/emoticon-4.png', ...]
const options = {
includeEditors: ['editor-id-1'], // 指定该模块对哪些BraftEditor生效,不传此属性则对所有BraftEditor有效
excludeEditors: ['editor-id-2'], // 指定该模块对哪些BraftEditor无效
emoticons: emoticons, // 指定可用表情图片列表,默认为空
}
BraftEditor.use(Emoticon(options))
使用注意事项
使用该模块,必须引入braft-extensions/dist/emoticon.css文件
输入字数限制模块
为编辑器增加maxLength和onReachMaxLength属性,用于限制输入字数
基本使用
import 'braft-editor/dist/index.css'
import BraftEditor from 'braft-editor'
import MaxLength from 'braft-extensions/dist/max-length'
const options = {
defaultValue: 100, // 指定默认限制数,如不指定则为Infinity(无限)
includeEditors: ['editor-id-1'], // 指定该模块对哪些BraftEditor生效,不传此属性则对所有BraftEditor有效
excludeEditors: ['editor-id-2'], // 指定该模块对哪些BraftEditor无效
}
BraftEditor.use(MaxLength(options))
使用MaxLength扩展之后,可为编辑器组件传入maxLength和onReachMaxLength:
console.log('不能再输入了!')} />
使用注意事项
粘贴内容时如果超过了限制字数,则整个粘贴内容都不会被粘贴到编辑器
对于富文本编辑器,限制输入字符数并不是一个很适合的做法
可通过editorState.toText().length获取到内容长度再进行友好提示
标题区块(h1-h6)id模块
为标题区块(h1-h6)增加随机的id,便于在展示页支持锚点跳转功能
基本使用
import 'braft-editor/dist/index.css'
import BraftEditor from 'braft-editor'
import HeaderId from 'braft-extensions/dist/header-id'
const options = {
includeEditors: ['editor-id-1'], // 指定该模块对哪些BraftEditor生效,不传此属性则对所有BraftEditor有效
excludeEditors: ['editor-id-2'], // 指定该模块对哪些BraftEditor无效
}
BraftEditor.use(HeaderId(options))
java argox_GitHub - margox/braft-extensions at dev_table相关推荐
- vs java调试_基于VSCode的Java编程语言的构建调试环境搭建指南(作业三)
1.Java编译环境的搭建(CodeRunner) CodeRunner的强大之处在于它支持许多语言,只要选好语言,就直接可以写代码,即开即用的模式.时至今日,Code Runner已经有了超过400 ...
- php java bridge 安装_php-java-bridge扩展安装
和招行进行支付接口对接 之前采用的是第二种方法,没有成功,原因是下载的包不一样,安装方式也不一样,推荐采用第一种方法,和windows下差不多,启动后别然每次访问有提示.但是访问测试成功,正常显示ja ...
- Developing native extensions for Adobe AIR
原文:http://www.adobe.com/devnet/air/articles/developing-native-extensions-air.html 以下为摘译 Note: Adobe ...
- 转-OpenJDK源码阅读导航跟编译
OpenJDK源码阅读导航 OpenJDK源码阅读导航 博客分类: Virtual Machine HotSpot VM Java OpenJDK openjdk 这是链接帖.主体内容都在各链接中. ...
- Tomcat、Websphere和Jboss类加载机制
http://blog.csdn.net/lshxy320/article/details/6448972 2 Tomcat 类加载机制 Tomcat Server 在启动的时候将构造一个 ...
- IDEA Reference - Essentials(基本要义)
原文 Intelli IDEA 2016.1 Reference 目录 Project SDK Module Facet Artifact Library Path Variables Support ...
- Websphere的类加载器以及策略的简单介绍
转载自: https://blog.csdn.net/eric_sunah/article/details/17289985 1.1 什么是ClassLoader 顾名思义,类加载器(clas ...
- 比较Spring AOP和AspectJ
1. 介绍 当前有多个可用的AOP库,这些库必须能够回答许多问题: 它与我现有的或新的应用程序兼容吗? 在哪里可以实施AOP? 它与我的应用程序集成的速度有多快? 性能开销是多少? 在本文中,我们将着 ...
- 数据结构链表例程_如何掌握RxJava例程的四个结构
数据结构链表例程 by Ayusch Jain 通过Ayusch Jain 如何掌握RxJava例程的四个结构 (How to get a grip on the four constructs of ...
最新文章
- java 冒泡排序和快速排序 实现
- 一步一步 Mac OS X 与 Windows 7 双系统共存 的“黑苹果” 电脑 安装 入门
- javadoc时候乱码-编码 GBK 的不可映射字符 - wqjsir的专栏 - 博客频道 - CSDN.NET
- JS正则表达式的基础用法
- 读《redis设计与实现》笔记--redis数据结构
- mint-ui之toast使用(messagebox,indicator同理)
- php爆数据库,php+MySql注入非暴力爆数据库表段
- 15复变函数的积分(一)
- Ueditor和CKeditor wysihtml5 编辑器的使用与配置
- mysql比较两个表中count_mysql两个表统计查询问题?
- MLN Alchemy
- 西南科技大学oj题66
- IOS设备之armv6,armv7,armv7s,arm64
- matlab鲍威尔方法求函数,基于MATLAB的鲍威尔法求极值问题.doc
- 基于mpvue创建微信小程序项目
- Norms in Matrix and Vector
- 417,BFS和DFS两种方式求岛屿的最大面积
- 通过具体的例子说明一维和二维的相关运算、卷积运算究竟是怎么做的。
- 【Android Studio探索之路系列】之四:Android Studio快捷键
- 安卓手机使用LEAP企业Wifi网络(公司内部的证书方式)
热门文章
- 基于RabbitMq的削峰实例
- ONES Talk | 我们为什么选择最难走的软件之路
- HTML第六章上机练习1-5题
- I - ICPC Awards(字符串)
- 【转】[中级]我对『PID算法』的理解 —— 原理介绍
- 整理:收集增强WiFi信号的10种方法
- 指针、结构体、枚举类和文件
- oracle建表备份数据,oracle建表备份脚本,如果update的数据不对,可以从WEB_RI_PLYEDR_CED_BAK找回...
- 2022年度东湖高新区国家重点研发计划“先进结构与复合材料”重点专项申报指南!
- 数据结构溢彩加强版——(二)算法篇