Question

在我的代码上，我有一个区域，我可以在打字时预览任何代码。我遇到的问题是当我选择一些文本然后点击按钮时，粗体，斜体，前。预览区域不会立即显示相同的代码。

问题如何在选择某些文字时确保预览区域，然后单击按钮，它将立即在下方显示正确的代码。目前只显示纯文本。

直播示例

脚本

<script type="text/javascript">

$('#code_view').on('click', function(e) {
    var code = $('#editable').clone();
    $('#preview').html(code);
});

$('#editable').keyup(function(){
    $('#code_view').trigger('click');
});

$('#editable').each(function(){
    this.contentEditable = true;
});
</script>

HTML

<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
<div class="form-group">
<input type="text" class="form-control" name="title" placeholder="Title" />
</div>
</div>
</div>

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
<div class="panel panel-wmd">
    <div class="panel-heading">
        <div class="clearfix">
            <div class="pull-left">
                <button id="bold" class="btn btn-default">B</button>
                <button id="italic" class="btn btn-default"><i>I</i></button>
                <button id="pre" class="btn btn-default">{}</button>
                <button id="code_view" class="btn btn-default">Code View</button>
            </div>
            <div class="pull-right">
            </div>
        </div> 
    </div>
    <div class="panel-body">

        <div id="editable"></div>
    </div><!-- .panel-body -->
</div><!-- .panel -->
</div>
</div>

<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
        <div id="preview"></div>
    </div>  
</div>
</div><!-- .container -->

Answer 1

看到代码，你已经做好了一切。要在点击按钮时立即获得结果，您需要在功能按钮上调用code_view点击功能。

更新的代码：

Code Pen

希望这会对你有所帮助。

- 帮助：）

clone div没有立即显示相同的代码

1 个答案: