Giter VIP home page Giter VIP logo

angular_quill's Introduction

Angular Quill

An angular dart component for the Quill rich text editor

Visit https://adamlofts.github.io/angular_quill_example/build/web/index.html

And view the corresponding example source code.

Usage

Add the dependency to pub:

dependencies:
  angular_quill:

Add the component to your template

<my-app>
    <quill
            [(ngModel)]="html"
            placeholder="Write something..."
            (blur)="blur()"
            (input)="input()"
    ></quill>
</my-app>

Add quillDirectives to the directives on your app component

@Component(
  selector: 'my-app',
  templateUrl: 'app_component.html',
  directives: const [COMMON_DIRECTIVES, quillDirectives],
)
class AppComponent {}

Include Quill JS and css files in your app html.

  <head>
    <script src="packages/angular_quill/quill-1.2.4/quill.min.js"></script>
    <link rel="stylesheet" href="packages/angular_quill/quill-1.2.4/quill.snow.css">
  </head>

angular_quill's People

Contributors

adamlofts avatar eugennekrasov avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

angular_quill's Issues

Video url accepting any url

hey guys.
I noticed that if i put any url inside the input of video url its accept it.
Is there a way of allowing only video url in the input?

This is a problem when i want to show the video in my Flutter app because insted of the video is shown the website.

Thanks. :))

Custom image handler

When I use imageHandler, becauce when i upload big image editor frozen, then i can't paste url of image from server. Is there method to get reference od quillEditor something like this

var quillObj = quillRef.current.getEditor();
const range = quillObj.getEditorSelection();
quillObj.getEditor().insertEmbed(range.index, 'image', 'urlImage');

I think there is miss methods getEditorSelection and insertEmbed

Calling backend

I am building this into a webview to run on desktops as a quicky prototype.

Here is the webview runner in golang. This is a typical example.

https://github.com/zserge/webview/tree/master/examples/counter-go

My question relates to how to get quill dart code to call javascript code that I also inject into the page ? The webview backend has a very simple to mechanism. Hopefully you can see it in the link.

Do I need to wrap your component or can I use dependency injection to tell the component a Js call to make when a content changed event happens ? I want to call the backend on every content change as I store state there :)

Thanks in advance
I will put this demo up on GitHub once I get it all working..

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.