100.所见即所得(二)

未匹配的标注

本节说明

  • 对应视频教程第 100 小节:WYSIWYG: Part 2

本节内容

本节我们继续继承富文本编辑器。如果我们访问列表页面:
file
这是我们要修改的第一个地方:
forum\resources\views\threads_list.blade.php

    .
    .
    <div class="panel-body">
        <div class="body">{!! $thread->body !!}</div>
    </div>
    .
    .

刷新页面:
file
接下来我们要集成富文本编辑器的地方是回复的相关区域。首先是新增回复:
forum\resources\assets\js\components\NewReply.vue

<template>
    <div>
        <div v-if="signedIn">
            <div class="form-group">
                <wysiwyg name="body" v-model="body" placeholder="Have something to say?" :shouldClear="completed"></wysiwyg>
            </div>
            .
            .
</template>
<script>
    .
    .
    export default {
        data() {
            return {
                body:'',
                completed:false
            };
        },
        .
        .
        methods: {
            addReply() {
                axios.post(location.pathname + '/replies', { body:this.body })
                    .catch(error => {
                        flash(error.response.data,'danger');
                    })
                    .then(({data}) => {
                       this.body = '';
                       this.completed = true;

                       flash('Your reply has been posted.');

                       this.$emit('created',data);
                    });
            }
        }
    }
</script>

在添加回复的区域我们集成了富文本编辑器,并且绑定了:shouldClear属性,属性值为completed。当添加回复addReply后,completed值为true。然后我们监听shouldClear,当值为true时清空新建回复区域的内容:
forum\resources\assets\js\components\Wysiwyg.vue

<template>
    <div>
        <input id="trix" type="hidden" :name="name" :value="value">

        <trix-editor ref="trix" input="trix" :placeholder="placeholder"></trix-editor>
    </div>
</template>

<script>
    import Trix from 'trix';

    export default {
        props:['name','value','placeholder','shouldClear'],

        mounted () {
            this.$refs.trix.addEventListener('trix-change', e => {
                this.$emit('input', e.target.innerHTML);
            });

            this.$watch('shouldClear', () => {
               this.$refs.trix.value = '';
            });
        }
    }
</script>

最后一个地方是显示回复的区域:
forum\resources\assets\js\components\Reply.vue

    .
    .
    <div class="panel-body">
        <div v-if="editing">
            <form @submit.prevent="update">
                <div class="form-group">
                    <wysiwyg v-model="body"></wysiwyg>
                </div>

                <button class="btn btn-xs btn-primary" >Update</button>
                <button class="btn btn-xs btn-link" @click="cancelReply" type="button">Cancel</button>
            </form>
        </div>

        <div v-else v-html="body"> </div>
    </div>
    .
    .

查看页面效果:
file

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。