YwxAppThink/addon/docs/view/backend/doc/add.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>新增文档 —— {$project.title} / {$version.title}</span>
        <a class="layui-btn layui-btn-sm layui-btn-primary" style="float:right;"
           href="/docs/backend/doc?project_id={$project.id}&version_id={$version.id}">返回列表</a>
    </div>
    <div class="layui-card-body">
        <form class="layui-form" id="docForm">
            <input type="hidden" name="project_id" value="{$project.id}">
            <input type="hidden" name="version_id" value="{$version.id}">
            <input type="hidden" name="editor_type" value="1">

            <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" required lay-verify="required" placeholder="请输入文档标题"
                                   autocomplete="off" class="layui-input" style="height:42px;font-size:16px;">
                        </div>
                    </div>
                    <div class="layui-form-item" id="editorBox">
                        <div class="doc-editor-wrap">
                            <script id="docContent" name="content" type="text/plain"></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" placeholder="留空自动生成" 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="0" 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" 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" checked 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" 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" 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;"></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;">
                            开启「纯目录」后该节点仅用于分组，不保存正文
                        </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,
    // 文档站需要保留代码块结构，关闭 div 转 p
    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/save', post).then(function (res) {
            layer.close(loading);
            if (res.code === 0) {
                layer.msg(res.message, { icon: 1 }, function () {
                    location.href = '/docs/backend/doc/edit/' + res.data.id;
                });
            } else {
                layer.msg(res.message || '保存失败', { icon: 2 });
            }
        }).fail(function () {
            layer.close(loading);
            layer.msg('请求失败，请重试', { icon: 2 });
        });
        return false;
    });
});
</script>