1
나는 아주 기본적인 기능을 가진 정말 작은 WYSIWYG 텍스트 편집기를 만들어,이 코드 (See live demo in jsfiddle)입니다 :JavaScript : 사용자 선택을 얻고 선택 전후에 태그를 삽입하는 방법은 무엇입니까?
이HTML :
이<section class="wysiwyg-editor" data-wysiwyg="true">
<h2 id="hdwysiwygfw3v">WYSIWYG : By @natanel97</h2>
<textarea id="wysiwyg_ta_ead"></textarea>
<div class="wysiwyg-editor-toolbar wysiwyg-editor-toolbar-menu">
<!-- enable only for test purposes
<button class="wysiwyg-editor-toolbar-menu menu-button" onclick="wysiwyg_save()"><i class="fa fa-floppy-o"></i></button>
-->
<button class="wysiwyg-editor-toolbar-menu menu-button" onclick="wysiwyg_addtag('strong')"><i class="fa fa-bold"></i></button>
<button class="wysiwyg-editor-toolbar-menu menu-button" onclick="wysiwyg_addtag('em')"><i class="fa fa-italic"></i></button>
<button class="wysiwyg-editor-toolbar-menu menu-button" onclick="wysiwyg_addtag('ins')"><i class="fa fa-underline"></i></button>
<button class="wysiwyg-editor-toolbar-menu menu-button" onclick="wysiwyg_toggle('wtgl_link')"><i class="fa fa-link"></i></button>
<div class="wysiwyg-editor-toolbar-menu hover-button-drop-down">
<button class="wysiwyg-editor-toolbar-menu menu-button">Font Size <i class="fa fa-caret-down"></i></button>
<ul class="wysiwyg-editor-toolbar-menu drop-down-menu">
<li><a href="javascript:;" onclick="wysiwyg_addtag('span', null, null, '9')">9pt</a></li>
<li><a href="javascript:;" onclick="wysiwyg_addtag('span', null, null, '11')">11pt</a></li>
<li><a href="javascript:;" onclick="wysiwyg_addtag('span', null, null, '13')">13pt</a></li>
<li><a href="javascript:;" onclick="wysiwyg_addtag('span', null, null, '16')">16pt</a></li>
<li><a href="javascript:;" onclick="wysiwyg_addtag('span', null, null, '19')">19pt</a></li>
<li><a href="javascript:;" onclick="wysiwyg_addtag('span', null, null, '21')">21pt</a></li>
<li><a href="javascript:;" onclick="wysiwyg_addtag('span', null, null, '26')">26pt</a></li>
</ul>
</div>
<div class="wysiwyg-editor-toolbar-menu hover-button-drop-down">
<button class="wysiwyg-editor-toolbar-menu menu-button">Color <i class="fa fa-caret-down"></i></button>
<ul class="wysiwyg-editor-toolbar-menu drop-down-menu color-selection">
<li><a href="javascript:;" style="background:#000;" onclick="wysiwyg_addtag('span', null, null, null, '000')">Black</a></li>
<li><a href="javascript:;" style="background:#fff;" onclick="wysiwyg_addtag('span', null, null, null, 'fff')">White</a></li>
<li><a href="javascript:;" style="background:#c60b0b;" onclick="wysiwyg_addtag('span', null, null, null, 'c60b0b')">Dark red</a></li>
<li><a href="javascript:;" style="background:#f39106;" onclick="wysiwyg_addtag('span', null, null, null, 'f39106')">Orange</a></li>
<li><a href="javascript:;" style="background:#2597d9;" onclick="wysiwyg_addtag('span', null, null, null, '2597d9')">Ocean blue</a></li>
<li><a href="javascript:;" style="background:#72b442;" onclick="wysiwyg_addtag('span', null, null, null, '72b442')">Grass green</a></li>
<li><a href="javascript:;" style="background:#cc3366;" onclick="wysiwyg_addtag('span', null, null, null, 'cc3366')">Fuchsia pink</a></li>
<li><a href="javascript:;" onclick="wysiwyg_toggle('wtgl_color');"><i class="fa fa-ellipsis-h"></i></a></li>
</ul>
</div>
<div class="wysiwyg-editor-toolbar-menu hover-button-drop-down">
<button class="wysiwyg-editor-toolbar-menu menu-button">Font <i class="fa fa-caret-down"></i></button>
<ul class="wysiwyg-editor-toolbar-menu drop-down-menu">
<li><a href="javascript:;">Default</a></li>
</ul>
</div>
<button class="wysiwyg-editor-toolbar-menu menu-button" onclick="wysiwyg_toggle('wtgl_info')"><i class="fa fa-info"></i></button>
</div>
<div class="wysiwyg-editor-contents" id="wysiwyg_ce_ead" contenteditable="true"></div>
<div class="wysiwyg-scenes">
<div class="scene" id="wtgl_link">
<div class="wysiwyg-scenes-tables">
<div class="tr">
<div class="td" style="width:120px;">Link url:</div>
<div class="td"><input type="text" id="wysiwyg-link-href" placeholder="Must start with "http://"" /></div>
</div>
<div class="tr">
<div class="td">Text:</div>
<div class="td"><input type="text" id="wysiwyg-link-text" placeholder="Describe the link" /></div>
</div>
<div class="tr">
<div class="td"></div>
<div class="td">
<button onclick="wysiwyg_addtag('a', 'wysiwyg-link-href', 'wysiwyg-link-text');wysiwyg_toggle('wtgl_link')">Add link</button>
<button type="reset" onclick="wysiwyg_toggle('wtgl_link')">Cancel</button>
</div>
</div>
</div>
</div>
<div class="scene" id="wtgl_color">
<div class="wysiwyg-scenes-tables">
<div class="tr">
<div class="td">Custom HTML Color:</div>
</div>
<div class="tr">
<div class="td"><input type="text" id="wysiwyg-text-color" maxlength="6"
onkeypress="if(this.value == '#' || this.value==' '){ this.value = ''; }" onblur="if(this.value == '#' || this.value==' '){ this.value = ''; }"
placeholder="Without the '#'" /></div>
</div>
<div class="tr">
<div class="td">
<button onclick="wysiwyg_addtag('span', null, null, null, 'wysiwyg-text-color');wysiwyg_toggle('wtgl_color')">Add</button>
<button type="reset" onclick="wysiwyg_toggle('wtgl_color')">Cancel</button>
</div>
</div>
</div>
</div>
<div class="scene" id="wtgl_info">
<div class="wysiwyg-scenes-tables">
<div class="tr">
<div class="td">
<p><strong>Untitled WYSIWYG</strong></p>
<p>Text editor</p>
<p>v0.1</p>
<p>
Written & Developed by <a href="http://stackoverflow.com/users/6247920/natanel97">@natanel97</a></p>
<p>
<br />
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
<img alt="Creative Commons license" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" />
</a>
<br />
<span style="font-size:11.6px;">This work is licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
Attribution-NonCommercial-ShareAlike 4.0 International </a>.
</span>
<br />
</p>
<button type="reset" onclick="wysiwyg_toggle('wtgl_info')">Close</button>
</div>
</div>
</div>
</div>
</div>
</section>
자바 스크립트 :
function wysiwyg_convert() {
var wysiwyg_textarea = document.querySelector('.wysiwyg-editor textarea');
var wysiwyg_div_edit = document.querySelector('.wysiwyg-editor .wysiwyg-editor-contents');
wysiwyg_div_edit.onkeypress = function() {
if(wysiwyg_textarea.value != wysiwyg_div_edit.innerHTML) {
wysiwyg_textarea.value = wysiwyg_div_edit.innerHTML;
}
else {
if(wysiwyg_div_edit.innerHTML != wysiwyg_textarea.value) {
wysiwyg_div_edit.innerHTML = wysiwyg_textarea.value;
}
}
}
}
function wysiwyg_addtag(tag, href, title, fontsize, color) {
var tag;
var wysiwyg_div_edit = document.querySelector('.wysiwyg-editor .wysiwyg-editor-contents');
if(tag == 'strong' || tag == 'em' || tag == 'ins') {
wysiwyg_div_edit.innerHTML = wysiwyg_div_edit.innerHTML + ' <' + tag + '>Text</' + tag + '>';
}
else if(tag == 'img' || tag == 'br') {
if(tag == 'img') {
wysiwyg_div_edit.innerHTML = wysiwyg_div_edit.innerHTML + ' <' + tag + ' src="' + href + '" alt="' + title + '" />';
}
if(tag == 'br') {
wysiwyg_div_edit.innerHTML = wysiwyg_div_edit.innerHTML + ' <' + tag + ' />';
}
}
else {
if(tag == 'a') {
var href = document.getElementById(href).value;
var htxt = document.getElementById(title).value;
if(href != null) {
wysiwyg_div_edit.innerHTML = wysiwyg_div_edit.innerHTML + ' <' + tag + ' href="' + href + '">' + htxt + '</' + tag + '>';
}
}
if(tag == 'span') {
if(fontsize != null) {
wysiwyg_div_edit.innerHTML = wysiwyg_div_edit.innerHTML + ' <' + tag + ' style="font-size:' + fontsize + 'pt;">Text</' + tag + '>';
}
else if(color != null) {
if(document.getElementById('wtgl_color').style.display == 'block') {
var color = document.getElementById(color).value;
}
wysiwyg_div_edit.innerHTML = wysiwyg_div_edit.innerHTML + ' <' + tag + ' style="color:#' + color + ';">Text</' + tag + '>';
}
}
}
}
function wysiwyg_save() {
// enable it only for testing purposes
var wysiwyg_textarea = document.querySelector('.wysiwyg-editor textarea');
alert(wysiwyg_textarea.value);
}
function wysiwyg_toggle(id) {
var id = document.getElementById(id);
if(id.style.display == 'block') {
id.style.display = 'none';
}
else {
id.style.display = 'block';
}
}
document.addEventListener('DOMContentLoaded', function() {
wysiwyg_convert();
});
내가 원하는 선택한 텍스트를 수신 할 함수를 생성하려면 div 내부에서 선택하고 스타일 버튼 중 하나를 누르면 다음과 같이됩니다 : <someHTMLtag [...]>Selected Text</someHTMLtag>.
이미 가지고있는 기능을 사용하여 만들 수 있습니까? wysiwyg_addtag 안에 코드를 추가 할 수 있습니까? 내가 할 수 있다면, 어떻게?
:
여기에 방법에 대한 몇 가지 문서입니다. –
[강조/선택한 텍스트 가져 오기] 가능한 복제본 (http://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text) –