Code Monkey home page Code Monkey logo

ng-quill's Issues

QuillJS 1.1.x support

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.

Validation Callback Functionality?

It would be great if ng-quill could:

  • specify max length.
  • handle defining a callback function to deal with validation in the config object.
  • have an attribute that handles the above.

I went over the documentation, didn't see a way to do this.
Am I missing something?

ngModel change tracking problem with if(newText)

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

  1. Type random text in Quill editor
  2. Click "Clear (without space)"
  3. Template was updated, but not the content inside Quill editor

can empty text in Quill editor

  1. Type random text in Quill editor
  2. Click "Clear (with space)"
  3. Template was updated, as well inside 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 !

Errors when using Quill 1.1

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>

quill compatible version with ngQuill

What is the higher version of quill compatible with ngQuill? because I used quill v1.1.1 except for v0.20.1 with ngQuill in the demo which you made and these error comes up:

s

New Release Readonly change not working

[#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>

Toolbar disappears when in ui-bootstrap modal

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.

Destroying all editors on `$locationChangeSuccess`

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.

Cannot read property 'clear' of undefined

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 ?

editor.getHTML is not a function

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 ?

Defaults are not changing on the top

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.

Using ngQuill and ionic?

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?

Touched state

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?

Npm release

Is there an NPM release for this? For people using webpack or similar without bower!

Multi editor instances are problematic

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.

No buttons, no textarea delimitation

Hi,
I tried to used your directive for Quill but there is a problem.
The editor looks like this :
capture d ecran 2015-01-11 a 17 26 25
I used angular 1.3.1 and my code is the same you wrote in your home page
Any idea what is going wrong ?
Thank you.
Seb

Cannot read property 'trim' of undefined

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.

Custom font size labels

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.

ngQuill Format buttons not working in ngQuill-1.4.4

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

model of ng-quill-editor doesn't updated dynamically without typing in editor.

issue

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".

Creating a custom module Example

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

Using Quill API Methods with ngQuill

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.

settingInitValues is true if there is no content at start

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 ;)

Using multiple instances on one page

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

Loading src/ng-quill.js

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?

Using Quill with requireJS?

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']
    }
});

Using Quill with bower

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

Color formatting whitelist makes it nonfunctional

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.