{% extends 'adminlte/base.html' %}

{% block header_tail %}
    <script type="text/javascript" charset="utf-8" src="/static/plugins/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/static/plugins/ueditor/ueditor.all.min.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="/static/plugins/ueditor/lang/zh-cn/zh-cn.js"></script>
{% endblock %}

{% block content %}
    <div class="box">
        <!-- form start -->
        <form role="form" method="post">{% csrf_token %}
            <div class="box-body">
                <div class="form-group">
                    <label for="title">标题</label>
                    <input id="title" name="title" class="form-control" value="{{ page.title }}" />
                </div>
                <div class="form-group">
                    <label>正文</label>
                    <script id="editor" type="text/plain" style="width:768px;height:500px;">{{ page.content | safe }}</script>
                </div>
            </div>
            <!-- /.box-body -->

            <div class="box-footer">
                <button type="submit" class="btn btn-primary">提交</button>
            </div>
        </form>
    </div>
    <!-- /.box -->
{% endblock %}

{% block body_tail %}
    <script>
        //实例化编辑器
        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
        var ue = UE.getEditor('editor', {
            textarea: 'content',
            customstyle: [
                {
                    tag: 'img',
                    name: 'img',
                    label: '',
                    style: 'width: 100%;'
                }
            ]
        });
    </script>
{% endblock %}
