SMANAGE/backup/GERP old/write/write.html

<resource-share type="style" href="/write/css/normalize.min.css"></resource-share>
<resource-share type="style" href="/write/css/style.css"></resource-share>
<!-- <link href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"> -->
<style>
  html,
  body {
    background-color: #fff;
    height: 100%;
    overflow: hidden;
    color: #333;
  }

  #top-container {
    border-bottom: 1px solid #e8e8e8;
    padding-left: 30px;
  }

  #editor-toolbar {
    /*width: 1350px;*/
    background-color: #FCFCFC;
    margin: 0 auto;
  }

  #content {
    height: calc(100% - 40px);
    background-color: rgb(245, 245, 245);
    overflow-y: auto;
    position: relative;
  }

  #editor-container {
    max-width: 700px;
    margin: 30px auto 150px auto;
    background-color: #fff;
    padding: 20px 50px 50px 50px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
  }

  #title-container {
    padding: 20px 0;
    border-bottom: 1px solid #e8e8e8;
  }

  #title-container input {
    font-size: 30px;
    border: 0;
    outline: none;
    width: 100%;
    line-height: 1;
  }

  #editor-text-area {
    min-height: 900px;
    margin-top: 20px;
  }
</style>
<div class="x-nav">
  <span class="layui-breadcrumb">
    <a>创作者中心</a>
    <a>文章管理</a>
    <a>系列管理</a>
    <a>子文章管理</a>
    <a><cite>文章编辑</cite></a>
  </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="send();">
    上传
  </a>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
      <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
  </a>
</div>
<div id="top-container">
  <!--<p>
    <a href="./index.html">&lt;&lt; 返回 Back to demo</a>
  </p>-->
</div>
<div style="border-bottom: 1px solid #e8e8e8;">
  <div id="editor-toolbar"></div>
</div>
<div id="content">
  <div id="editor-container">
    <div id="title-container">
      <input placeholder="Page title...">
    </div>
    <div id="editor-text-area"></div>
  </div>
</div>
<!-- <script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.min.js"></script> -->
<script src="/write/js/index.js"></script>
<script>
  var loadIndex = layer.load(2);
  const E = window.wangEditor;

  const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN';
  E.i18nChangeLanguage(LANG);

  const editorConfig = {
    placeholder: '内容...',
    scroll: false,
    MENU_CONF: {
      uploadImage: {
        fieldName: 'your-fileName',
        base64LimitSize: 10 * 1024 * 1024
      }
    },
    onChange(editor) {
      console.log(editor.getHtml())
    }
  };

  // 先创建 editor
  const editor = E.createEditor({
    selector: '#editor-text-area',
    content: [],
    // html: '',
    config: editorConfig
  });

  const toolbar = E.createToolbar({
    editor,
    selector: '#editor-toolbar',
    config: {
      excludeKeys: 'fullScreen',
    }
  });

  document.getElementById('editor-text-area').addEventListener('click', e => {
    if (e.target.id === 'editor-text-area') {
      editor.blur();
      editor.focus(true);
    }
  });
</script>
<script>
  fetch('/API/readdoc', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `DocUUID=${encodeURIComponent(ARGS.DocUUID)}`
  })
  .then(response => response.json())
  .then(data => {
    editor.setHtml(data.DocContent);
    document.querySelector('#title-container input').value=data.DocTitle;
    layer.close(loadIndex);
  })
  .catch(error => Toast.error('文章内容获取', `文字内容获取API调度失败，错误：${error}`, 3000));
  var $ = layui.jquery;
  function send() {
  var loadIndex = layer.load(2);
    $.post("/API/writedoc", {DocUUID: ARGS.DocUUID, DocContent: editor.getHtml()},
      function(data){
        layer.close(loadIndex);
        Toast.info('文章上传操作', data.msg, 3000);
      }
    );
  }
</script>