How to use the react-quill.Quill.import function in react-quill

To help you get started, we’ve selected a few react-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 mapseed / platform / src / base / static / components / form-fields / types / rich-textarea-field.js View on Github external
import React, { Component } from "react";
import PropTypes from "prop-types";
import ReactQuill, { Quill } from "react-quill";
import classNames from "classnames";
const BlockEmbed = Quill.import("blots/block/embed");
const Embed = Quill.import("blots/embed");
const SnowTheme = Quill.import("themes/snow");
const Link = Quill.import("formats/link");
import { withTranslation } from "react-i18next";

import constants from "../../../constants";

import "./rich-textarea-field.scss";
import Util from "../../../js/utils.js";

// NOTE: this routine is taken from Quill's themes/base module, which is not
// importable via react-quill.
const extractVideoUrl = url => {
  let match =
    url.match(
      /^(?:(https?):\/\/)?(?:(?:www|m)\.)?youtube\.com\/watch.*v=([a-zA-Z0-9_-]+)/,
    ) ||
    url.match(/^(?:(https?):\/\/)?(?:(?:www|m)\.)?youtu\.be\/([a-zA-Z0-9_-]+)/);
  if (match) {
github bs32g1038 / node-blog / client / admin / src / components / Editor.jsx View on Github external
import React from 'react';
import ReactQuill, { Quill } from 'react-quill'
let Block = Quill.import('blots/block');


const CustomButton = () =&gt; <i><sub>2</sub></i>

function insertH() {
    this.quill.format('H', true);

}

class BlockH extends Block {
    static create(value) {
        let node = super.create();
        console.log(node)
        return node;
    }
    static formats(node) {
github Rajan / lesspod / client / react / src / libs / quill-video-resize / main.js View on Github external
import { Quill } from 'react-quill';

const BlockEmbed = Quill.import('blots/block/embed');
const Parchment = Quill.import('parchment');
const ATTRIBUTES = ['height', 'width'];

const nubStyles = {
  tLeft: {
    top: '-5px',
    left: '-5px',
  },
  tRight: {
    top: '-5px',
    right: '-5px',
  },
  bLeft: {
    bottom: '-5px',
    left: '-5px',
  },
  bRight: {
github edp963 / davinci / webapp / app / containers / Schedule / components / ScheduleMailConfig.tsx View on Github external
*/

import React, {
  useEffect,
  useState,
  useCallback,
  useImperativeHandle,
  forwardRef
} from 'react'
import ReactQuill, { Quill } from 'react-quill'
import ImageResize from 'quill-image-resize-module'
const BackgroundStyle = Quill.import('attributors/style/background')
const ColorStyle = Quill.import('attributors/style/color')
const SizeStyle = Quill.import('attributors/style/size')
const FontStyle = Quill.import('attributors/style/font')
const AlignStyle = Quill.import('attributors/style/align')
const DirectionStyle = Quill.import('attributors/style/direction')
import { Form, Row, Col, Input, Select, Icon, InputNumber, Spin } from 'antd'
const FormItem = Form.Item
const { Option } = Select
import MailTag from './MailTag'

import { FormComponentProps } from 'antd/lib/form'
import { IScheduleMailConfig, IUserInfo } from './types'
import {
  FormItemStyle,
  LongFormItemStyle,
  DefaultMailImageWidth,
  DefaultEmailContent
} from './constants'

import 'react-quill/dist/quill.core.css'
github choerodon / iam-service / iam-service / react / src / iam / components / editor / Editor.js View on Github external
import { Modal, Input, Button, Form, Tabs, Upload, Icon } from 'choerodon-ui';
import { FormattedMessage, injectIntl } from 'react-intl';

const TabPane = Tabs.TabPane;
const Dragger = Upload.Dragger;
const FormItem = Form.Item;
const limitSize = 5120;
const Align = Quill.import('attributors/style/align');
Align.whitelist = ['right', 'center', 'justify'];
Quill.register(Align, true);

const Size = Quill.import('attributors/style/size');
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px'];
Quill.register(Size, true);

const Font = Quill.import('attributors/style/font');
Font.whitelist = ['STSong', 'STKaiti', 'STHeiti', 'STFangsong', 'SimSun', 'KaiTi', 'SimHei', 'FangSong', 'Microsoft-YaHei'];
Quill.register(Font, true);

const CustomToolbar = () =&gt; (
  <div id="toolbar">
    <span>
      <button>
      </button><button>
      </button><button>
    
    <span>
      </span></button><button value="ordered">
      </button><button value="bullet">
    
    <span>
      <select></select></span></button></span></div>
github choerodon / choerodon-front-iam / iam / src / app / iam / components / editor / Editor.js View on Github external
import ReactQuill, { Quill } from 'react-quill';
import { axios, Content } from 'choerodon-front-boot';
import 'react-quill/dist/quill.snow.css';
import './Editor.scss';
import { Modal, Input, Button, Form, Tabs, Upload, Icon } from 'choerodon-ui';
import { FormattedMessage, injectIntl } from 'react-intl';

const TabPane = Tabs.TabPane;
const Dragger = Upload.Dragger;
const FormItem = Form.Item;
const limitSize = 5120;
const Align = Quill.import('attributors/style/align');
Align.whitelist = ['right', 'center', 'justify'];
Quill.register(Align, true);

const Size = Quill.import('attributors/style/size');
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px'];
Quill.register(Size, true);

const Font = Quill.import('attributors/style/font');
Font.whitelist = ['STSong', 'STKaiti', 'STHeiti', 'STFangsong', 'SimSun', 'KaiTi', 'SimHei', 'FangSong', 'Microsoft-YaHei'];
Quill.register(Font, true);

const CustomToolbar = () =&gt; (
  <div id="toolbar">
    <span>
      <button>
      </button><button>
      </button><button>
    
    <span>
      </span></button><button value="ordered"></button></span></div>
github resource-watch / resource-watch / components / wysiwyg / IframeBlot.js View on Github external
import { Quill } from 'react-quill';

const BlockEmbed = Quill.import('blots/block/embed');

class IframeBlot extends BlockEmbed {
  static create(value) {
    const node = super.create();

    node.setAttribute('width', value.width);
    node.setAttribute('height', value.height);
    node.setAttribute('src', value.src);
    node.setAttribute('frameborder', '0');
    return node;
  }

  static value(node) {
    return {
      width: node.getAttribute('width'),
      height: node.getAttribute('height'),
github choerodon / iam-service / react / src / app / iam / components / editor / Editor.js View on Github external
import ReactQuill, { Quill } from 'react-quill';
import { axios, Content } from '@choerodon/boot';
import 'react-quill/dist/quill.snow.css';
import './Editor.scss';
import { Modal, Input, Button, Form, Tabs, Upload, Icon } from 'choerodon-ui';
import { FormattedMessage, injectIntl } from 'react-intl';

const TabPane = Tabs.TabPane;
const Dragger = Upload.Dragger;
const FormItem = Form.Item;
const limitSize = 5120;
const Align = Quill.import('attributors/style/align');
Align.whitelist = ['right', 'center', 'justify'];
Quill.register(Align, true);

const Size = Quill.import('attributors/style/size');
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px'];
Quill.register(Size, true);

const Font = Quill.import('attributors/style/font');
Font.whitelist = ['STSong', 'STKaiti', 'STHeiti', 'STFangsong', 'SimSun', 'KaiTi', 'SimHei', 'FangSong', 'Microsoft-YaHei'];
Quill.register(Font, true);

const CustomToolbar = () =&gt; (
  <div id="toolbar">
    <span>
      <button>
      </button><button>
      </button><button>
    
    <span>
      </span></button><button value="ordered"></button></span></div>
github edp963 / davinci / webapp / app / containers / Schedule / components / ScheduleMailConfig.tsx View on Github external
* limitations under the License.
 * >>
 */

import React, {
  useEffect,
  useState,
  useCallback,
  useImperativeHandle,
  forwardRef
} from 'react'
import ReactQuill, { Quill } from 'react-quill'
import ImageResize from 'quill-image-resize-module'
const BackgroundStyle = Quill.import('attributors/style/background')
const ColorStyle = Quill.import('attributors/style/color')
const SizeStyle = Quill.import('attributors/style/size')
const FontStyle = Quill.import('attributors/style/font')
const AlignStyle = Quill.import('attributors/style/align')
const DirectionStyle = Quill.import('attributors/style/direction')
import { Form, Row, Col, Input, Select, Icon, InputNumber, Spin } from 'antd'
const FormItem = Form.Item
const { Option } = Select
import MailTag from './MailTag'

import { FormComponentProps } from 'antd/lib/form'
import { IScheduleMailConfig, IUserInfo } from './types'
import {
  FormItemStyle,
  LongFormItemStyle,
  DefaultMailImageWidth,
  DefaultEmailContent
} from './constants'
github choerodon / iam-service / iam-service / react / src / iam / components / editor / Editor.js View on Github external
import React, { Component } from 'react';
import ReactQuill, { Quill } from 'react-quill';
import { axios, Content } from 'choerodon-boot-combine';
import 'react-quill/dist/quill.snow.css';
import './Editor.scss';
import { Modal, Input, Button, Form, Tabs, Upload, Icon } from 'choerodon-ui';
import { FormattedMessage, injectIntl } from 'react-intl';

const TabPane = Tabs.TabPane;
const Dragger = Upload.Dragger;
const FormItem = Form.Item;
const limitSize = 5120;
const Align = Quill.import('attributors/style/align');
Align.whitelist = ['right', 'center', 'justify'];
Quill.register(Align, true);

const Size = Quill.import('attributors/style/size');
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px'];
Quill.register(Size, true);

const Font = Quill.import('attributors/style/font');
Font.whitelist = ['STSong', 'STKaiti', 'STHeiti', 'STFangsong', 'SimSun', 'KaiTi', 'SimHei', 'FangSong', 'Microsoft-YaHei'];
Quill.register(Font, true);

const CustomToolbar = () =&gt; (
  <div id="toolbar">
    <span>
      <button>
      </button><button></button></span></div>

react-quill

The Quill rich-text editor as a React component.

MIT
Latest version published 2 years ago

Package Health Score

72 / 100
Full package analysis