标签：jquery javascript codemirror

我有一个简单的codemirror文本编辑器,我正在使用bootstrap.我可以单击我的粗体和代码按钮确定,它会严重包装所选/突出显示的文本.

问题1：当文字被包裹在标签中时,我们可以说< b>某事< / b>如果我再次选择/突出显示它并单击相同的粗体按钮,我如何在codemirror中撤消它？

这是CodePen Full View

这是Codepen Code View

脚本

<script type="text/javascript">
$(document).ready(function() {

// tooltips on hover
$('[data-toggle=\'tooltip\']').tooltip({container: 'body', html: true});

// Makes tooltips work on ajax generated content
$(document).ajaxStop(function() {
    $('[data-toggle=\'tooltip\']').tooltip({container: 'body'});
});

$('[data-toggle=\'tooltip\']').on('remove', function() {
    $(this).tooltip('destroy');
});


var editor = document.getElementById('text-editor');

$("#text-editor").each(function (i) {

    editor = CodeMirror.fromTextArea(this, {
        lineNumbers: true,
        mode: 'html'

    });

    editor.on("change", function() {
        document.getElementById('question-preview').innerHTML = editor.getValue('<br>')
        .replace('<?','&lt;?')
        .replace('?>', '?&gt;')
        .replace('<script>', '&lt;script&gt;')
        .replace('<script>', '&lt;/script&gt;')
        .replace('<div>', '&lt;div&gt;')
        .replace('</div>', '&lt;/div&gt;')

    });

    //$('#hr').append('<hr />');

    $('a[role="button"]').click(function(){

        var val = $(this).data('val');
        var string = editor.getSelection();

        switch(val){

            case 'bold': 
                editor.replaceSelection('<b>' + string + '</b>');
            break;

            case 'italic': 
                editor.replaceSelection('<i>' + string + '</i>');
            break;

            case 'quote': 
                editor.replaceSelection('<blockquote><p>' + string + '</p></blockquote>');
            break;

            case 'code': 
                editor.replaceSelection('<pre><code>' + string + '</code></pre>');

            break;

            case 'hr': 
                editor.replaceSelection('<hr/>');

            break;
        }

    });

    $(".dropdown-menu li a[class='btn-heading']").click(function(){
        var val = $(this).data('val');
        var string = editor.getSelection();

        switch(val){
            case 'h1': 
                editor.replaceSelection('<h1>' + string + '</h1>');
            break;
            case 'h2': 
                editor.replaceSelection('<h2>' + string + '</h2>');
            break;
            case 'h3': 
                editor.replaceSelection('<h3>' + string + '</h3>');
            break;
            case 'h4': 
                editor.replaceSelection('<h4>' + string + '</h4>');
            break;
            case 'h5': 
                editor.replaceSelection('<h5>' + string + '</h5>');
            break;
            case 'h6': 
                editor.replaceSelection('<h6>' + string + '</h6>');
            break;
        }
    });
});

});

</script>

HTML

<div class="container">

<div class="row">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel panel-default"  onl oad="text_editor();">
<div class="panel-heading">

<ul class="nav nav-pills" id="heading">
    <li><a role="button" data-val="bold">Bold</a></li>
    <li><a role="button" data-val="italic">Italic</a></li>
    <li><a role="button" data-val="link">Hyperlink</a></li>
    <li><a role="button" data-val="quote">Quote</a></li>
    <li><a role="button" data-val="code">Code</a></li>
    <li><a role="button" data-val="image">Image</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown">Heading <span class="caret"></span></a>
        <ul class="dropdown-menu"> 
            <li><a class="btn-heading" data-val="h1">H1</a></li> 
            <li><a class="btn-heading" data-val="h2">H2</a></li> 
            <li><a class="btn-heading" data-val="h3">H3</a></li> 
            <li><a class="btn-heading" data-val="h4">H4</a></li>
            <li><a class="btn-heading" data-val="h5">H5</a></li> 
            <li><a class="btn-heading" data-val="h6">H6</a></li>
        </ul>
    </li>
</ul>

</div>
<div class="panel-body">
<textarea id="text-editor" name="text-editor" class="form-control"></textarea>
</div>
</div>
</div>

</div>

<div class="row">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="question-preview"></div>
</div>

</div>

</div>

解决方法:

我试过这个并且它有效：

    $('a[role="button"]').click(function(){

        var val = $(this).data('val');
        var string = editor.getSelection();

        switch(val){

            case 'bold':
              if(string.indexOf('<b>') > -1){
                editor.replaceSelection(string.replace('<b>', '').replace('</b>', ''));
              } else{
                editor.replaceSelection('<b>' + string + '</b>'); 
              }
            break;

            case 'italic': 
                editor.replaceSelection('<i>' + string + '</i>');
            break;

            case 'quote': 
                editor.replaceSelection('<blockquote><p>' + string + '</p></blockquote>');
            break;

            case 'code': 
                editor.replaceSelection('<pre><code>' + string + '</code></pre>');

            break;

            case 'hr': 
                editor.replaceSelection('<hr/>');

            break;
        }

    });

它只检查你的字符串是否有< b>标签,如果只是删除它们.

CodePen link

标签：jquery,javascript,codemirror
来源： https://codeday.me/bug/20190628/1313321.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。