information-system/application/views/bootstrap/zodiac/edit.php

<script type="text/javascript" src="//unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<style type="text/css">
.none{display: none;}
.form-control {width: 100%;}
.form-group {margin: 0 0 10px 0;}
#toolbar-container {border: 1px solid #ccc;background-color: #fff;}
#toolbar-container:after {display: table;content: '';clear: both;}
#editor-toolbar {background-color: #ccc;float: left;}
#btn-container {/*float: right;*//*text-align: right;*/}
#editor {border-top: 1px solid #ccc;height: 500px;background-color: #fff;}
#cover {display: none;position: fixed;z-index: 100;top: 50px;left: 50px;right: 50px;height: 500px;padding: 20px;background-color: #f1f1f1;}
#code-screen {
/*margin: 0;
width: 500px;*/
height: 500px;
border-top: 1px solid #ccc;
}
</style>
<div class="row-fluid">
  <div class="span2">
    <?php include 'nav.php'; ?>
  </div>
  <div class="span10 " style="padding-right:20px;">
    <legend>编辑运势信息 - <?php echo $current_zodiac ?></legend>
    <form action="<?php echo site_url('zodiac/fortune_save') ?>" method="POST" class="form-inline" role="form" name="zodiac_edit" id="zodiac_edit">
      <input type="hidden" name="sx" value="<?php echo $current_zodiac ?>">
      <div class="form-group">
        <label class="sr-only" for="">幸运数字</label>
        <input type="text" class="form-control" id="" name="lucky_num" placeholder="2, 3" value="<?php echo $zodiac_fortune->LNY_LuckyNumber ?>">
      </div>
      <div class="form-group">
        <label class="sr-only" for="">幸运色</label>
        <input type="text" class="form-control" id="" name="lucky_color" placeholder="blue, gold, green" value="<?php echo $zodiac_fortune->LNY_LuckyColor ?>">
      </div>
      <div class="form-group">
        <label class="sr-only" for="">幸运花</label>
        <input type="text" class="form-control" id="" name="lucky_flo" placeholder="tulip, sacred lily" value="<?php echo $zodiac_fortune->LNY_LuckyFlower ?>">
      </div>
      <div class="form-group">
      <input type="hidden" name="theyearfortune" id="theyearfortune">
        <label class="sr-only" for="">运势</label>
        <div id="toolbar-container">
          <!-- custom toolbar -->
          <?php include 'editor_toolbar.php'; ?>
          <!-- view screen -->
          <div id="editor" style="z-index: 1;">
            <!-- <div> -->
              <?php echo $zodiac_fortune->TheYearFortune ?>
            <!-- </div> -->
          </div>
          <!-- code screen -->
          <div id="code-screen" class="none"></div>
        </div>
      </div>
      <div class="form-group">
      </div>
      <div>
        <input type="buttn" class="btn btn-primary" onclick="zodiac_sub()" value="提交">
      </div>
    </form>
  </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">按下 ESC 按钮退出。</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<script src="/js/ace-editor-src/ace.js"></script>
<script src="/js/ace-editor-src/ext-language_tools.js"></script>
<script src="/js/ace-editor-src/ext-beautify.js"></script>
<script defer type="text/javascript">
var E = window.wangEditor
// E(菜单, 编辑区)
var editor = new E('#editor-toolbar', '#editor')
// 菜单配置
editor.customConfig.menus = [
  'head',
  'bold',
  'italic',
  'underline',
  'link',
  'list',
  'image',
  'undo',
  'redo'
]
editor.create()

// turn code
function doCodeScreen() {
  code_editor.setValue(editor.txt.html());
  $(".w-e-menu").hide();
  $(".code-menu").show();
  $("#editor").hide();
  $("#code-screen").show();
}
// turn screen
function unDoCodeScreen() {
  editor.txt.html(code_editor.getValue())
  $(".w-e-menu").show();
  $("#editor").show();
  $("#code-screen").hide();
}
// 是否是源码视图的标志
var isCodeScreen = false
// 点击事件
var codebtn = document.getElementById('code-btn');
codebtn.addEventListener('click', function () {
  if (isCodeScreen) {
    isCodeScreen = false
    unDoCodeScreen()
  } else {
    isCodeScreen = true
    doCodeScreen()
  }
}, false)

function zodiac_sub() {
  if (isCodeScreen == true) {
    $("#theyearfortune").val(code_editor.getValue());
  } else {
    $("#theyearfortune").val(editor.txt.html());
  }
  $('#zodiac_edit').ajaxSubmit({
      success:function() {
        alert("提交成功")
      },
      error: function() {
        alert("失败,请重试")
      },
      dataType: 'json',
      timeout: 30000
  });
  return false;
}

// code >>
ace.require("ace/ext/language_tools");
var code_editor = ace.edit("code-screen");
code_editor.setOptions({
  mode:                       "ace/mode/html"
  ,theme:                     "ace/theme/tomorrow_night_eighties"
  // ,theme:                  "ace/theme/tomorrow"
  ,selectionStyle:            "line"
  ,showInvisibles:            true
  ,displayIndentGuides:       true
  ,enableSnippets:            true
  ,enableBasicAutocompletion: true
  ,enableLiveAutocompletion:  true
  ,highlightActiveLine:       true
  ,highlightSelectedWord:     true
  ,scrollPastEnd:             true
  ,autoScrollEditorIntoView:  true
  ,wrap:                      130
  ,tabSize:                   4
  ,fontSize:                  16
});
code_editor.setValue(editor.txt.html());
// var beautify = ace.require("ace/ext/beautify");
// beautify.beautify(code_editor.getSession());
</script>