• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

基于vue实现的小程序管理后台图文编辑器

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

附加说明:

1)基于element-ui的button和upload组件

2)支持文字和图片混合编辑

实现思路:

  页面中主要的组件:多行文本编辑框(高度随文本变化)、图片上传

       功能点梳理:

              新增段落,在文末或者任一段落上可点击添加段落按钮,点击后在文末或段落后新增一个段落;

              新增的段落可选择是文本还是图片,选择文本则将该新增段落变为多行文本编辑框,选择图片则触发选择本地文件进行上传,上传完后替换原新增段落;

              任一段落可进行上下移动、删除、在其下增加新增端口的操作;

              完成编辑,点击完成编辑按钮,用户可指定后续操作,一般是将编辑的内容保存到后端。

代码如下:

<template>
    <div class="editor-viewer">
        <div class="content-viewer">
            <div class="content-list">
                <div v-for="(content, index) in contentList" class="editor-item"
                    :key="index" :tabindex="index" @mouseover="handleMouseIn(index, content)"
                    @mouseout="handleMouseOut(index, content)">
                    <div class="textarea" contenteditable="true" v-if="content.type === \'text\'" >
                        {{content.value}}
                    </div>
                    <!-- <textarea v-if="content.type === \'text\'" v-model="content.value"></textarea> -->
                    <img v-if="content.type === \'image\'" :src="content.value">
                    <div class="add-module" v-if="content.type === \'empty\'">
                        <el-button @click="change2Text(index)">A</el-button>
                        <el-upload :data="{index: index}"
                            class="el-button"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-success="handleUploadSuccess" 
                            :before-upload="beforeImageUpload" titlr="只能上传jpg/png文件,且不超过2M">
                            <i class="el-icon-picture" ></i>
                        </el-upload>
                        <el-button @click="delOne(index)" icon="el-icon-delete"></el-button>
                    </div>
                    <div class="editor-item-ops" v-if="content.type !== \'empty\' " v-show="content.visible">
                        <el-button icon="el-icon-plus" circle @click="beginAdd(index)"></el-button>
                        <el-button icon="el-icon-arrow-down" v-if="contentList.length > 1 && index !== contentList.length - 1" 
                            circle @click="moveDown(index)"></el-button>
                        <el-button icon="el-icon-arrow-up" circle  v-if="contentList.length > 1 && index !== 0"
                            @click="moveUp(index)"></el-button>
                        <el-button icon="el-icon-delete" circle @click="delOne(index, true)"></el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="editor-btn-viewer">
            <el-button class="editor-btn" icon="el-icon-circle-check-outline"
                @click="finishEdit"> 完成编辑</el-button>
            <el-button class="editor-btn" icon="el-icon-circle-plus-outline" @click="addAtLast"> 添加模块</el-button>
        </div>
        
    </div>
</template>

<script>
import {Upload} from \'element-ui\'
export default {
    data () {
        return {
            contentList: []
        }
    },
    props: [\'contents\'],
    components: {
        ElUpload: Upload
    },
    methods: {
        spliceContent (start, count, added) {
            if (typeof added !== \'undefined\') {
                return this.contentList.splice(start, count, added)
            } else {
                return this.contentList.splice(start, count)
            }
        },
        addAtLast () {
            this.contentList.push({type: \'empty\', value: \'\', visible: false})
        },
        beginAdd (index) {
            this.spliceContent(index+1, 0, {type: \'empty\', value: \'\', visible: false}) 
        },
        moveDown (index) {
            let cur = this.spliceContent(index, 1)
            this.spliceContent(index + 1, 0, cur[0])
        },
        moveUp (index) {
            let cur = this.spliceContent(index, 1)
            this.spliceContent(index - 1, 0, cur[0])
        },
        delOne (index, delImage = false) {
            this.spliceContent(index, 1)
            if (delImage) {
                // todo: 需要删除内容服务器上的图片文件
            }
        },
        change2Text (index) {
            this.spliceContent(index, 1, {type: \'text\', value: \'\', visible: false})
        },
        change2Image (index) {
            this.spliceContent(index, 1, {type: \'image\', value: \'\', visible: false})
        },
        handleUploadSuccess(res, file) {
            // res 需要返回附加data:index
            let imageUrl = URL.createObjectURL(file.raw);
            this.spliceContent(res.index, 1, {type: \'image\', value: imageUrl, visible: false})
        },
        beforeImageUpload(file) {
            const isJPG = file.type === \'image/jpeg\';
            const isLt2M = file.size / 1024 / 1024 < 2;
            console.info(file)
            if (!isJPG) {
            this.$message.error(\'上传头像图片只能是 JPG 格式!\');
            }
            if (!isLt2M) {
            this.$message.error(\'上传头像图片大小不能超过 2MB!\');
            }
            return isJPG && isLt2M;
        },
        handleMouseIn (index) {
            let item = this.contentList[index];
            item.visible = true;
            this.spliceContent(index, 1, item);
        },
        handleMouseOut (index) {
            let item = this.contentList[index];
            item.visible = false;
            this.spliceContent(index, 1, item);
        },
        finishEdit () {

        }
    },
    mounted () {
        this.contentList = this.contents.map(el => {
            el.visible = false;
            return el;
        });
    }
}
</script>
<style scoped>
.editor-viewer {
    width: 600px;
    height: 600px;
    border: 1px solid #ddd;
    position: relative;
}
.content-viewer {
    width: 100%;
    height: 552px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.editor-btn-viewer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
.el-button {
    background-color: #eee;
}
.editor-btn{
    width: 50%;
    padding: 15px;
    outline: none;
    border: 1px solid #ddd;
    border-radius: 0;
    margin: 0;
    font-size: 16px;
}
.el-button:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}
.content-list {
    padding: 5px;
}
.editor-item +.editor-item{
    margin-top: 5px;
}
.editor-item {  
    position: relative;
}
div.editor-item:hover{
    box-shadow: 0 0 10px #ccc;

}
.editor-item>.textarea, 
 .editor-item>img{
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
    min-height: 200px;
    text-align: left;
}
.editor-item>img{
    width: 571px;
}
.editor-item>textarea{
    resize: none;
}
.editor-item-ops {
    height: 50px;
    position: absolute;
    right: 6px;
    bottom: 0;
    z-index:100;
}
.editor-item-ops > .editor-btn {
    background-color: #666;
}
.add-module {
    border: 1px dashed #ccc;
    min-height: 100px;
    width: 100%;
    line-height: 100px;
}
</style>

  


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序项目总结发布时间:2022-07-18
下一篇:
微信小程序开发环境搭建发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap