- codingsoho.com

博客五部曲之二 - 高级博客

8 表单数据动态预览

markdown编辑器自带的编辑有预览功能，这一节我们会自己实现这个预览功能，显示整个帖子的内容而不仅仅是内容本身。

首先比较掉自带的预览功能

content = forms.CharField(widget=PagedownWidget(show_preview=False))

在前端我们主要通过JQuery来实现。

添加显示预览内容的div，定义两个id编辑，后面显示内容时直接对它进行操作。

<div class="col-sm-6">
    <h1>Preview</h1>
    <div class="content-previwe">
        <h3 id="preview-title"></h3>
        <p id="preview-content"></p>
    </div>
</div>

添加jquery代码

<script type="text/javascript">
    $(document).ready(function(){
        var titleInput= $("#id_title");        
        //set tile
        function setTitle(value){
            $("#preview-title").text(titleInput.val())    
        }
        setTitle(titleInput.val())
        titleInput.keyup(function(){
            var newContent = $(this).val()
            setTitle(newContent)
        })
        var contentInput = $("#id_content")
        function setContent(value){
            console.log(value)
            var markedContent = marked(value)
            $("#preview-content").html(markedContent)
            $("#preview-content img").each(function(){
                $(this).addClass("img-responsive");  
            })
        }
        if(contentInput.val()){
            setContent(contentInput.val())
        }        
        contentInput.keyup(function(){
            var newContent = $(this).val()
            setContent(newContent)
        })
    })
</script>

几个要注意的地方

前面用id标签定义了对象，在JQuery里直接用$(“#ID”)选择器对其进行操作。
val() 用于获取元素值，text()在元素内显示内容
keyup表示输入结束事件，用于属于过程中的实时更新，否则只会在刚开始时进行预览显示
对于帖子内容，首先用marked将其转换，然后通过html()函数将其显示出来。
each函数表示轮询符合选择器的所有元素进行操作，给内嵌的图片添加img-responsive class以支持响应式显示