@recruitler/rte
v19.0.0
Published
Here's how we're using the editor for Recruitler.com's social media posting system
Downloads
113
Readme
RichTextEditor
Here's how we're using the editor for Recruitler.com's social media posting system
<!-- hashtag search dropdown -->
<ng-template #hashtagItemTemplate let-value let-active="active">
<div class="suggestion-item" [class.selected]="active">
<p>{{ value.name }}</p>
</div>
</ng-template>
<!-- inline hashtags component -->
<ng-template #hashtagTemplate let-value="value">
<lib-hashtag
[hashtag]="value"
contenteditable="false" />
</ng-template>
<div class="compose__editable">
<recruitler-rte #editor
[formControl]="content"
[hashtagItemTemplate]="hashtagItemTemplate"
[hashtagTemplate]="hashtagTemplate"
[hashtagResults]="hashtagResults"
[uploadImageResult]="uploadImageResult"
(hashtagRequest)="hashtagSearch($event)"
(uploadImageRequest)="onUpload($event)"
placeholder="What's your experience?"
(focus)="onFocus()"
(blur)="onBlur()" />
<p class="count" [ngClass]="{ 'warning': count < 10, 'error': count < 0 }">{{ count }}</p>
</div>
Hashtag format
Our hashtag string format:
-##-{"id":"xxxx", "content":"existing"}-##-
A hashtag that does not reflect a database counterpart.
#nonexisting
Parsing
When creating or editing existing RTE content during (POST or PATCH) your backend parser should:
- ignore hashtags already saved in the RTE hashtag-format
-##-{...}-##-
- identify unidentified hashtags like
#something
these should be formatted like above - check your hashtag data storage for this hashtag and create a new hashtag from
#something
- replace
#something
in the content with the new formatted hashtag in the hashtag data format
We need help!
If you're using this Rich Text Editor package you likely need a code syntax highlighter. We're working to bring Ace into the RTE package and could use some expertise!
https://github.com/Recruitler/Rich-Text-Editor/issues/1
Code scaffolding
Run ng generate component component-name --project rich-text-editor
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project rich-text-editor
.
Note: Don't forget to add
--project rich-text-editor
or else it will be added to the default project in yourangular.json
file.
Build
Run ng build rich-text-editor
to build the project. The build artifacts will be stored in the dist/
directory.
Publishing
After building your library with ng build rich-text-editor
, go to the dist folder cd dist/rich-text-editor
and run npm publish
.
Running unit tests
Run ng test rich-text-editor
to execute the unit tests via Karma.
Further help
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.