Add a icon button here as shown, when clicked it would show dropdown using https://getbootstrap.com/docs/5.2/components/dropdowns/
When clicked this icon
It should popdown options as shown below
When the Action menu is clicked it should write {{Action}} on the quill editor at cursor
When the Action action menu is clicked it should write {{Action action}} on the quill editor at cursor
When the Something else here menu is clicked it should write {{Something else here}} on the quill editor at cursor
var toolbarOptions = ['bold', 'italic', 'image',
{
size: ['small', false, 'large', 'huge']
}, 'clean'
]
var editor = new Quill('#editor', {
modules: { toolbar: toolbarOptions },
theme: 'snow',
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</head>
<body>
<div id="editor">
<p>Hello World!</p>
</div>
</body>
</html>
Related
Add a icon button here as shown, when clicked it would show dropdown using https://getbootstrap.com/docs/5.2/components/dropdowns/
When clicked this icon
It should popdown options as shown below
When the Action menu is clicked it should write {{Action}} on the quill editor at cursor
When the Action action menu is clicked it should write {{Action action}} on the quill editor at cursor
When the Something else here menu is clicked it should write {{Something else here}} on the quill editor at cursor
var toolbarOptions = ['bold', 'italic', 'image',
{
size: ['small', false, 'large', 'huge']
}, 'clean'
]
var editor = new Quill('#editor', {
modules: { toolbar: toolbarOptions },
theme: 'snow',
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</head>
<body>
<div id="editor">
<p>Hello World!</p>
</div>
</body>
</html>
So, I am creating a web app that uses Quill.js on Google Apps Script. This is my code (currently):
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quotix</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
<script src="https://unpkg.com/turndown#6.0.0/dist/turndown.js"></script>
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
<script>
var converters = {
showdown: new showdown.Converter(),
turndown: new TurndownService()
};
var Delta = Quill.import('delta');
var quill = new Quill('#editor', {
modules: {
toolbar: {
container: '#toolbar'
}
},
theme: 'snow'
});
</script>
</head>
<body>
<div id="editor-container">
<div id="toolbar">
<select class="ql-font">
<option value="open-sans" selected>Open Sans</option>
<option value="merriweather">Merriweather</option>
<option value="fira-mono">Fira Mono</option>
</select>
</div>
<div id="editor"></div>
</div>
</body>
</html>
It is supposed to show a rich text editor, but instead I get this:
Can you please help me get the rich text editor to show up? I have looked up how to solve this problem many times!!!
I am working on ASP.NET Core 2.1 MVC application. We are looking into few text editors where we can show Rich Text. I did google and came across Quill rich text editor. Its been only 60 minutes I started to read about QuillJS.
I have a text in MS word document which is bolder and underline. I have code like below. When I copy text from my WORD document and paste into my Quill editor it is pasting like plane text. I cannot see bolder and underline
Below is my simplified _Layout.cshtml which I am using
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="~/lib/normalize/normalize.css" />
<link rel="stylesheet" href="~/lib/jsgrid/jsgrid.css" />
<link rel="stylesheet" href="~/css/jsgrid-theme.css" />
#*Application Styles*#
<link rel="stylesheet" href="~/css/application.css" />
#*Application JS Files*#
<script src="~/js/image.js"></script>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/jsgrid/jsgrid.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<!-- Quill -->
<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.3.6/quill.js" type="text/javascript" charset="UTF-8"></script>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js" type="text/javascript" charset="UTF-8"></script>
<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
#RenderSection("Scripts", required: false)
</head>
<body>
<div class="container body-content appcontainer">
#RenderBody()
</div>
</body>
</html>
Below is my complete my Index.cshtml
<div id="quillEditor" style="height: 600px; width: 100%;">
</div>
In my javascript file.
var options = {
modules: {
toolbar: false // no need of toolbar
},
theme: 'snow',
readOnly: false,
formats: ['bold', 'italic', 'link', 'strike', 'script', 'underline']
};
var quill = new Quill('#quillEditor', options);
But when I paste below code in https://quilljs.com/playground/ it works fine
var quill = new Quill('#editor-container', {
modules: {
toolbar: false
},
placeholder: 'Compose an epic...',
formats: ['bold', 'italic', 'link', 'strike', 'script', 'underline'],
theme: 'snow' // or 'bubble'
});
I have the following code (also on jfiddle https://jsfiddle.net/96ye4hL4/1/ )
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<link href="https://cdn.quilljs.com/1.2.0/quill.snow.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.quilljs.com/1.2.0/quill.js"></script>
</head>
<body>
<div id="editor0"></div>
<script type="text/javascript">
const quill = new Quill("#editor0", {
modules: { toolbar: true },
theme: "snow"
});
quill.setContents({"ops":[{"insert":"Index"},{"attributes":{"header":1},"insert":"\n"},{"attributes":{"link":"http://google.com"},"insert":"FooM"},{"insert":"\n"},{"insert":"\n"}]},)
</script>
</body>
</html>
When I click on the right most character in a hyperlink (the M in FooM), the hyperlink window does not pop up.
How can I pop up the hyperlink window upon clicking the last letter in FooM?
This is an open issue with the Quill library.
https://github.com/quilljs/quill/issues/1931
Notice your code snippet will not run, but standard HREF does:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<link href="https://cdn.quilljs.com/1.2.0/quill.snow.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.quilljs.com/1.2.0/quill.js"></script>
</head>
<body>
<div id="editor0"></div>
<script type="text/javascript">
const quill = new Quill("#editor0", {
modules: { toolbar: true },
theme: "snow"
});
quill.setContents({"ops":[{"insert":"Index"},{"attributes":{"header":1},"insert":"\n"},{"attributes":{"link":"http://google.com"},"insert":"FooM"},{"insert":"\n"},{"insert":"\n"}]},)
</script>
FooM
</body>
</html>
I've just downloaded the trial version of Ext JS 5 and I'm wondering how to use a single component instead of the whole framework. The Ext's guide doesn't seem to have a guide on this. I'm trying to use this http://dev.sencha.com/deploy/ext-4.0.0/examples/form/combos.html
Can I just include a JS and some images like jQuery UI?
Looking at sencha fiddle you could add the following cdn files (or pull them local) and it'll load the extjs framework. Then you could add Ext.onReady and create extjs elements on your page:
Js Files Required:
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/build/ext-all-debug.js"></script>
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
CSS Files Required:
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_01.css">
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_02.css">
And here is an example index.html file that loads a message box when Ext is ready:
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/build/ext-all-debug.js"></script>
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_01.css">
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_02.css">
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
title: 'Hello World!',
items: [{
html: 'Another Item Here'
}]
}).show();
});
</script>
</head>
<body>
<p>TEST SITE</p>
</body>
</html>
Edit 1 (Adding Combobox):
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/build/ext-all-debug.js"></script>
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_01.css">
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_02.css">
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
title: 'Hello World!',
items: [{
html: 'Another Item Here'
}]
}).show();
Ext.create('Ext.panel.Panel', {
renderTo:'testDiv',
width: 500,
height: 500,
title: 'This is another test',
items: [{
html: 'Another test here too.'
},{
xtype:'combobox',
width:400,
displayField: 'descr',
valueField: 'descr',
store: Ext.create('Ext.data.Store',{
fields:['descr'],
data: [{
descr: 'Example 1'
},{
descr: 'Example 2'
}]
})
}]
})
});
</script>
</head>
<body>
<p>TEST SITE</p>
<div id="testDiv"></div>
</body>
</html>