How to use the quill function in quill

To help you get started, we’ve selected a few quill examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github yjs / yjs / tests / helper.js View on Github external
const testConnector = new TestConnector(prng)
  result.testConnector = testConnector
  for (let i = 0; i < opts.users; i++) {
    let y = testConnector.createY(i)
    result.users.push(y)
    result['array' + i] = y.define('array', Y.Array)
    result['map' + i] = y.define('map', Y.Map)
    const yxml = y.define('xml', Y.XmlElement)
    result['xml' + i] = yxml
    const dom = document.createElement('my-dom')
    const domBinding = new DomBinding(yxml, dom, { filter })
    result['domBinding' + i] = domBinding
    result['dom' + i] = dom
    const textType = y.define('text', Y.Text)
    result['text' + i] = textType
    const quill = new Quill(document.createElement('div'))
    result['quillBinding' + i] = new QuillBinding(textType, quill)
    result['quill' + i] = quill
    y.quill = quill // put quill on the y object (so we can use it later)
    y.dom = dom
    y.domBinding = domBinding
  }
  testConnector.syncAll()
  return result
}
github n8n-io / n8n / packages / editor-ui / src / components / ExpressionInput.vue View on Github external
VariableField.className = 'variable';
			VariableField.tagName = 'span';

			Quill.register({
				'formats/variable': VariableField,
			});

			AutoFormat.DEFAULTS = {
				expression: {
					trigger: /\B[\w\s]/,
					find: /\{\{[^\s,;:!?}]+\}\}/i,
					format: 'variable',
				},
			};

			this.editor = new Quill(this.$refs['expression-editor'] as Element, {
				readOnly: !!this.resolvedValue,
				modules: {
					autoformat: {},
				},
			});

			this.editor.root.addEventListener('blur', (event: Event) => {
				this.$emit('blur', event);
			});

			this.initValue();

			if (!this.resolvedValue) {
				// Only call update when not resolved value gets displayed
				this.setFocus();
				this.editor.on('text-change', () => this.update());
github urbanogardun / monte-note / src / components / NotebookPage / Editor / index.tsx View on Github external
componentDidMount() {
        // After this component gets initialized for the first time it will
        // receive props whose value will stay the same the next time the
        // component gets mounted - this means if we go to a notebook, the first
        // time content of the last opened note will get loaded, but on the 2nd
        // run it won't. Code below explicitly requests note data for this case.
        let lastOpenedNote = this.props.lastOpenedNote as string;
        if (lastOpenedNote.length) {
            let data = {
                notebook: this.state.notebookName,
                note: lastOpenedNote
            };
            ElectronMessager.sendMessageWithIpcRenderer(GET_NOTE_CONTENT, data);
        }

        this.quill = new Quill('#quill-container', {
            modules: {
                toolbar: {
                    container: '#toolbar',
                    handlers: {
                        'omega': function(value: any) {
                            console.log(value);
                        }
                    }
                },
                // toolbar: [
                // ['bold', 'italic', 'underline'],
                // ['image', 'code-block'],
                // ['trash'],
                // ],
                resizableImages: {},
                renameAttachment: {},
github modularcode / modular-admin-html / src / Dashboard / Items / ItemsEditor / ItemsEditor.js View on Github external
init: function() {
    const vm = this;

    // vm.refs.$el = $("#ItemsEditorPage");

    // if (!vm.refs.$el.length) {
    //   return false;
    // }

    var container = document.getElementById('Editor');
    var editor = new Quill(container);

    var quill = new Quill('#Editor', {
      modules: { toolbar: true },
      theme: 'snow'
    });

  }
github oddbit / tanam / src / admin_client / src / components / Events / EventDetail.vue View on Github external
mounted() {
    const quill = new Quill('#editor', {
      theme: 'snow',
      modules: {
        toolbar: '#editor-toolbar'
      },
      placeholder: 'Write here...'
    });

    if (this.mode === 'edit') {
      quill.clipboard.dangerouslyPasteHTML(
        0,
        this.$store.getters[POST_CONTENT]
      );
    }

    quill.on('editor-change', () => {
      this.$store.commit(POST_CONTENT, quill.getContents().ops);
github primefaces / primereact / src / components / editor / Editor.js View on Github external
componentDidMount() {
        this.quill = new Quill(this.editorElement, {
            modules: {
                toolbar: this.toolbarElement,
                ...this.props.modules
            },
            placeholder: this.props.placeholder,
            readOnly: this.props.readOnly,
            theme: this.props.theme,
            formats: this.props.formats
        });

        if (this.props.value) {
            this.quill.pasteHTML(this.props.value);
        }

        this.quill.on('text-change', (delta, source) => {
            let html = this.editorElement.children[0].innerHTML;
github davidroyer / vue2-editor / src / components / VueEditor.vue View on Github external
setupQuillEditor() {
      let editorConfig = {
        debug: false,
        modules: this.setModules(),
        theme: "snow",
        placeholder: this.placeholder ? this.placeholder : "",
        readOnly: this.disabled ? this.disabled : false
      };

      this.prepareEditorConfig(editorConfig);
      this.quill = new Quill(this.$refs.quillContainer, editorConfig);
    },
github weiq / antui-admin / src / components / editor / QuillMixin.js View on Github external
createEditor: function($el, config, clazz) {
    let quill = new Quill($el, config);
    this.hookEditor(quill, clazz);
    return quill;
  },
github webiny / Webiny / Js / Webiny / Ui / Components / HtmlEditor / HtmlEditor.js View on Github external
componentDidMount() {
        super.componentDidMount();

        this.editor = new Quill(this.getTextareaElement(), {
            modules: {
                toolbar: this.props.toolbar
            },
            theme: 'snow',
            bounds: document.body
        });

        const toolbar = this.editor.getModule('toolbar');
        toolbar.addHandler('image', () => {
            this.refs.reader.getFiles();
        });

        this.editor.on('text-change', () => {
            this.setState({value: this.editor.root.innerHTML}, this.changed);
        });
github marmelab / react-admin / packages / ra-input-rich-text / src / index.js View on Github external
useEffect(() => {
        quillInstance.current = new Quill(divRef.current, {
            modules: { toolbar, clipboard: { matchVisual: false } },
            theme: 'snow',
            ...options,
        });

        if (configureQuill) {
            configureQuill(quillInstance.current);
        }

        quillInstance.current.setContents(
            quillInstance.current.clipboard.convert(value)
        );

        editor.current = divRef.current.querySelector('.ql-editor');
        quillInstance.current.on('text-change', onTextChange);