1.1.7 • Published 3 years ago
react-start-editor v1.1.7
react-ritch-markdown
基于 React 和 antd 的编辑器(同时支持富文本和 markdown,基于 braft-editor 和 react-markdown-editor-lite 的在封装)
基本使用
1. 编辑器的基本使用
下载
npm i react-start-editor
引入
import Editors from "react-start-editor/lib"
使用
// 编辑器
<Editors.Editors />
1.1支持参数
1.1.1 公共参数
名称 | 描述 | 类型 | 默认 | 备注 |
---|---|---|---|---|
onChange | 获取编辑器的值 | function | 必传 | |
isRich | 是否显示富文本 | Boolean | false | true:显示富文本;false:显示 markdown |
defaultValue | 默认值 | string | null | |
imgUrl | 图片上传地址 | string | /api/site/image | |
IUpName | 图片上传名 | string | file | |
IUpData | 图片上传额外参数 | object | undefind | |
fillUrl | 文件上传地址 | string | /api/site/annex | |
FUpName | 文件上传名 | string | file | |
FUpData | 文件上传额外参数 | object | undefind |
1.1.2 markdown参数
名称 | 描述 | 类型 | 默认 | 备注 |
---|---|---|---|---|
mdRender | markdown 渲染规则 | markdown-it | 需要传入整个markdown-it | |
mdStyle | markdown样式 | object | {height:'500px'} | |
mdPasteImg | markdown复制图片上传函数 | function | undefind | |
mdImgChange | 图片上传回调函数 | function | undefind | |
mdFillChange | 文件上传回调函数 | function | undefind |
1.1.3 富文本参数
名称 | 描述 | 类型 | 默认 | 备注 |
---|---|---|---|---|
richPasetImg | 富文本复制图片上传函数 | function | undefind | |
richImgChange | 图片上传回调函数 | function | undefind | 必须返回拼接后的值 |
richFillChange | 文件上传回调函数 | function | undefind | 必须返回拼接后的值 |
richXssOption | 富文本xss配置对象 | object | xssOption |
let xssOption = {
whiteList: {
a: ["href", "title", "target"],
img: ["src", "alt", "target", "id", "title"],
video: ["src", "control"],
audio: ["src", "control"],
span: ["style"],
p: ["style"],
div: ["style", "class", "id"],
strong: [],
em: [],
u: [],
hr: [],
sup: [],
sub: [],
ul: [],
ol: [],
li: [],
b: [],
table: ["border", "style", "collapse"],
tr: [],
td: ["colspan", "rowspan"],
blockquote: [],
code: [],
pre: [],
br: [],
font:["face"],
},
};
1.2 方法实例
1.2.1 onChange 实例
获取编辑器的值
onChange(value) {
console.log(value)
}
1.2.2 mdPasteImg实例
// 粘贴图片上传
myUploadFn = (file) => {
const { IUpData, IUpName, imgUrl } = this.props;
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = () => {
let obj = new FormData();
if (IUpData) {
for (let key in IUpData) {
obj.append(key, IUpData[key]);
}
}
obj.append(IUpName, file);
Axios.post(imgUrl, obj).then((res) => {
let { data } = res;
resolve(data.url);
});
};
reader.readAsDataURL(file);
});
};
1.2.3 richPasetImg实例
// 粘贴图片上传
myUploadFn = (param) => {
const { IUpData, IUpName, imgUrl } = this.props;
let obj = new FormData();
if (IUpData) {
for (let key in IUpData) {
obj.append(key, IUpData[key]);
}
}
obj.append(IUpName, param.file);
Axios.post(imgUrl, obj)
.then((res) => {
if (res.data && res.data.code === 0) {
let data = res.data.data;
param.success({
url: data.url,
meta: {
id: data.id,
title: data.name,
alt: data.name,
},
});
}
})
.catch((err) => {
param.error({
msg: "上传失败!",
});
});
};
1.2.4 mdImgChange实例
const mdImgChange = (info, set) => {
if (info.file.status === 'done') {
set.setFieldsValue({
url: info.file.response.data.url,
});
} else if (info.file.status === 'error') {
message.error('图片上传失败');
}
};
1.2.5 mdFillChange实例
const mdImgChange = (info, set) => {
if (info.file.status === 'done') {
// 插入Markdown
let str = `[${info.file.response.data.file_name}](${info.file.response.data.url})`;
set.insertText(str);
} else if (info.file.status === 'error') {
message.error('图片上传失败');
}
};
1.2.6 richImgChange 实例
//图片上传回调
const richImgChange = (info, value, set) => {
if (info.file.status === 'done') {
// 富文本图片上传成功,将图片地址加入富文本内容
let data = set.insertMedias(value, [{ type: 'IMAGE', url: info.file.response.data.url }]);
return data; // 必须返回拼接的值
} else if (info.file.status === 'error') {
message.error('图片上传失败');
}
};
1.2.7 richFillChange实例
//文件上传回调
const uploadFileChange = (info, value,set) => {
if (info.file.status === "done") {
// 富文本文件上传成功,将图片地址加入富文本内容
let data = set.insertHTML(
value,
`<a target="_blank" href="${info.file.response.data.url}">${info.file.response.data.file_name}</a>`
)
return data // 必须返回拼接的值
} else if (info.file.status === "error") {
message.error("文件上传失败");
}
};
1.3 Muse 实例
挂载 markdown 插件
Editors.Editors.Muse(插件, 配置)
1.4 基本使用示例
const mdParser = new MarkdownIt({
breaks: true, // 转换段落里的 '\n' 到 <br>。
linkify: true, // 将类似 URL 的文本自动转换为链接。
typographer: true, // 启用一些语言中立的替换 + 引号美化
html: true,
highlight: function(str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(lang, str).value;
} catch (__) {}
}
return ""; // 使用额外的默认转义
},
})
.use(require("markdown-it-toc"))
.use(require("markdown-it-xss"), {
xss: {
escapeHtml(html) {
return html;
},
},
})
.use(require('@liradb2000/markdown-it-mermaid'));
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
defaultValue: '',
}
}
// 获取编辑器的内容
onChange = (value) => {
console.log(value)
}
refadd = React.createRef();
// 设置默认值
componentDidMount() {
this.setState({ defaultValue: '1236' })
}
handleClickLastValue = async () => {
this.setState({ defaultValue: '7896' })
}
// 清空编辑器
handleClear = () => {
this.refadd.current.clearContent()
}
render() {
const { defaultValue } = this.state
return <div>
<Button onClick={() => this.handleClickLastValue()}>
恢复上一次内容
</Button>
<Button onClick={() => this.handleClear()}>
清除内容
</Button>
<Editors.Editors
ref={this.refadd}
onChange={this.onChange}
isRich={true}
defaultValue={defaultValue}
imgUrl= "/api/site/image",
fillUrl= "/api/site/annex",
mdStyle={{height:'500px'}}
mdRender= {mdParser}
/>
</div>
}
}
2. 展示器的使用
2.1 支持参数
名称 | 描述 | 类型 | 默认 | 备注 |
---|---|---|---|---|
isRich | 是否显示富文本 | Boolean | false | true:显示富文本;false:显示 markdown |
value | 内容 | string | null | |
mdRender | markdown 渲染规则 | markdown-it | 需要传入整个markdown-it |
2.2 基本使用实例
const mdParser = new MarkdownIt({
breaks: true, // 转换段落里的 '\n' 到 <br>。
linkify: true, // 将类似 URL 的文本自动转换为链接。
typographer: true, // 启用一些语言中立的替换 + 引号美化
html: true,
highlight: function(str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(lang, str).value;
} catch (__) {}
}
return ""; // 使用额外的默认转义
},
})
.use(require("markdown-it-toc"))
.use(markdownItMermaid)
.use(require("markdown-it-xss"), {
xss: {
whiteList: {
a: ["href", "title", "target"],
img: ["src"],
},
},
});
class ShowEditors extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Editors.ShowEditors isRich={true} value="hhhhhhhhh" mdRender={mdParser} />
)
}
}