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.
mapseed / platform / src / base / static / components / form-fields / types / rich-textarea-field.js View on Github 
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) {import React from 'react';
import ReactQuill, { Quill } from 'react-quill'
let Block = Quill.import('blots/block');
const CustomButton = () => <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) {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: {*/
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'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 = () => (
<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>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 = () => (
<div id="toolbar">
<span>
<button>
</button><button>
</button><button>
<span>
</span></button><button value="ordered"></button></span></div>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'),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 = () => (
<div id="toolbar">
<span>
<button>
</button><button>
</button><button>
<span>
</span></button><button value="ordered"></button></span></div>* 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'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 = () => (
<div id="toolbar">
<span>
<button>
</button><button></button></span></div>react-quill
The Quill rich-text editor as a React component.
