I have a small editor with basic features, which allows me to format the text and at the same time each normal or formatted text that is written in it div editable
, that information with the same value, it happens textarea
that it remains hidden, and at the same time the StackOverflow -like preview that shows a preview when typing a question.
You can check it out to familiarize yourself:
$(function() {
$('#editControls a').click(function(e) {
switch($(this).data('role')) {
case 'p':
document.execCommand('formatBlock', false, $(this).data('role'));
break;
default:
document.execCommand($(this).data('role'), false, null);
break;
}
});
let htmlDiv = $("#editor");
htmlDiv.on("keyup", function(e) {
$(".editor-preview").val(htmlDiv.html());
$(".editor-preview").keyup();
});
$('.editor-preview').keyup(function(){
var value = $(this).val();
var contentAttr = $(this).attr( 'class' );
$( '.' + contentAttr + '' ).html(value);
});
});
.btn-group {
position: relative;
display: inline-block;
font-size: 0;
vertical-align: middle;
white-space: nowrap;
}
.btn-group+.btn-group {
margin-left: 5px;
}
.btn-group a {
text-decoration: none;
}
.btn-editor {
height: 30px;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 11px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border-radius: 4px;
border: 1px solid transparent;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-group>.btn-editor:first-child {
margin-left: 0;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
.btn-group>.btn-editor+.btn-editor {
margin-left: -1px !important;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-not-space{
position: relative;
float: left;
margin-left: 0 !important;
border-radius: inherit;
border: 1px solid transparent;
border-color: #ccc;
}
.btn-editor.btn-not-space:hover {
background-color: rgba(230, 230, 230, 0.32);
}
#editor {
border:1px solid #ccc;
}
#preview {
padding: 1em;
margin: 0 auto;
width: 97%;
border-top: 1px dotted #c8ccd0;
border-bottom: 1px dotted #c8ccd0;
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="editor-wrapper">
<div id="editControls">
<div class="btn-group">
<a class="btn-editor btn-not-space" data-role="bold" data-ref="#"><b>Bold</b></a>
<a class="btn-editor btn-not-space" data-role="italic" data-ref="#"><em>Italic</em></a>
<a class="btn-editor btn-not-space" data-role="underline" data-ref="#"><u><b>U</b></u></a>
<a class="btn-editor btn-not-space" data-role="strikeThrough" data-ref="#"><strike>abc</strike></a>
</div>
</div>
<div id="editor" contenteditable></div>
<textarea id="textarea" name="detail" class="editor-preview" style="display: none;"></textarea>
<div id="preview" class="editor-preview"></div>
</div>
It works perfectly, but I need a small feature, which allows me to insert an embed code for example a iframe
youtube video or a twitter post and at the same time be able to manually add HTML
.
For this I need a label button <a>
that allows me to see the generated code and at the same time to be able to write code HTML
and the option to return to normality.
Example:
How can I implement a function similar to the image, but in a simple not very complex way to my editor, to be able to write and insert HTML
.
Here I leave you a possible option, although it is a simple thing. The idea is to have a code button that changes the content of the
div
editable to the text mode representation of its internal code, and when the button is clicked again, the code representation is shown again as code. (I don't know if I explained myself well, but it's basically what you want, I promise :P)This can be done quite simply with jQuery with the
html()
and methodstext()
. To display the internal code in text mode:And to interpret the code shown in text mode again, do the following:
As you can see it is quite simple/basic.
on
The only thing more to add would be a variable that controls which of the modes you are in ( u code modeoff
) so that you can control what is displayed and where (not only in the editor but also in the preview).Here you can see it working (with comments):