100.所见即所得（二）

TDD 构建 Laravel 论坛笔记 /

本系列文章为laracasts.com 的系列视频教程——Let's Build A Forum with Laravel and TDD 的学习笔记。若喜欢该系列视频，可去该网站订阅后下载该系列视频， 支持正版 ；

视频源码地址：github.com/laracasts/Lets-Build-a-...；

本项目为一个 forum（论坛）项目，与本站的第二本实战教程《Laravel 教程 - Web 开发实战进阶》类似，可互相参照。

本节说明

对应视频教程第 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