vue-poster-editor/lib/components/editor-text-editor.html

A poster editor based on Vue.js

<!-- 隐藏用opacity，不要用hidden, 否则富文本编辑将无法生成选区 -->
<div 
    class="editor-element editor-text-editor"
    :class="[
        'editor-element-' + model.type,
        model.$loaded ? '' : 'editor-element-loading',
        model.$selected ? 'editor-element-selected' : '',
        model.$editing ? 'editor-element-editing' : ''
    ]" 
    :style="{
        height: rect.height + 'px',
        width: rect.width + 'px',
        opacity: model.$editing ? model.opacity : 0
    }"
    @mousedown="onMousedown"
>

    <label 
            class="element-inner" 
            :class="isVertical? 'middle-v': 'middle-h'" 
            :style="{
                backgroundColor: backgroundColor,
                writingMode: model.writingMode,
                textAlign: model.textAlign,
                lineHeight: model.lineHeight,
                textShadow: textShadow
            }"
            :for="'vue_poster_editor_text_editor_'+model.$id">
        <div 
            class="element-tips" 
            v-if="!model.$loaded || errorMessage" 
            :style="{
                fontSize: (fontSize >= minFontSize ? fontSize : minFontSize) + 'px'
            }">
            <div 
                class="element-tips-loading" 
                v-if="!model.$loaded" 
                :style="{
                    padding: padding
                }">
                <i class="fa fa-spin fa-spinner"></i>[字体载入中...]
            </div>
        </div>

        <div
            class="elment-inner-content"
            :class="isVertical ? 'middle-v' : 'middle-h'"
            :style="{
                padding: padding
            }">
            <div 
                :id="'vue_poster_editor_text_editor_'+model.$id"
                class="element-main"
                :style="textStyle"
                ref="edit"
                v-html="html"
                :contenteditable="model.$editing"
                @mousedown.stop></div>
        </div>
    </label>
</div>