QuillJS - Format with out toolbar not working - javascript

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'
});

Related

Displaying dropdown menu using bootstrap in a Quill Editor

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>

Add custom icon on quill editor for displaying dropdown menu using bootstrap

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>

How to add close bracket and close tag for react code mirror

I'm using react-codemirror2 in a react project. I want to add features like auto bracket close and auto tag close. There is a npm package called #codemirror/closebrackets but I can't find any documentation to do that.
<ControlledEditor
onBeforeChange={handleChange}
value={value}
className="code-mirror-wrapper"
options={{
linerWrapping: true,
lint: true,
mode: language,
theme: 'material',
lineNumbers: true
}}
/>
This is my react component.
Specify if there is a way to do without additional packages like #codemirror/closebrackets.

You can add autoCloseBrackets: true to your options and it'll work fine. From the doc:
Defines an option autoCloseBrackets that will auto-close brackets and
quotes when typed.
import 'codemirror/addon/edit/closebrackets'
// other parts of the code//
<ControlledEditor
onBeforeChange={handleChange}
value={value}
className="code-mirror-wrapper"
options={{
linerWrapping: true,
lint: true,
mode: language,
theme: 'material',
lineNumbers: true,
autoCloseBrackets: true,
}}
/>

This really works:
<!doctype html>
<html>
<head>
<title>CodeMirror</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
<link rel=stylesheet href="https://CodeMirror.net/doc/docs.css">
<script src="https://CodeMirror.net/addon/hint/anyword-hint.js" id="anyword"></script>
<link rel="stylesheet" href="https://CodeMirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/hint/show-hint.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/dialog/dialog.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/search/matchesonscrollbar.css">
<script src="https://CodeMirror.net/lib/codemirror.js"></script>
<script src="https://CodeMirror.net/addon/edit/closetag.js"></script>
<script src="https://CodeMirror.net/addon/hint/show-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/sql-hint.js"></script>
<script src="https://CodeMirror.net/addon/mode/loadmode.js"></script>
<script src="https://CodeMirror.net/mode/meta.js"></script>
<script src="https://CodeMirror.net/addon/hint/xml-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/html-hint.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/hint/javascript-hint.js"></script>
<script src="https://CodeMirror.net/mode/xml/xml.js"></script>
<script src="https://CodeMirror.net/mode/javascript/javascript.js"></script>
<script src="https://CodeMirror.net/mode/css/css.js"></script>
<script src="https://CodeMirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://CodeMirror.net/addon/dialog/dialog.js"></script>
<script src="https://CodeMirror.net/addon/search/searchcursor.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/search/search.js"></script>
<script src="https://CodeMirror.net/addon/scroll/annotatescrollbar.js"></script>
<script src="https://CodeMirror.net/addon/search/matchesonscrollbar.js"></script>
</head>
<body>
<div id="editor"></div>
<button onclick="closeBrackets()">Close Brackets</button>
<script>
function closeBrackets() {
myCodeMirror.execCommand("closeBrackets");
}
</script>
<script>
var myCodeMirror = CodeMirror(
document.getElementById('editor'), {
lineNumbers: true,
autoCloseBrackets: true,
});
</script>
</body>
</html>

Quill.js editor not showing up

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!!!

Summernote and Codemirror not working?

I am currently trying to make codemirror and summernote work, I have followed a online tutorial but there seems to be a problem with the file dependencies. My code is. I have taken the online file urls from summernote's example page, so it should work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Code editor</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet"/>
<link href="css/summernote.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.min.css">
<!-- Add custom CSS here -->
</head>
<body>
<div class="row">
<br />
<div class="container">
<div class="col-lg-12">
<form action="">
<div class="form-group">
<label for="">Descriptions</label>
<textarea id="description" rows="10" class="form-control"></textarea>
</div>
</form>
</div>
</div>
</div>
<!-- /.end Footer -->
<!-- /.end container -->
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/summernote.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#description').summernote({
height: 400,
codemirror: {
theme:'monokai'
}
});
});
</script>
</body>
</html>
Any help would be appreciated.... thanks

Refer the following code snippet, it's working perfectly fine for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>summernote</title>
<!-- include jquery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- include libraries BS3 -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<!-- include codemirror (codemirror.css, codemirror.js, xml.js, formatting.js)-->
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/blackboard.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
<!-- include summernote -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.1/summernote.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.1/summernote.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.summernote').summernote({
height: 200,
tabsize: 2,
codemirror: {
theme: 'monokai'
}
});
});
</script>
</head>
<body>
<textarea class="summernote"><p>Seasons <b>coming up</b></p></textarea>
</body>
</html>
Then point the cdn urls to the local file system url where the files are being located.

Use prettifyHtml: false to disable summernote formatting your code
$scope.summernoteOptions = {
height: 690,
focus: true,
prettifyHtml: false,
codemirror: {
theme: 'default',
mode: "text/html",
lineNumbers: true,
tabMode: 'indent'
}
};

Categories