wermerb / ngx-trumbowyg Goto Github PK
View Code? Open in Web Editor NEWAngular 6 component & directive for Trumbowyg WYSIWYG editor.
License: MIT License
Angular 6 component & directive for Trumbowyg WYSIWYG editor.
License: MIT License
the readme needs polishing, i followed the example but i don't see any toolbar. it's just a text area.
Hi,
I'm not able to add a couple of basic options to the configuration like minimalLinks: true or defaultLinkTarget: '_blank'.
Is there are way to add them anyway?
Thanks!
Is it possible to use the ngx-trumbowyg component as a standalone editor, without the for wrapper?
New to Angular - not fully across it yet, so sorry if this is a dumb question.
Hi!
There's a little bug with 'colors' plugin which makes the whole editor crash.
in trumbowyg.colors.js on line 110. It crashes when trying to call indexOf colorList.
There is actually no colorList property but foreColorList and backColorList instead. So you just need to replace this code:
if (trumbowyg.o.plugins.colors.colorList.indexOf(foreColor) >= 0) { tags.push('foreColor' + foreColor); } else { tags.push('foreColorFree'); }
with this:
if (trumbowyg.o.plugins.colors.foreColorList.indexOf(foreColor) >= 0) { tags.push('foreColor' + foreColor); } else { tags.push('foreColorFree');
and this:
if (trumbowyg.o.plugins.colors.colorList.indexOf(backColor) >= 0) { tags.push('backColor' + backColor); } else { tags.push('backColorFree'); }
with this:
if (trumbowyg.o.plugins.colors.backColorList.indexOf(backColor) >= 0) { tags.push('backColor' + backColor); } else { tags.push('backColorFree'); }
cheers
How are you supposed to integrate plugins? I'm trying to use the paste image plugin, but I have no idea on how to do that. I tried to copy the path of the plugin (trumbowyg.pasteimage.min.js) in the scripts in angular.json but this isn't working. I guess this has something to do with the "events" thing in app.module...
Thanks!
package.json peer dependency entry for trumbowyg is set to version "2.11.0".
npm installer complains when attempting to install with a newer version of trumbowyg.
ERESOLVE unable to resolve dependency tree
Could you please change the syntax of the dependency version for the editor to allow newer versions than 2.11.0 as well?
thank you!
Current package.json entry:
"peerDependencies": {
"trumbowyg": "2.11.0"
I integrated ngx-trumbowyg and everything works fine so far. I also copied the icons to src/assets, but they are not showing up. What am I missing?
Hello,
As of version 6.0.2 installing trough NPM in a fresh install results in the module not being found by angular whatever we try. I compared the two versions with a diff tool and you seem to have moved the lib folder from the root of the package to src/lib which seems to be causing the issue.
i followed the example from trumbowyg using emojify plugin but somehow i don't see the images at all.
all i can see is the code.
declare var emojify:any;
// Setup emojify.js
emojify.setConfig({
img_dir : '//cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/'
});
emojify.run();
html
<ngx-trumbowyg-editor id="editor" name="editor" [(ngModel)]="model" [options]="options">
Hi,
Currently i'm not able to set manually the value of the textarea used for rendering the trumbowyg editor. Is there a way to set the initial content of the editor (placeholder is not what i need because is an edit form) and the formControlName seems not to work. I've also tried to remove the ngxTrumbowygEditor from textarea and the formControlName seems work as expected (like Angular docs describes)
This is my textarea right now
<textarea ngxTrumbowygEditor id="testo" formControlName="testo"></textarea>
FormGroup im using:
this.domandaForm = this.fb.group({
materia: new FormControl('',[Validators.required]),
sezione: new FormControl('',[Validators.required]),
testo: new FormControl('',[Validators.required]),
correzione: new FormControl('',[Validators.required]),
labels: new FormControl('',[Validators.required]),
corretta: new FormControl('',[Validators.required]),
sondaggio: new FormControl(false,[Validators.required]),
alternative: this.fb.array([])
});
Any guess? Thank you all
Immediately on load of the components that use this directive, the console report this error.
Details:
This is a gif of my problem:
And this is the code of the options
this.editorOptions = { lang: this.lang, svgPath: '/assets/trumbowyg/icons.svg', removeformatPasted: true, autogrow: true, btns: [ ['viewHTML'], ['undo', 'redo'], ['formatting'], ['strong', 'em', 'del'], ['superscript', 'subscript'], ['link'], ['insertImage'], ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'], ['unorderedList', 'orderedList'], ['horizontalRule'], ['removeformat'], ['fullscreen'] ], };
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.