提交 57a00617 编写于 作者: G guanpengchn

v1.8.9 发布日期:2020-08-02

- 加入style相关监听函数
- 修改content.md
上级 f3ac6234
v1.8.9 发布日期:2020-08-02
- 加入style相关监听函数
- 修改content.md
v1.8.8 发布日期:2020-08-01
- 替换掉全部图壳图片
......
......@@ -2,7 +2,7 @@
"name": "markdown-nice",
"author": "mdnice",
"description": "a markdown editor with the function of style edition",
"version": "1.8.8",
"version": "1.8.9",
"private": false,
"main": "lib/Lib.js",
"module": "lib/Lib.js",
......
......@@ -289,6 +289,7 @@ class App extends Component {
const {codeNum, previewType} = this.props.navbar;
const {isEditAreaOpen, isPreviewAreaOpen, isStyleEditorOpen, isImmersiveEditing} = this.props.view;
const {isSearchOpen} = this.props.dialog;
const {onStyleChange, onStyleBlur, onStyleFocus} = this.props;
const parseHtml =
codeNum === 0
......@@ -379,7 +380,7 @@ class App extends Component {
{isStyleEditorOpen && (
<div id="nice-style-editor" className={styleEditingClass}>
<StyleEditor />
<StyleEditor onStyleChange={onStyleChange} onStyleBlur={onStyleBlur} onStyleFocus={onStyleFocus} />
</div>
)}
......
......@@ -41,7 +41,17 @@ class Lib extends Component {
}
render() {
const {defaultTitle, defaultText, onTextChange, onBlur, onFocus, useImageHosting} = this.props;
const {
defaultTitle,
defaultText,
onTextChange,
onBlur,
onFocus,
onStyleChange,
onStyleBlur,
onStyleFocus,
useImageHosting,
} = this.props;
const appCtx = {
defaultTitle,
useImageHosting,
......@@ -63,6 +73,9 @@ class Lib extends Component {
onTextChange={onTextChange}
onBlur={onBlur}
onFocus={onFocus}
onStyleChange={onStyleChange}
onStyleBlur={onStyleBlur}
onStyleFocus={onStyleFocus}
useImageHosting={useImageHosting}
/>
</appContext.Provider>
......@@ -92,6 +105,9 @@ Lib.defaultProps = {
onTextChange: () => {},
onBlur: () => {},
onFocus: () => {},
onStyleChange: () => {},
onStyleBlur: () => {},
onStyleFocus: () => {},
// eslint-disable-next-line react/default-props-match-prop-types
useImageHosting: {
url: "",
......@@ -107,6 +123,9 @@ Lib.propTypes = {
onTextChange: PropTypes.func,
onBlur: PropTypes.func,
onFocus: PropTypes.func,
onStyleChange: PropTypes.func,
onStyleBlur: PropTypes.func,
onStyleFocus: PropTypes.func,
// eslint-disable-next-line react/require-default-props
useImageHosting: PropTypes.shape({
url: PropTypes.string,
......
......@@ -29,6 +29,18 @@ export interface MarkdownNiceProps {
* 编辑器获得焦点函数
*/
onFocus?: (text: string) => void;
/**
* 自定义主题编辑器内容监听函数
*/
onStyleChange?: (text: string) => void;
/**
* 自定义主题编辑器失去焦点函数
*/
onStyleBlur?: (text: string) => void;
/**
* 自定义主题编辑器获得焦点函数
*/
onStyleFocus?: (text: string) => void;
/**
* 是否启用用户提供的图床, 内部为图床的URL以及要显示的图床名称。
*/
......
......@@ -44,6 +44,7 @@ class StyleEditor extends Component {
const {css} = themeList[templateNum];
const style = `/*自定义样式,实时生效*/\n\n` + css;
this.props.content.setCustomStyle(style);
this.props.onStyleChange && this.props.onStyleChange(style);
this.props.navbar.setTemplateNum(themeList.length - 1);
},
onCancel: () => {},
......@@ -60,16 +61,19 @@ class StyleEditor extends Component {
} else {
const style = editor.getValue();
this.props.content.setCustomStyle(style);
this.props.onStyleChange && this.props.onStyleChange(style);
}
}
};
handleFocus = () => {
handleFocus = (editor) => {
this.focus = true;
this.props.onStyleFocus && this.props.onStyleFocus(editor.getValue());
};
handleBlur = () => {
handleBlur = (editor) => {
this.focus = false;
this.props.onStyleBlur && this.props.onStyleBlur(editor.getValue());
};
render() {
......
......@@ -138,9 +138,9 @@ _这个是斜体_
![](https://files.mdnice.com/i-am-svg.svg)
- 支持图片**拖拽和截图粘贴**到编辑器中上传,上传时使用当前选择的图床。
- 可使用**格式->图片**上传本地图片,网站仅支持「图壳」图床,失败率低可长久保存!
- 可使用**格式->图片**上传本地图片,网站目前支持「图壳」图床,失败率低,但是只可保存一天用于排版
**注:仅支持 https 的图片,图片粘贴到微信时会自动上传微信服务器,不必担心使用上述图床会导致微信内图片丢失**
**注:仅支持 https 的图片,图片粘贴到微信、知乎或掘金时会自动上传其服务器,不必担心使用上述图床会导致图片丢失**
图片还可以和链接嵌套使用,能够实现推荐卡片的效果,用法如下:
......
......@@ -19,6 +19,8 @@ function App() {
defaultText={defaultText}
onTextChange={t => console.log("text => ", t)}
onBlur={t => console.log("text => ", t)}
onStyleChange={t => console.log("text => ", t)}
onStyleBlur={t => console.log("text => ", t)}
useImageHosting={useImageHosting}
/>
);
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册