1

Я хочу создать текстовый редактор Мне посоветовали использовать execCommand но как я узнал она вышла из употребления.

var doc = $('.conttext').get(0);

$(document).ready(function(){
    $('.html').click(function(){
        var highlight = window.getSelection();  
        document.execCommand('insertHTML', false, '<span style="color:green" >'+highlight+'</span>');
    });
});

$("body" ).on('click', ".link", function(e) {
    url = prompt('Введите адрес ссылки', 'http:\/\/');
    document.execCommand('createlink', false, url);
})

$("body" ).on('click', ".unlink", function(e) {
    document.execCommand('unlink', false);
})

$("body" ).on('click', ".center", function(e) {
    document.execCommand('justifyCenter', false);
})
$("body" ).on('click', ".full", function(e) {
    document.execCommand('justifyFull', false);
})
$("body" ).on('click', ".left", function(e) {
    document.execCommand('justifyLeft', false);
})
$("body" ).on('click', ".right", function(e) {
    document.execCommand('justifyRight', false);
})


$("body" ).on('click', ".italic", function(e) {
    document.execCommand('italic', false);
})
$("body" ).on('click', ".bold", function(e) {
    document.execCommand('bold', false);
})
 

$("body" ).on('click', ".image", function(e) {
    url = prompt('Введите адрес ссылки', 'http:\/\/');
    document.execCommand('insertImage', false, url);
})

$("body" ).on('click', ".color_text", function(e) {
    url = prompt('Введите цвет', '');
    document.execCommand('foreColor', false, url);
})

$("body" ).on('click', ".color_back", function(e) {
    url = prompt('Введите цвет', '');
    document.execCommand('backColor', false, url);
})

$("body" ).on('click', ".font_type", function(e) {
    url = prompt('Введите шрифт', '');
    document.execCommand('fontName', false, url);
})

$("body" ).on('click', ".font_size", function(e) {
    url = prompt('Введите размер шрифта', '');
    document.execCommand('fontSize', false, url);
})


$("body" ).on('click', ".line", function(e) {
    document.execCommand('insertHorizontalRule', false);
})

$("body" ).on('click', ".strike", function(e) {
    document.execCommand('strikeThrough', false);
})

$("body" ).on('click', ".under", function(e) {
    document.execCommand('underline', false);
})

$("body" ).on('click', ".undo", function(e) {
    document.execCommand('undo', false);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="conttext2" contenteditable >Text</div>

<div class="conttext" contenteditable >Text</div>

<a href="#" class="html">html</a>
<a href="#" class="link">link</a>
<a href="#" class="unlink">unlink</a>

<a href="#" class="full">full</a>
<a href="#" class="left">left</a>
<a href="#" class="right">right</a>
<a href="#" class="center">center</a>

<a href="#" class="italic">italic</a>
<a href="#" class="bold">bold</a>

<a href="#" class="image">image</a>

<a href="#" class="color_text">color_text</a>
<a href="#" class="color_back">color_back</a>

<a href="#" class="font_size">font_size</a>
<a href="#" class="font_type">font_type</a>
 <a href="#" class="strike">strike</a>

<a href="#" class="line">line</a>

<a href="#" class="under">under</a>

<a href="#" class="undo">undo</a>

Может ли кто нибудь посоветовать современный редактор теста с

Добавлением и удалением собственных html оберток вокруг выделенного текста, Переноса строк, Применением стилей, повтором или отменой, и возможность привязать к textarea по id.

Просто готовый текстовый редактор мне не подходит. так как я не смогу его костомизировать под себя.

1
  • ну можешь взять исходники sublime text и переписать его под себя 28 окт 2020 в 9:58

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.