富文本前台接收方法实例

Posted 2020-09-14 DoubleLife
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了富文本前台接收方法实例相关的知识，希望对你有一定的参考价值。
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@include file="../common/common.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<title>美丽乡村</title>
<style type="text/css">
#country {
    overflow-y: auto;
    overflow-x: hidden;
}

.countryItem {
    margin-bottom: 10px;
    color: #333;
}

.countryTexeCon {
    padding: 10px 15px;
    background-color: #ffffff;
}

.countryName {
    padding-bottom: 5px;
    color: #333;
}

.countryPro {
    color: #929292;
    font-size: 14px;
    height: auto;
    word-break: break-all;
}

.countryItem>img {
    width: calc(100% - 6px);
    height: 100%;
    border: 3px solid #f1f1f1;
}

.countryText {
    position: relative;
}

.countryTextTitle {
    padding: 15px 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    border-bottom: 1px solid #cccccc;
    color: #333;
    width: 100%;
    text-align: center;
    font-size: 21px;
    background-color: #fbfbfb;
}

.countryTextTitle>img {
    position: absolute;
    top: 9px;
    left: 12px;
    width: 21px;
    padding: 10px;
}

.countryText {
    padding-top: 60px;
    background-color: #fff;
}

.countryTextBody {
    padding: 15px;
}

.countryTextBody .text {
    text-indent: 28px;
}

.countryTextBody2 img {
    max-width: 95%;
    margin: 5px auto;
    display: inherit;
}

.goArea {
    margin-top: 5px;
    padding: 5px 0;
    background-color: aliceblue;
    position: relative;
    height: 25px;
}

.goArea>img {
    position: absolute;
    left: 10px;
    top: 5px;
    width: 23px;
}

.goArea>div {
    position: absolute;
    right: 10px;
    top: 6px;
}

.goWay {
    background-color: #0DBEF5;
    color: white;
    border-radius: 5px;
    font-size: 14px;
    padding: 2px 10px;
    padding-left: 22px;
    margin-left: 10px;
    cursor: pointer;
    position: relative;
}

.goWayImg {
    position: absolute;
    top: 2px;
    left: 5px;
    width: 16px;
}
.countryTextBody img{
    max-width:100%;
}
[v-cloak] {
    display: none;
} 
</style>
</head>
<body style="background-color: #fbf7e9;">
    <div id="country"  v-cloak>
        <div class="countryList" v-show="bl">
            <div class="countryItem" v-for="(item,index) in countryList"
                @click="goCountryText(item)">
                <img :src=item.pictureUpload />
                <div class="countryTexeCon">
                    <div class="countryName">{{item.name}}</div>
                    <div class="countryPro">{{item.brief}}</div>
                </div>
            </div>
        </div>
        <div class="countryText" v-show="!bl">
            <div class="countryTextTitle">
                <span>{{countryText.name}}</span> <img src="image/leftArrow.png"
                    @click="backCountryList()" />
            </div>
            <div class="countryTextBody">
                <div v-html=‘countryText.description‘></div>
                <div class="goArea">
                    <img src="image/goArea.png">
                    <div>
                        <span class="goWay">公交<img class="goWayImg"
                            src="image/busIc.png"></span> <span class="goWay">驾车<img
                            class="goWayImg" src="image/driveIc.png"></span> <span
                            class="goWay">步行<img class="goWayImg"
                            src="image/walkIc.png"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="textR"></div>
</body>
<script type="text/javascript">
    var base = $("base").attr("href");
    var country = new Vue(
            {
                el : ‘#country‘,
                created : function() {
                    this.$http(
                                    {
                                        url : base+"rest/transportCountry?id=",
                                    }).then(
                                    function(res) {
                                        var tempC = res.data;
                                        for (var i = 0; i < tempC.length; i++) {
                                            var str = tempC[i].description;
                                            var temp = document.getElementById("textR");
                                            temp.innerHTML = str;
                                            var output = temp.innerText || temp.textContent;
                                            temp.innerHTML = "";
                                            console.debug(tempC[i].description);
                                            tempC[i].description = output;
                                        }
                                        this.countryList = tempC;
                                    });
                },
                data : {
                    countryList : "",
                    bl : true,
                    countryText : {
                        name : "",
                        info : []
                    }
                },
                methods : {
                    goCountryText : function(item) {
                        this.bl = false;
                        this.countryText = item;
                    },
                    backCountryList : function() {
                        this.bl = true;
                    }
                }
            });
    function updateBusSize() {
        $("#country").height($(window).height());
    };
    // 更新页面元素高度
    updateBusSize();
    $(window).resize(function() {
        updateBusSize();
    });
    var nowA = "";
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            nowA = r.point.lat + ‘,‘ + r.point.lng;
        } else {
            alert(‘failed‘ + this.getStatus());
        }
    }, {
        enableHighAccuracy : true
    });
    $(".goWay").click(
                    function() {
                        var way = $(this).text();
                        var goway = "";
                        if (way == "公交") {
                            goway = "transit";
                        } else if (way == "驾车") {
                            goway = "driving";
                        } else if (way == "步行") {
                            goway = "walking";
                        }
                        location.href = "http://api.map.baidu.com/direction?origin=latlng:"
                                + nowA
                                + "|name:&destination=latlng:"
                                + country.countryText.lat
                                + ","
                                + country.countryText.lng
                                + "|name:"
                                + country.countryText.name
                                + "&mode="
                                + goway
                                + "&region=南京&output=html&src=yourCompanyName|yourAppName"
                    });
</script>
</html>
以上是关于富文本前台接收方法实例的主要内容，如果未能解决你的问题，请参考以下文章
python-django中使用ckeditor富文本，后台没问题，前台为啥不好使？
浅谈angularjs绑定富文本出现的小问题
iOS富文本实例
为啥在div里面做富文本编辑没有作用
小程序rich-text接收富文本不起作用
关于iOS富文本使用
富文本前台接收 方法实例

富文本前台接收方法实例
