Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updating the README with custom fonts usage #241

Merged
merged 1 commit into from
Apr 3, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ The editor component. Simply place this component in your view hierarchy to rece
- `placeholderColor`: Editor placeholder text color
- `contentCSSText`: editor content css text(initial valid)
- `cssText`: editor global css text(initial valid)
- `initialCSSText`: injects CSS at the beginning of the inline stylesheet. Useful for incorporating custom fonts (see below).

* `onChange`
Callback after editor data modification
Expand Down Expand Up @@ -153,6 +154,40 @@ This method registers a function that will get called whenver the cursor positio
```


### Using Custom Fonts
In order to use custom fonts, you need to use `initialCSSText` from the `editorStyle` prop.

1. Upload your font files to https://transfonter.org and check the 'base64' option. When you download the zip file, there will be a stylesheet.css file there.
2. Take your stylesheet.css file and create a `stylesheet.js` file.
3. Create an export and paste the contents of the css file there. e.g.:
```javascript
const FontFamilyStylesheet = `
@font-face {
font-family: 'Your Font Family';
src: url('data:font/ttf;charset=utf-8;base64,...............'); // You can also use a web url here
font-weight: normal;
}
`;

export default FontFamilyStylesheet;
```
4. Where you've incorporated your `RichEditor` component, import the file and utilize it.
```javascript
import FontFamilyStylesheet from 'stylesheet.js';

<RichEditor
editorStyle={{ initialCSSText: `${FontFamilyStylesheet}`, contentCSSText: `font-family: 'Your Font Family';` }}
/>
```
5. Reload the app. You should now be seeing your Rich Editor content in your custom font face!



For more info on how `initialCSSText` works, check out the PR [here](https://github.com/wxik/react-native-rich-editor/pull/111).
Also, credit to [this](https://github.com/wxik/react-native-rich-editor/issues/70#issuecomment-759441101) issue comment and [his fork](https://github.com/FloMueh/react-native-rich-editor) that describes how to use the base64 encoded font file.



## `RichToolbar`

This is a Component that provides a toolbar for easily controlling an editor. It is designed to be used together with a `RichEditor` component.
Expand Down