killercodemonkey / ng-quill Goto Github PK
View Code? Open in Web Editor NEWAngularJS Component for Quill rich text editor
License: MIT License
AngularJS Component for Quill rich text editor
License: MIT License
It seems this ngQuill directive is locked to 0.20.1. When I used the latest QuillJS 1.1.x, it does not work, all toolbar disappeared.
It would be great if ng-quill could:
I went over the documentation, didn't see a way to do this.
Am I missing something?
In order to re-produce the issue
visit the following JSBin
http://jsbin.com/quzaco/edit?html,js,output
cannot empty text in Quill editor
can empty text in Quill editor
As I want to have the content empty, I would set content = ''
, but it only work with content = ' '
. The line that determine the update is here.
https://github.com/KillerCodeMonkey/ngQuill/blob/1.4.4/src/ng-quill.js#L276
The issue is JS has evaluate ''
string as falsy
. I wonder if it would better to change to undefined
checking instead?
http://stackoverflow.com/questions/27509/detecting-an-undefined-object-property
Even it has a very simple workaround, but will you still consider changing the conditional statement inside?
Any thoughts?
Thanks !
I'm trying to use Quill 1.1 with ngQuill 1.5.3 but I'm getting an error:
Cannot import modules/link-tooltip. Are you sure it was registered?
The HTML looks like this:
<ng-quill-editor ng-model="message" toolbar="true" link-tooltip="true" image-tooltip="true" toolbar-entries="font size bold list bullet italic underline strike align color background link image" editor-required="true" required="" error-class="input-error"></ng-quill-editor>
Any body ??? ^^
Hello,
On this demo page: http://killercodemonkey.github.io/ngQuill/demo.html
When you highlight text and click on B (Bold) the curos jumps away, and when you select a different color it does not work.
Is this a known issue or am I doing something wrong on the demo?
I guess it's the same as #2. It's like you deliberately do this...
https://github.com/KillerCodeMonkey/ngQuill/blob/master/src/ng-quill.js#L189
https://github.com/KillerCodeMonkey/ngQuill/blob/master/src/ng-quill.js#L201
Why man?
It would be nice :-) https://pages.github.com/
[#65]) Hi , I am working ng-quill latest version . read-only property working based on initial value if i change read-only dynamically , read-only property not working properly
<input type="checkbox" ng-model="readOnly">
<ng-quill-editor ng-model="title" required="true" read-only="readOnly" modules="{toolbar: false}"></ng-quill-editor>
I haven't been able to duplicate this in a fiddle, so maybe it's just my setup.
But when I use the quill editor in a ui-bootstrap modal, nine times out of ten it shows and then immediately disappears again. The toolbar
, showToolbar
, and toolbarCreated
variables are all true
.
I'm thinking that it possibly does not get properly applied, because if I initialize them with true
, instead of staying undefined
, then the toolbar shows up.
It works fine when I use the editor in a page or a normal bootstrap modal.
I ran into a bug where the editor doesn't render correctly whenever I try to load it for more than once. I debugged the code and found out that this part removes the editor just after it's created:
// reset all quill editors (to not flood window object works only with ui-router)
$rootScope.$on('$locationChangeSuccess', function () {
if ($window.Quill && $window.Quill.editors && $window.Quill.editors.length) {
angular.forEach($window.Quill.editors, function (editor) {
editor.destroy();
});
}
});
Probably some incompatibility with my UI router state's config!
I commented the code and now everything works ok. Just wondering what's the reason for this clean-up and why not only cleaning up the editor that was created by current directive instance and not removing all the editors present on $window. I'd suggest removing the $locationChangeSuccess
part and adding following code inside ngQuillEditor
directive:
element.on('$destroy', function() {
editor.destroy();
});
Please let me know if it looks good to you and then I can do a PR for it.
Hi
I just installed the ngQuill library into my Ionic project. When loading my page I get following error in the developer-console :
ionic.bundle.js:26794 TypeError: Cannot read property 'clear' of undefined at .<anonymous> (ng-quill.js:305) at ionic.bundle.js:32323 at completeOutstandingRequest (ionic.bundle.js:19194) at ionic.bundle.js:19470(anonymous function) @ ionic.bundle.js:26794(anonymous function) @ ionic.bundle.js:23507(anonymous function) @ ionic.bundle.js:32326completeOutstandingRequest @ ionic.bundle.js:19194(anonymous function) @ ionic.bundle.js:19470
Does anyonre know what is going wrong ?
I want to add custom toolbaar how will we do it?
Hi,
When I update the model linked to editor, the editor does not update.
You can try it by updated the model with a timout or link the model to the editor and a textarea.
Is a version for Angular2 planned?
Hi
I just installed the ngQuill library into my Ionic project. Whenever I type into the editor, I get following error in the developer-console :
TypeError: editor.getHTML is not a function at .<anonymous> (ng-quill.js:335) at ionic.bundle.js:32323 at completeOutstandingRequest (ionic.bundle.js:19194) at ionic.bundle.js:19470(anonymous function) @ ionic.bundle.js:26794(anonymous function) @ ionic.bundle.js:23507(anonymous function) @ ionic.bundle.js:32326completeOutstandingRequest @ ionic.bundle.js:19194(anonymous function) @ ionic.bundle.js:19470
Does anyone know what is going wrong ?
When I am changin properties in the text editor, lets say I am changing a piece of text from Normal to Heading 1, when I do that and I drop down the Headings in the menu it still thinkgs that the selected text is on Normal. It is still on Heading 1 in the editor, but the menu item does not register that change and it thinks the default is selected.
I downloaded the zip and just ran that and thats one of the issues that I ran into.
This issue is replicated with pretty much all of the menu properties you can set.
I wonder if you have any version using older angular and have it as directive not component?
Hi,
I am trying to use ngQuill on an mobile app build on IONIC. I installed successfully and works on the browser. However when i deploy to Iphone the text editor shows but i can't type anything. When I type the cursor does not show.
Any ideas?
Currently ngQuill marks the field as untouched initially but it doesn't mark it as touched after an interaction.
I've read the Quill documentation and it doesn't listen to click or bluer events, so I guess that this could be implemented using something like this angular.element(field).one('click'...
.
@KillerCodeMonkey, what do you think about this?
Any ideas what could be causing this error? Thanks for putting this package together!
Hello,
is there going to be ng2 version of this?
Is there an NPM release for this? For people using webpack or similar without bower!
Currently the ng-quill tried to bind Quill editor to a single editor by css selector. If I added more than one editors in one pages, It will be problematic.
should be done!
To inform the parents of the scope -> use $scope.$emit instead of $scope.$broadcast
I installed this editor on my angular app according to its docs here: https://github.com/KillerCodeMonkey/ngQuill,
i have two problem:
1.console error:
angular.js:13920 TypeError: Cannot read property 'trim' of undefined at Quill.setHTML (quill.js:10527) at g (ng-quill.min.js:1) at ng-quill.min.js:1 at Scope.$emit (angular.js:17932) at .<anonymous> (ng-quill.min.js:1) at angular.js:19612 at completeOutstandingRequest (angular.js:5964) at angular.js:6243(anonymous function) @ angular.js:13920 functions.js:12 Quill
2.does't show text direction button in toolbar with blew code:
<ng-quill-editor class="dialog_editor" ng-model="model.description" name="editor1" callback="editorCallback(editor, name)" translations="vm.editorTranslations" save="html" toolbar="true" link-tooltip="false" image-tooltip="false" toolbar-entries="font size bold list italic underline strike align direction color background link" editor-required="true" error-class="input-error" theme="snow" name="desc"></ng-quill-editor>
thanks.
Sorry if it's already done but I couldn't find it explained.
I would like a way to customize some things, i.e. the toolbar font-size labels. As right now they are always four and they're always 10px, 13px, 18px and 32px
I think the more flexible approach would be to allow users to use their own template.
When using ngQuill in a md-dialog the toolbar disappears when you open the modal
Hi,
I'm using ngQuill-1.4.4. I believe this is the latest version that doesn't require upgrading to Angular 1.5 and I'm using this version because I cannot upgrade to 1.5. In Chrome on Windows 10, the format buttons, B, U, Link, etc are not working. When I highlight the text and click on any of the buttons, the text becomes unhighlighted and doesn't get formatted. The link box doesn't appear when trying to create a link. This problem also happens with the demo included in the zip. This works fine in IE and also Chrome on Mac. Can you tell me if this has been fixed in a later version of ngQuill and if so, how can I modify this version to work as the people that will be using this editor will be primarily on Windows?
Thanks
Dana
When model of ng-quill-editor doesn't updated dynamically without typing in editor.
update model at run time without typing it doesn't update model.
Here is a link to a similar type issue.
http://stackoverflow.com/questions/29731771/ng-quill-text-editor-only-updates-once
please enable two way data binding
In the latest version of ng-quill
The $window scroll is moving when we have fixed height for ".editor-container".
Hello I am trying to register a word counter module for my implementation. This is how I am trying it:
$scope.$on("editorCreated", function (event, editor) {
editor.setHTML("Hello WWQds");
editor.registerModule('counter', function (quill, options) {
});
});
However I keep getting the following error:
Error: editor.registerModule is not a function. (In 'editor.registerModule('counter', function (quill, options) {
})', 'editor.registerModule' is undefined)
http://localhost:9000/app/dashboard/newdocument/newdocument.controller.js:10:30
$emit@http://localhost:9000/bower_components/angular/angular.js:16238:38
http://localhost:9000/bower_components/ngQuill/src/ng-quill.min.js:1:3498
http://localhost:9000/bower_components/angular/angular.js:17855:36
completeOutstandingRequest@http://localhost:9000/bower_components/angular/angular.js:5507:15
http://localhost:9000/bower_components/angular/angular.js:5784:33
I know how quill works without angular but I have no clue on how to create my custom modules using ng-quill. Can someone please provide an example.
Thanks
Is it possible to call a method for Quill?
for eg.
editor.setHTML('Hello World');
With what should I replace 'editor' to work with ng-quill? This is important for me because I'm using a dynamic ng-model.
I've got a problem with settingInitValues
on ngQuill editor init.
If value in ngModel is not empty, everything works fine. The problem occures when ngModel is equal to an empty string and after editor init, settingInitValues
is still set on true. It means that when you type first letter, editor think that this is an init change and doesn't trigger ngChange.
It's a part of code for function that is trigger on text-change
event:
if (settingInitValues) {
settingInitValues = false;
return;
}
In fact, text-change
event isn't even fired so there is no possibility to init editor in right way. In my solution I just removed this if statement and I don't see bad effect. I know that is not good solution but it works for now ;)
Hello,
first, thanks for your work on building a wrapper for quill.js, it works like a charm.
Unfortunately, there is an issue with multiple editors on one page (or within one controller). Quill.js attaches the default styles multiple times to the HEAD of the HTML file. I fixed it by adding quill.js "styles"[1] attribute to the directives scope [2], passing "true" or "false" to "editor-styles" (defaults to "false").
I can open a PR if you think it helps others as well.
[1] http://quilljs.com/docs/configuration/
[2] Cordobo@b0af6f6
My bower_components
directory has both now and my index.html
and Gulpfile are all sort of confused.
Hi
When we change link value in the link dialog box, It didn't update the model value .
Hello @KillerCodeMonkey
Unfortunatelly I have no experience with Travis, but the error message looks like if there's some issue :)
rake aborted!
No Rakefile found (looking for: rakefile, Rakefile, rakefile.rb, Rakefile.rb)
Travis CI Build
Pull Request Result
EDIT: Looks like the missing .travis.yml file is causing this issue
I'm having trouble loading the ng-quill script like you have in "demo.html".
In my jade file it looks like:
"script(type="text/javascript" src="src/ng-quill.js")"
But I keep getting a GET error.
You can see the jade template under "views/": https://github.com/Binnsler/TheOfficialGalacticCollective/tree/master
I keep see a GET error but can't tell if it's me calling it in a weird way or if something is weird with the module.
Any chance you could help out?
<ng-quill-editor ng-model="content"></ng-quill-editor>
when content
have some text in it.Hi I'm trying to use Quill with requireJS? But all the time I have error:
Quill is not defined
What I'm doing wrong?
require.config({
paths: {
'quill': '../lib/quill/dist/quill.min',
'ngQuill': '../lib/ngquill/src/ng-quill'
},
shim: {
'quill': {
'deps': ['angular'],
'exports':'Quill'
},
'ngQuill' : ['quill']
}
});
I tried to use Quill with bower. However, I keep getting Quill is not defined all the time.
I did same as you have mentioned on the readme file.
Uncaught ReferenceError: Quill is not defined ng-quill.min.js:1
Coloring works fine without any whitelisting but as soon as I add whitelisting configuration the button does nothing, no errors in console or events fired. Other functions work fine.
Using version 2.0.0
Here's my attempted configuration:
app.config(['ngQuillConfigProvider', function (ngQuillConfigProvider) {
// var toolbarOptions = ['bold', 'italic', 'underline', 'blockquote', 'link', 'color', 'align', 'direction', 'image'];
var toolbarOptions = ['color'];
ngQuillConfigProvider.set({
toolbar: toolbarOptions
}, undefined, 'Placeholder', toolbarOptions, document.body, false);
}]);
Cheers
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.