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 echo $nav_view; ?>
  </div>
  <div class="span10 " style="padding-right:20px;">
    <legend>编辑运势信息</legend>
    <form action="" method="POST" class="form-inline" role="form">
      <div class="form-group">
        <label class="sr-only" for="">幸运数字</label>
        <input type="email" class="form-control" id="" name="lucky_num" placeholder="2, 3">
      </div>
      <div class="form-group">
        <label class="sr-only" for="">幸运色</label>
        <input type="email" class="form-control" id="" name="lucky_color" placeholder="blue, gold, green">
      </div>
      <div class="form-group">
        <label class="sr-only" for="">幸运花</label>
        <input type="email" class="form-control" id="" name="lucky_flo" placeholder="tulip, sacred lily">
      </div>
      <div class="form-group">
        <label class="sr-only" for="">运势</label>
        <div id="toolbar-container">
          <div id="editor-toolbar">
            <div id="code-btn" class="w-e-menu code-menu" data-i=1 style="z-index:10001;">
              <i class="w-e-icon-terminal"><i>
            </i></i></div>
          </div>
          <!-- view -->
          <div id="editor">
            <div>
              <h2>Fortune in 2017 — Great Effort Will Be Rewarded</h2>
              The lucky star will not help Goats increase their fortunes in 2017. You’ll need to expend great effort in order to be rewarded. It’ll be a year of <strong>learning and study</strong> for Goats. You are recommended to learn new skills — skills sure to help in your future development.<strong>Business people, 2017 will be a good year for you</strong> if you are planning to expand your markets. You will take business trips frequently in order to expand.You will have a chance to make a fortune. But you are recommended <strong>not to set foot in unfamiliar fields</strong> and you should weigh things up very carefully before you decide to invest.You will have an opportunity to make <strong>unexpected gains</strong> on foreign stocks and shares, or foreign currencies. But you’ll have to consider your own situation carefully, along with fluctuations in economics and exchange rates.
            </div>
          </div>
          <!-- code screen -->
          <div id="code-screen" class="none"></div>
        </div>
      </div>
      <div class="form-group">
      </div>
      <div>
        <button type="submit" class="btn btn-primary">提交</button>
      </div>
    </form>
  </div>
</div>
<script src="/js/ace-editor-src/ext-language_tools.js"></script>
<script src="/js/ace-editor-src/ext-beautify.js"></script>
<script 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()
// 获取使用到的元素
var toolbarContaner = document.getElementById('toolbar-container')
var editorText = document.getElementById('editor-text')
var cover = document.getElementById('cover')
// var container = document.getElementById('container')

// turn code
function doCodeScreen() {
  // alert(editor.txt.html());
  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)

// 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:                      100
  ,tabSize:                   4
  ,fontSize:                  16
});
code_editor.setValue(editor.txt.html());
// var beautify = ace.require("ace/ext/beautify");
// beautify.beautify(code_editor.getSession());
</script>