sibiraj-s / ngx-editor Goto Github PK
View Code? Open in Web Editor NEW🖋️ Rich Text Editor for angular using ProseMirror
Home Page: https://sibiraj-s.github.io/ngx-editor/
License: MIT License
🖋️ Rich Text Editor for angular using ProseMirror
Home Page: https://sibiraj-s.github.io/ngx-editor/
License: MIT License
Hello
I really like your editor and i'd like to make a suggestion for a new feature:
It sometimes would be very useful when you can switch to a "plain-html-code-view" where you can edit directly the html code (e.g. add a target="_blank" in a a-tag or something like that).
Can you imagine to add this feature?
Cheers
Martin
Allow creation of tables. When sanitizing output of the editor, formatting becomes limited and the addition of tables would greatly increase formatting available to our users.
Add any text at the end of the document, select it then click the superscript button. Now, there is no way (that I have found) to add normal text after that--it is all added to the superscript. The same behavior happens with subscripts.
https://ngx-editor.stackblitz.io/ (Currently - v3.3.0-rc.11)
I'm using the ngx-editor on demand. When using the latest version it caused thrashing with current bootstrap styles. The issue seems to be the use of '::ng-deep' and its ability to overwrite global styles.
https://github.com/Sibiraj-S/ngx-editor/blob/master/src/assets/styles/_buttons.scss#L1
is an example. Using 3.2.1 removes the issue. Thanks for your work on this!
ngx-editor: 3.3.0-rc.9
angular: 5.2.6
What version of ngx-editor should I use for working with Angular 4.0 ? I am getting the error "ERROR in Metadata version mismatch - found version 4, expected 3". Could you please help ?
After adding this into my module file
import { NgxEditorModule } from 'ngx-editor';
@NgModule({
imports: [
BrowserModule,
....
NgxEditorModule
]})
I get the above error:
Uncaught Error: Unexpected value 'NgxEditorModule' imported by the module 'AppModule'. Please add a @NgModule annotation.
at syntaxError (webpack:///./node_modules/@angular/compiler/@angular/compiler.es5.js?:1918:34)
at eval (webpack:///./node_modules/@angular/compiler/@angular/compiler.es5.js?:15610:44)
at Array.forEach (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (webpack:///./node_modules/@angular/compiler/@angular/compiler.es5.js?:15593:49)
at JitCompiler._loadModules (webpack:///./node_modules/@angular/compiler/@angular/compiler.es5.js?:27023:70)
at JitCompiler._compileModuleAndComponents (webpack:///./node_modules/@angular/compiler/@angular/compiler.es5.js?:26996:36)
at JitCompiler.compileModuleAsync (webpack:///./node_modules/@angular/compiler/@angular/compiler.es5.js?:26925:37)
at PlatformRef_._bootstrapModuleWithZone (webpack:///./node_modules/@angular/core/@angular/core.es5.js?:4740:25)
at PlatformRef_.bootstrapModule (webpack:///./node_modules/@angular/core/@angular/core.es5.js?:4726:21)
at eval (webpack:///./src/main.ts?:11:109)
at Object.576 (http://localhost:3000/assets/js/main.js:257:1)
at __webpack_require__ (http://localhost:3000/assets/js/vendor.js:55:30)
at eval (webpack:///multi_(webpack)-dev-server/client?:2:1)
at Object.575 (http://localhost:3000/assets/js/main.js:249:1)
at __webpack_require__ (http://localhost:3000/assets/js/vendor.js:55:30)
at webpackJsonpCallback (http://localhost:3000/assets/js/vendor.js:26:23)
at http://localhost:3000/assets/js/main.js:1:1
is there anything I'm missing?
I'd actually consider this a bug but, can see an argument for it being an enhancement.
I would like to be able to enter the following expression.
1 raised to the power of (2 raised to the power of 3).
When I try this with the toolbar buttons what I get is the first/upper expression in the attached image. The editor treats the superscript action as a toggle like the bold or italic. But, superscripts can be added on top of each other. The same is true of subscripts.
What I want is the second/lower image which I created by editing the HTML source then switching back to the display mode.
https://ngx-editor.stackblitz.io/ (Currently - v3.3.0-rc.11)
Hi, i have implemented release version "ngx-editor": "3.3.0-rc.2" and "codemirror": "5.33.0" with successfully code mirror plugin.
But, if i want edit my content, the editor cannot binding with the existing content from ngModel.
thanks for your helps.
It would be nice to have the ability to use the TAB key to move from another form control to the editor's text area so that users don't have to take their hands off the keyboard to reach for the mouse. For ultimate flexibility, this could be surfaced as a tabindex
property on the editor component.
Is there an option to upload file via browse instead of uploading through link?
Documentation improvement
ngx-editor: 3.3.0-rc.13
angular: 5.2.5
"codemirror"
"font-awesome"
"ngx-bootstrap"
"styles": [
"styles.css",
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/codemirror/lib/codemirror.css"
],
When using multiple editors on same page, setting placeholder text for last editor update same text for other editor also
Hi, I'm getting this issue:
ERROR in node_modules/ngx-editor/app/ngx-editor/ngx-editor-toolbar/ngx-editor-toolbar.component.d.ts (3,31): Cannot find module 'ngx-bootstrap'.
ERROR in Error: Metadata version mismatch for module /node_modules/ngx-editor/ngx-editor.d.ts, found version 4, expected 3
Maybe It's something easy to fix but i'm newbie using this tool. Any ideas?
Link in editor is not clickable...
When in go into view cod mode and make changes the Model binding is not working, the value of the htmlcontent is not updated.
ngx-editor: 3.3.0-rc.13
angular: 5.2.6
To reproduce:
https://ngx-editor.stackblitz.io/ (Currently - v3.3.0-rc.11)
Given I have:
<app-ngx-editor
[spellcheck]="true"
[(html)]="htmlContent"
[config]="editorConfig">
</app-ngx-editor>
export class AccessComponent implements OnInit {
htmlContent = '<h6>Hello</h6>';
ngOnInit() {
this.someService.getAction()
.subscribe(data => {
this.htmlContent = '<h3>hello world</h3>'; // <-- doesn't work
});
}
}
Then result is:
In ngx-editor.component.ts
you need to implement OnChanges
and then:
ngOnChanges(changes: SimpleChanges) {
const html: SimpleChange = changes.html;
if (html) {
this.html = html.currentValue;
}
}
Since the last version you add a new feature in the link feature.
But the link is add 2 times in the html code.
Also, the text is format in another font style than the one in the document
The same thing append in your demo site https://ngx-editor.stackblitz.io/
Thanks for you great job.
ngx-editor: 3.3.0-rc.7
angular: 5.2.0
### Browser
- [x] Chrome - 63.0.3239.132 (Build officiel) (64 bits)
- [x] Mozilla Firefox -57.3.3
- [x] Microsoft Edge - 41.16299.248.0
BUILD ERROR
'fromTextArea' is not exported by node_modules\codemirror\lib\codemirror.js
Error: 'fromTextArea' is not exported by node_modules\codemirror\lib\codemirror.js
at error (\node_modules\rollup\dist\rollup.js:185:14)
at Module.error (\node_modules\rollup\dist\rollup.js:16526:3)
at Module.trace (\node_modules\rollup\dist\rollup.js:16623:10)
at ModuleScope.findVariable (\node_modules\rollup\dist\rollup.js:13965:22)
at FunctionScope.findVariable (\node_modules\rollup\dist\rollup.js:11543:33)
at Scope.findVariable (\node_modules\rollup\dist\rollup.js:11543:33)
at FunctionScope.findVariable (\node_modules\rollup\dist\rollup.js:11543:33)
at Scope.findVariable (\node_modules\rollup\dist\rollup.js:11543:33)
at BlockScope.findVariable (\node_modules\rollup\dist\rollup.js:11543:33)
at Node._bindVariableIfMissing (\node_modules\rollup\dist\rollup.js:12626:31)
To reproduce create a project, use the component and then try to compile using ng packagr
Can you please provide feature to change the text size. (This is not a issue, but feature request)
It is not clear from the main readme that this component requires a bunch of extra libs that are very tricky to configure for a typical Angular project:
CodeMirror - Code Edit/Preview
FontAwesome - Toolbar icons
NgxBootstrap - Popover
Please provide this information for the main README.md and optionally a way to setup everything in a blank Angular CLI project.
Produce strictly valid HTML. What is produced by this editor does not have proper tags (#80) is uses non-standard tags (<strike> is not a standard tag for HTML 4+), and it tends to place layout tags inside of character formatting tags.
For an example of that last, text formatting such as bold, italic, etc. tags always seem to include line breaks inside of them despite the fact that the formatting does not affect the line break.
first line
second line
When producing and editor component that is likely to be used in conjunction with other software I would think it is reasonable to assume such software is likely to want to read the produced output. Not producing strictly correct HTML complicates the use of this editor and thus adoption of it.
https://ngx-editor.stackblitz.io/ (Currently - v3.3.0-rc.11)
Do you plan on adding source code formatting?
ERROR in node_modules/ngx-editor/app/ngx-editor/ngx-editor-toolbar/ngx-editor-toolbar.component.d.ts(3,31): error TS2307: Cannot find module 'ngx-bootstrap'.
I followed the example on the main package page.
1- I added "ngx-editor": "^3.3.0-rc.9",
to package.json (along with ngx-bootstrap
and codemirror
) and then did an npm install
2- in app.module I did import { NgxEditorModule } from "ngx-editor";
and added NgxEditorModule to @NgModule({ imports: [NgxEditorModule]})
3- in one of my component's template I added
<app-ngx-editor [spellcheck]="true" [(ngModel)]="replyMessage" [config]="_config"> </app-ngx-editor>
No compile errors when compiling with angular cli (I am using version 5.2.6), but when I load my app in a browser it gives me this error on start.
where did I go wrong?
compiler.js:485 Uncaught Error: Template parse errors:
Can't bind to 'config' since it isn't a known property of 'app-ngx-editor'.
1. If 'app-ngx-editor' is an Angular component and it has 'config' input, then verify that it is part of this module.
2. If 'app-ngx-editor' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
[(ngModel)]="replyMessage"
id="description"
[ERROR ->][config]="wysiwygConfig">
</app-ngx-editor>
"): ng:///AppRoutesModule/EmailReplyPanel.html@37:8
'app-ngx-editor' is not a known element:
1. If 'app-ngx-editor' is an Angular component, then verify that it is part of this module.
2. If 'app-ngx-editor' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
[ERROR ->]<app-ngx-editor [spellcheck]="true"
[(ngModel)]="replyMessage"
id="description"
"): ng:///AppRoutesModule/EmailReplyPanel.html@34:4
at syntaxError (compiler.js:485)
at TemplateParser.webpackJsonp.../../../compiler/esm5/compiler.js.TemplateParser.parse (compiler.js:24668)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._parseTemplate (compiler.js:34621)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileTemplate (compiler.js:34596)
at compiler.js:34497
at Set.forEach (<anonymous>)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileComponents (compiler.js:34497)
at compiler.js:34367
at Object.then (compiler.js:474)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:34366)
syntaxError @ compiler.js:485
webpackJsonp.../../../compiler/esm5/compiler.js.TemplateParser.parse @ compiler.js:24668
webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._parseTemplate @ compiler.js:34621
webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileTemplate @ compiler.js:34596
(anonymous) @ compiler.js:34497
webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileComponents @ compiler.js:34497
(anonymous) @ compiler.js:34367
then @ compiler.js:474
webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileModuleAndComponents @ compiler.js:34366
webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler.compileModuleAsync @ compiler.js:34260
webpackJsonp.../../../platform-browser-dynamic/esm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:239
webpackJsonp.../../../core/esm5/core.js.PlatformRef.bootstrapModule @ core.js:5567
../../../../../src/ts/main-aot.ts @ main-aot.ts:7
__webpack_require__ @ bootstrap 10cdd3045e56e3ac5ff1:54
0 @ SortableTableView.ts:5
__webpack_require__ @ bootstrap 10cdd3045e56e3ac5ff1:54
webpackJsonpCallback @ bootstrap 10cdd3045e56e3ac5ff1:25
(anonymous) @ main.bundle.js:1
Support Angular 4
Not really a feature, but an improvement: This package have a peerDependency of ngx-bootstrap
when it actually uses only the popover module.
The problem is that this force we to load full bootstrap stylesheet (or build a css only with popover), but loading it on Material Angular application will broke some styles.
Since it's a simple feature (show/hide a div with a content), it can be embed on the editor itself.
ngx-editor: v3.3.0-rc.6
[config]="editorConfig"
What is the path of editorConfig file? I placed editorConfig.json file in the outside src folder and its not taking.
It says:
ERROR TypeError: Cannot read property 'hasOwnProperty' of undefined
and the error is pointing to
<app-ngx-editor [config]="editorConfig" [(ngModel)]="content"></app-ngx-editor>
Not working in IE 11
Ive been looking for the right editor for my application and i decided to set on yours for the moment because by the looks of the readme the only peer dependency is font-awesome.. which i can live with.. But when trying to use 3.3 i found that ngx-bootstrap also was a peer dependency?
Anyways i found one of the reasons why i continued to move away from an editor while looking for one, was duo to it having dependencies to stuff where i felt like i imported big libraries to support a very small chunk of my application.
I feel like this editor distinguished itself from the rest by having the lowest amount of dependencies.. it should be its strength.. so adding ngx-bootstrap just puts it inline with the rest?
anyways thats just my two cents :)
for now im using 3.2 which does not have that dependency.
Hi
I am setting height like below
<app-ngx-editor [(ngModel)]="content" [height]="300"></app-ngx-editor>
On startup the editor size is not changed. If I try to increase the height by dragging then it takes the height specified.
Thanks
Would be nice to be able to disable this if for example you wanted to use material instead.
I installed at the first time this editor inside my project but the below message was displayed.
I previously installed CodeMirror, FontAwesome and NGXBootstrap (popover) projects.
ngx-editor: v3.3.0-rc.13
@angular/cli: 1.7.3
Hi! @sibiraj-s , it's possible to make a new feature to change font family and include YouTube link or embed to show a video player?
Thanks!
My proposal is to add the possibility to use another icon set, for example material icons.
My motivation is: I want to implement ngx-editor on a Material Angular based application, but I really don't want to clog my application with another font package if I don't really need it.
I'm willing to help on development of this feature if necessary.
not relevant
not relevant
codemirror not exported
The button labeled 'Paragraph' does not insert an HTML Paragraph tag, which is '<p>'.
Instead it inserts an HTML Line Break tag '<br>'.
https://ngx-editor.stackblitz.io/ (Currently - v3.3.0-rc.11)
I have an editor like so:
<form [formGroup]="billNoteTemplateModelForm">
<app-ngx-editor formControlName="noteHtml"
[placeholder]="'Enter text here...'"
[(ngModel)]="noteTemplate.noteHtml"></app-ngx-editor>
</form>
The expected behavior is that whenever noteTemplate.noteHtml
is changed via code, the editor should update its displayed value as well. However, if noteHtml
is first set to any non-empty-string value, and then back to an empty string, the editor does not update its displayed value properly: it displays both the placeholder
text and the previous non-empty-string value. It should instead display only the placeholder
text.
The offending code appears to be the if-statement on line 199 of ngx-editor.component.ts
. When the new value is detected to be an empty string, writeValue()
does not call refreshView()
.
ngx-editor: 3.3.0-rc.10
angular: 5.2.7
Hey, I found new issue.
I've created Stackblitz demo to show current behaviour https://stackblitz.com/edit/app-ngx-editor?file=app%2Fapp.component.html
It actually can't render editor because parent component has it's own node_modules and ngx-editor installed own node_modules. As a result - is unable to render component correctly.
Dependencies need to be moved to devDependencies, or peerDependencies stackblitz/core#161 (comment)
running
yarn add ngx-editor ngx-boostrap codemirror font-awesome
will cause angular to break when using AOT compiling. I am currently using NestJS which is a NodeJS based server that is serving the angular app with Universal. Running ng serve serves the angular site fine and causes no problems but with AOT the server just does not run.
ngx-editor: 3.3.0-rc.13
angular: 5.2.0
Let's assume you have a name input and just beneath it the ngx-editor. If you write text in the name input and then click on delete from the toolbar, the text in the name input is affected and consequently the last letter is deleted.
Expected behavior: The text in the input name has to remain unchanged.
ngx-editor: v3.3.0-rc.11
angular: 4
It happened on Chrome.
I didn't test on the rest of browsers
Could we add H1, H2, H3 headers as well please ?
@sibiraj-s codemirror doesn't play well with universal. It should be one of those dependencies u choose whether to use or not!
Wouldn't that be nice?
ı try to upload image file to asset/image folder ı set imageendpoint but it give me 404 is there any way to upload image file ?
can you give me a sample
I'm running a into the issue when using the image upload. After a successful called (file was uploaded to my host), the image is not added to the content.
ngx-editor: 3.3.0-rc.10
angular: 5.2.5
Can we have a save button on the editor by default or is there a way to add custom buttons?
ngx-editor: 3.2.1
angular: 4.4.6
Hey, I've been having problems implementing the image upload feature using an ImageEndpoint. Could you show a working demo since the demo on stackblitz.io doesn't seem to work. I'm getting the same error as the demo.
Hi!
It's possible to add a font color and font size features?
Thank you!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.