Reputation: 21
I'm trying to make a text editor that can bold, italic and underline text using jQuery without using any HTML
The problem is that I can't make a selected text bold, the console log outputs "execCommand is not a function", am I doing something wrong? How can I achieve what I'm trying to do?
Here is my code:
(function ($) {
$.fn.text_editor = function(options) {
this.each(function() {
var buttons = {
buttons: ['bold', 'italic', 'underline']
};
var parametres = $.extend(buttons, options);
// generated html
$("body").html("<div class=\"container\">");
$("body").append("<h1 style=\"padding-left:55px;\">text editor</h1>");
$("body").append("<textarea rows=\"10\" cols=\"50\"></textarea>");
$("body").append("<br>");
$("body").append("<div class=\"buttons\"");
$("body").append("<button id=\"bold\">gras</button>");
$("body").append("<button id=\"italic\">italic</button>");
$("body").append("<button id=\"barre\">underline</button>");
// js
$("bold").execCommand("bold");
$("italic").execCommand("italic");
$("underline").execCommand("underline");
console.log($("bold"));
});
};
})(jQuery);
$(document).ready(function() {
$("textarea").text_editor()
});
Upvotes: 0
Views: 2012
Reputation: 45
After some searching, I came acrossthis article.
and this code pen. https://codepen.io/souporserious/pen/xBpEj
hope this helps.
$('.wysiwyg-controls a').on('click', function(e) {
e.preventDefault();
document.execCommand($(this).data('role'), false);
});
$controls-color: #ADB5B9;
$border-color: #C2CACF;
* {
box-sizing: border-box;
}
.wysiwyg-editor {
display: block;
width: 400px;
margin: 100px auto 0;
}
.wysiwyg-controls {
display: block;
width: 100%;
height: 35px;
border: 1px solid $border-color;
border-bottom: none;
border-radius: 3px 3px 0 0;
background: #fff;
a {
display: inline-block;
width: 35px;
height: 35px;
vertical-align: top;
line-height: 38px;
text-decoration: none;
text-align: center;
cursor: pointer;
color: $controls-color;
}
[data-role="bold"] {
font-weight: bold;
}
[data-role="italic"] {
font-style: italic;
}
[data-role="underline"] {
text-decoration: underline;
}
}
[class^="menu"] {
position: relative;
top: 48%;
display: block;
width: 65%;
height: 2px;
margin: 0 auto;
background: $controls-color;
&:before {
@extend [class^="menu"];
content: '';
top: -5px;
width: 80%;
}
&:after {
@extend [class^="menu"];
content: '';
top: 3px;
width: 80%;
}
}
.menu-left {
&:before, &:after {
margin-right: 4px;
}
}
.menu-right {
&:before, &:after {
margin-left: 4px;
}
}
.wysiwyg-content {
max-width: 100%;
width: 100%;
height: auto;
padding: 12px;
resize: both;
overflow: auto;
font-family: Helvetica, sans-serif;
font-size: 12px;
border: 1px solid $border-color;
border-radius: 0 0 3px 3px;
background: #F2F4F6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wysiwyg-editor">
<div class="wysiwyg-controls">
<a href='#' data-role='bold'>B</a>
<a href='#' data-role='italic'>I</a>
<a href='#' data-role='underline'>U</a>
<a href='#' data-role='justifyleft'><i class="menu-left"></i></a>
<a href='#' data-role='justifycenter'><i class="menu-center"></i></a>
<a href='#' data-role='justifyright'><i class="menu-right"></i></a>
</div>
<div class="wysiwyg-content" contenteditable>
<b>Let's make a statement!</b>
<br>
<i>This is an italicised sentence.</i>
<br>
<u>Very important information.</u>
</div>
</div>
NOTE: this is not my code.
Upvotes: 1
Reputation: 4516
execCommand
is an experimental function, and its an function of document and not html elements. You can however call this function as below -
$("#bold").document.execCommand("bold");
$("#italic").document.execCommand("italic");
$("#underline").document.execCommand("underline");
Upvotes: 0