YwxAppThink/addon/docs/view/backend/doc/edit.html

<style>
    .doc-editor-wrap { border: 1px solid #e6e6e6; }
    .doc-form-side { background: #f8f9fb; padding: 15px; border: 1px solid #eee; border-radius: 4px; }
    .doc-form-side .layui-form-label { width: 82px; padding: 9px 6px; }
    .doc-form-side .layui-input-block { margin-left: 96px; }
</style>

<div class="layui-card">
    <div class="layui-card-header">
        <span>编辑文档：{$item.title}</span>
        <div class="layui-inline" style="float:right;">
            {if condition="$project && $item['is_dir'] neq 1"}
            <a class="layui-btn layui-btn-sm layui-btn-primary" href="{:docs_base_url()}/{$project.name}/{if condition='$version.is_default eq 1'}{$item.name}{else}{$version.name}/{$item.name}{/if}" target="_blank">预览</a>
            {/if}
            <a class="layui-btn layui-btn-sm layui-btn-primary"
               href="/docs/backend/doc?project_id={$item.project_id}&version_id={$item.version_id}">返回列表</a>
        </div>
    </div>
    <div class="layui-card-body">
        <form class="layui-form" id="docForm">
            <input type="hidden" name="project_id" value="{$item.project_id}">
            <input type="hidden" name="version_id" value="{$item.version_id}">
            <input type="hidden" name="editor_type" value="{$item.editor_type}">

            <div class="layui-row layui-col-space15">
                <div class="layui-col-md9">
                    <div class="layui-form-item">
                        <div class="layui-input-block" style="margin-left:0;">
                            <input type="text" name="title" value="{$item.title}" required lay-verify="required"
                                   autocomplete="off" class="layui-input" style="height:42px;font-size:16px;">
                        </div>
                    </div>
                    <div class="layui-form-item" id="editorBox" {if condition="$item.is_dir eq 1"}style="display:none;"{/if}>
                        <div class="doc-editor-wrap">
                            <script id="docContent" name="content" type="text/plain">{$item.content|raw}</script>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md3">
                    <div class="doc-form-side">
                        <div class="layui-form-item">
                            <label class="layui-form-label">父级</label>
                            <div class="layui-input-block">
                                <select name="pid">
                                    <option value="0">顶级文档</option>
                                    {volist name="parentOptions" id="opt"}
                                    <option value="{$opt.id}" {if condition="$item.pid eq $opt.id"}selected{/if}>{$opt.title}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">标识</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" value="{$item.name}" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">排序</label>
                            <div class="layui-input-block">
                                <input type="number" name="sort" value="{$item.sort}" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">纯目录</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="is_dir" value="1" {if condition="$item.is_dir eq 1"}checked{/if}
                                       lay-skin="switch" lay-text="是|否" lay-filter="isDirSwitch">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">显示</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="status" value="1" {if condition="$item.status eq 1"}checked{/if}
                                       lay-skin="switch" lay-text="显示|隐藏">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">SEO标题</label>
                            <div class="layui-input-block">
                                <input type="text" name="seo_title" value="{$item.seo_title}" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">关键词</label>
                            <div class="layui-input-block">
                                <input type="text" name="seo_keywords" value="{$item.seo_keywords}" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">描述</label>
                            <div class="layui-input-block">
                                <textarea name="seo_desc" class="layui-textarea" style="min-height:70px;">{$item.seo_desc}</textarea>
                            </div>
                        </div>

                        <div class="layui-form-item" style="margin-bottom:0;">
                            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="docSubmit">保存文档</button>
                        </div>
                        <div class="docs-tip" style="margin-top:8px;">
                            阅读量 {$item.views} 次
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="/assets/library/ueditor/ueditor.config.js"></script>
<script src="/assets/library/ueditor/ueditor.all.js"></script>
<script>
var docEditor = UE.getEditor('docContent', {
    serverUrl: '/docs/backend/ueditor',
    initialFrameHeight: 520,
    autoHeightEnabled: false,
    elementPathEnabled: false,
    catchRemoteImageEnable: true,
    allowDivTransToP: false,
    toolbars: [[
        'undo', 'redo', '|', 'bold', 'italic', 'underline', 'strikethrough', 'removeformat', '|',
        'paragraph', 'fontsize', '|', 'forecolor', 'backcolor', '|',
        'insertorderedlist', 'insertunorderedlist', 'blockquote', '|',
        'justifyleft', 'justifycenter', 'justifyright', '|',
        'link', 'unlink', 'anchor', '|',
        'simpleupload', 'insertimage', 'attachment', 'insertvideo', '|',
        'inserttable', 'deletetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', '|',
        'horizontal', 'insertcode', 'pasteplain', '|',
        'searchreplace', 'preview', 'fullscreen', 'source','contentimport'
    ]]
});

layui.use(['form', 'layer', 'jquery', 'http', 'ywxapp'], function () {
    var http = layui.http;
    var form = layui.form;
    var layer = layui.layer;
    var $ = layui.$;

    form.on('switch(isDirSwitch)', function (data) {
        $('#editorBox').toggle(!data.elem.checked);
    });

    form.on('submit(docSubmit)', function (data) {
        var post = $.extend({}, data.field);
        post.status = data.field.status ? 1 : 0;
        post.is_dir = data.field.is_dir ? 1 : 0;
        post.content = post.is_dir === 1 ? '' : docEditor.getContent();

        var loading = layer.load(1);
        http.post('/docs/backend/doc/update/{$item.id}', post).then(function (res) {
            layer.close(loading);
            layer.msg(res.message || (res.code === 0 ? '保存成功' : '保存失败'), { icon: res.code === 0 ? 1 : 2 });
        }).fail(function () {
            layer.close(loading);
            layer.msg('请求失败，请重试', { icon: 2 });
        });
        return false;
    });
});
</script>