new_html_edit_template.tpl 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>编辑文档 - Powered by MinDoc</title>
  8. <script type="text/javascript">
  9. window.editor = null;
  10. window.imageUploadURL = "{{urlfor "DocumentController.Upload" "identify" .Model.Identify}}";
  11. window.fileUploadURL = "{{urlfor "DocumentController.Upload" "identify" .Model.Identify}}";
  12. window.documentCategory = {{.Result}};
  13. window.book = {{.ModelResult}};
  14. window.selectNode = null;
  15. window.deleteURL = "{{urlfor "DocumentController.Delete" ":key" .Model.Identify}}";
  16. window.editURL = "{{urlfor "DocumentController.Content" ":key" .Model.Identify ":id" ""}}";
  17. window.releaseURL = "{{urlfor "BookController.Release" ":key" .Model.Identify}}";
  18. window.sortURL = "{{urlfor "BookController.SaveSort" ":key" .Model.Identify}}";
  19. window.historyURL = "{{urlfor "DocumentController.History"}}";
  20. window.removeAttachURL = "{{urlfor "DocumentController.RemoveAttachment"}}";
  21. </script>
  22. <!-- Bootstrap -->
  23. <link href="{{cdncss "/static/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet">
  24. <link href="{{cdncss "/static/font-awesome/css/font-awesome.min.css"}}" rel="stylesheet">
  25. <link href="{{cdncss "/static/jstree/3.3.4/themes/default/style.min.css"}}" rel="stylesheet">
  26. <link href="{{cdncss "/static/css/jstree.css"}}" rel="stylesheet">
  27. <link href="{{cdncss "/static/highlight/styles/zenburn.css"}}" rel="stylesheet">
  28. <link href="{{cdncss "/static/webuploader/webuploader.css"}}" rel="stylesheet">
  29. <link href="{{cdncss "/static/css/markdown.css"}}" rel="stylesheet">
  30. <link href="{{cdncss "/static/prettify/themes/atelier-estuary-dark.min.css"}}" rel="stylesheet">
  31. <link href="{{cdncss "/static/css/markdown.preview.css"}}" rel="stylesheet">
  32. {{/*<link href="/static/bootstrap/plugins/bootstrap-wysiwyg/external/google-code-prettify/prettify.css" rel="stylesheet">*/}}
  33. <link href="/static/katex/katex.min.css" rel="stylesheet">
  34. <link href="/static/quill/quill.core.css" rel="stylesheet">
  35. <link href="/static/quill/quill.snow.css" rel="stylesheet">
  36. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  37. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  38. <!--[if lt IE 9]>
  39. <script src="/static/html5shiv/3.7.3/html5shiv.min.js"></script>
  40. <script src="/static/respond.js/1.4.2/respond.min.js"></script>
  41. <![endif]-->
  42. <style type="text/css">
  43. #docEditor {overflow:auto;border: 1px solid #ddd; height: 100%;outline:none;padding: 5px;}
  44. .btn-info{background-color: #ffffff !important;}
  45. .btn-info>i{background-color: #cacbcd !important; color: #393939 !important; box-shadow: inset 0 0 0 1px transparent,inset 0 0 0 0 rgba(34,36,38,.15);}
  46. .editor-wrapper>pre{padding: 0;}
  47. .editor-wrapper .editor-code{
  48. font-size: 13px;
  49. line-height: 1.8em;
  50. color: #dcdcdc;
  51. border-radius: 3px;
  52. display: block;
  53. overflow-x: auto;
  54. padding: 0.5em;
  55. background: #3f3f3f;
  56. }
  57. .editor-wrapper-selected .editor-code{border: 1px solid #1e88e5;}
  58. .ql-toolbar.ql-snow{
  59. border: none !important;
  60. }
  61. .editor-group{
  62. float: left;
  63. height: 32px;
  64. margin-right: 10px;
  65. }
  66. .editor-group .editor-item{
  67. float: left;
  68. display: inline-block;
  69. width: 34px !important;
  70. height: 30px !important;
  71. padding: 5px !important;
  72. line-height: 30px;
  73. text-align: center;
  74. color: #4b4b4b;
  75. border-top: 1px solid #ccc !important;
  76. border-left: 1px solid #ccc !important;
  77. border-bottom: 1px solid #ccc !important;
  78. background: #fff;
  79. border-radius: 0;
  80. font-size: 12px
  81. }
  82. .editor-group .editor-item-last{
  83. border-right: 1px solid #ccc !important;
  84. border-radius: 0 4px 4px 0;
  85. }
  86. .editor-group .editor-item-first{
  87. border-right: 0;
  88. border-radius: 4px 0 0 4px;
  89. }
  90. .editor-group .disabled:hover{
  91. background: #ffffff !important;
  92. }
  93. .editor-group .editor-item-change:hover{
  94. background-color: #58CB48 !important;
  95. }
  96. .editor-group .editor-item:hover {
  97. background-color: #e4e4e4;
  98. color: #4b4b4b !important;
  99. }
  100. .editor-group a{
  101. float: left;
  102. }
  103. .editor-group .change i{
  104. color: #ffffff;
  105. background-color: #44B036 !important;
  106. border: 1px #44B036 solid !important;
  107. }
  108. .editor-group .change i:hover{
  109. background-color: #58CB48 !important;
  110. }
  111. .editor-group .disabled i:hover{
  112. background: #ffffff !important;
  113. }
  114. .editor-group a.disabled{
  115. border-color: #c9c9c9;
  116. opacity: .6;
  117. cursor: default
  118. }
  119. .editor-group a>i{
  120. display: inline-block;
  121. width: 34px !important;
  122. height: 30px !important;
  123. line-height: 30px;
  124. text-align: center;
  125. color: #4b4b4b;
  126. border: 1px solid #ccc;
  127. background: #fff;
  128. border-radius: 4px;
  129. font-size: 15px
  130. }
  131. .editor-group a>i.item{
  132. border-radius: 0;
  133. border-right: 0;
  134. }
  135. .editor-group a>i.last{
  136. border-bottom-left-radius:0;
  137. border-top-left-radius:0;
  138. }
  139. .editor-group a>i.first{
  140. border-right: 0;
  141. border-bottom-right-radius:0;
  142. border-top-right-radius:0;
  143. }
  144. .editor-group a i:hover {
  145. background-color: #e4e4e4
  146. }
  147. .editor-group a i:after {
  148. display: block;
  149. overflow: hidden;
  150. line-height: 30px;
  151. text-align: center;
  152. font-family: icomoon,Helvetica,Arial,sans-serif;
  153. font-style: normal;
  154. }
  155. </style>
  156. </head>
  157. <body>
  158. <div class="m-manual manual-editor">
  159. <div class="manual-head btn-toolbar" id="editormd-tools" data-role="editor-toolbar" data-target="#editor">
  160. <div class="editor-group">
  161. <a href="{{urlfor "BookController.Index"}}" data-toggle="tooltip" data-title="返回"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
  162. </div>
  163. <div class="editor-group">
  164. <a href="javascript:;" id="markdown-save" data-toggle="tooltip" data-title="保存" class="disabled save"><i class="fa fa-save" aria-hidden="true" name="save"></i></a>
  165. </div>
  166. <div class="editor-group">
  167. <a href="javascript:;" data-toggle="tooltip" data-title="撤销 (Ctrl-Z)" class="ql-undo"><i class="fa fa-undo first" name="undo" unselectable="on"></i></a>
  168. <a href="javascript:;" data-toggle="tooltip" data-title="重做 (Ctrl-Y)" class="ql-redo"><i class="fa fa-repeat last" name="redo" unselectable="on"></i></a>
  169. </div>
  170. <div class="editor-group">
  171. <button data-toggle="tooltip" data-title="粗体" class="ql-bold editor-item editor-item-first"></button>
  172. <button data-toggle="tooltip" data-title="斜体" class="ql-italic editor-item"></button>
  173. <button data-toggle="tooltip" data-title="删除线" class="ql-underline editor-item editor-item-last"></button>
  174. </div>
  175. <div class="editor-group">
  176. <button data-toggle="tooltip" data-title="标题一" class="ql-header editor-item editor-item-first" value="1"></button>
  177. <button data-toggle="tooltip" data-title="标题二" class="ql-header editor-item" value="2"></button>
  178. <button data-toggle="tooltip" data-title="标题三" class="ql-header editor-item" value="3"></button>
  179. <button data-toggle="tooltip" data-title="标题四" class="ql-header editor-item" value="4"></button>
  180. <button data-toggle="tooltip" data-title="标题五" class="ql-header editor-item" value="5"></button>
  181. <button data-toggle="tooltip" data-title="标题六" class="ql-header editor-item editor-item-last" value="6"></button>
  182. </div>
  183. <div class="editor-group">
  184. <button data-toggle="tooltip" data-title="无序列表" class="ql-list editor-item editor-item-first" value="ordered"></button>
  185. <button data-toggle="tooltip" data-title="有序列表" class="ql-list editor-item" value="bullet"></button>
  186. <button data-toggle="tooltip" data-title="右缩进" class="ql-indent editor-item" value="-1"></button>
  187. <button data-toggle="tooltip" data-title="左缩进" class="ql-indent editor-item editor-item-last" value="+1"></button>
  188. </div>
  189. <div class="editor-group ql-formats">
  190. <button data-toggle="tooltip" data-title="链接" class="ql-link editor-item editor-item-first"></button>
  191. <a href="javascript:;" data-toggle="tooltip" data-title="引用链接"><i class="fa fa-anchor item" name="reference-link" unselectable="on"></i></a>
  192. <button data-toggle="tooltip" data-title="添加图片" class="ql-image editor-item"></button>
  193. <button data-toggle="tooltip" data-title="代码块" class="ql-code-block editor-item"></button>
  194. <button data-toggle="tooltip" data-title="添加表格" class="ql-table editor-item"></button>
  195. <button data-toggle="tooltip" data-title="引用" class="ql-blockquote editor-item"><i class="fa fa-quote-right item" name="quote" unselectable="on"></i></button>
  196. <button data-toggle="tooltip" data-title="公式" class="ql-formula editor-item"><i class="fa fa-tasks item" name="tasks" aria-hidden="true"></i></button>
  197. <select data-toggle="" data-title="" class="ql-color ql-picker ql-color-picker editor-item"></select>
  198. <a href="javascript:;" data-toggle="tooltip" data-title="附件"><i class="fa fa-paperclip item" aria-hidden="true" name="attachment"></i></a>
  199. <a href="javascript:;" data-toggle="tooltip" data-title="模板"><i class="fa fa-tachometer last" name="template"></i></a>
  200. </div>
  201. <div class="editormd-group pull-right">
  202. <a href="javascript:;" data-toggle="tooltip" data-title="关闭实时预览"><i class="fa fa-eye-slash first" name="watch" unselectable="on"></i></a>
  203. <a href="javascript:;" data-toggle="tooltip" data-title="修改历史"><i class="fa fa-history item" name="history" aria-hidden="true"></i></a>
  204. <a href="javascript:;" data-toggle="tooltip" data-title="边栏"><i class="fa fa-columns item" aria-hidden="true" name="sidebar"></i></a>
  205. <a href="javascript:;" data-toggle="tooltip" data-title="使用帮助"><i class="fa fa-question-circle-o last" aria-hidden="true" name="help"></i></a>
  206. </div>
  207. <div class="editormd-group pull-right">
  208. <a href="javascript:;" data-toggle="tooltip" data-title="发布"><i class="fa fa-cloud-upload" name="release" aria-hidden="true"></i></a>
  209. </div>
  210. <div class="editor-group">
  211. <a href="javascript:;" data-toggle="tooltip" data-title=""></a>
  212. <a href="javascript:;" data-toggle="tooltip" data-title=""></a>
  213. </div>
  214. <div class="clearfix"></div>
  215. </div>
  216. <div class="manual-body">
  217. <div class="manual-category" id="manualCategory">
  218. <div class="manual-nav">
  219. <div class="nav-item active"><i class="fa fa-bars" aria-hidden="true"></i> 文档</div>
  220. <div class="nav-plus pull-right" id="btnAddDocument" data-toggle="tooltip" data-title="创建文档" data-direction="right"><i class="fa fa-plus" aria-hidden="true"></i></div>
  221. <div class="clearfix"></div>
  222. </div>
  223. <div class="manual-tree" id="sidebar"> </div>
  224. </div>
  225. <div class="manual-editor-container" id="manualEditorContainer">
  226. <div class="manual-editormd">
  227. <div id="docEditor" class="manual-editormd-active">
  228. MinDoc 是一款针对IT团队开发的简单好用的文档管理系统。
  229. MinDoc 的前身是 SmartWiki 文档系统。SmartWiki 是基于 PHP 框架 laravel 开发的一款文档管理系统。因 PHP 的部署对普通用户来说太复杂,所以改用 Golang 开发。可以方便用户部署和实用。
  230. 开发缘起是公司IT部门需要一款简单实用的项目接口文档管理和分享的系统。其功能和界面源于 kancloud 。
  231. 可以用来储存日常接口文档,数据库字典,手册说明等文档。内置项目管理,用户管理,权限管理等功能,能够满足大部分中小团队的文档管理需求。
  232. <div contenteditable="false" class="editor-wrapper"><pre><code class="editor-code">f</code></pre></div>
  233. <div><br/></div>
  234. </div>
  235. </div>
  236. <div class="manual-editor-status">
  237. <div id="attachInfo" class="item">0 个附件</div>
  238. </div>
  239. </div>
  240. </div>
  241. </div>
  242. <!--创建代码块的模态窗-->
  243. <div class="modal fade" id="createCodeToolbarModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  244. <div class="modal-dialog" role="document">
  245. <div class="modal-content">
  246. <div class="modal-header">
  247. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  248. <h4 class="modal-title">创建链接</h4>
  249. </div>
  250. <div class="modal-body">
  251. <textarea></textarea>
  252. </div>
  253. <div class="modal-footer">
  254. <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  255. <button type="button" class="btn btn-primary" id="btnCreateCodeToolbar">确定</button>
  256. </div>
  257. </div>
  258. </div>
  259. </div>
  260. <!--创建链接的模态窗-->
  261. <div class="modal fade" id="createLinkToolbarModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  262. <div class="modal-dialog" role="document">
  263. <div class="modal-content">
  264. <div class="modal-header">
  265. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  266. <h4 class="modal-title">创建链接</h4>
  267. </div>
  268. <div class="modal-body">
  269. <form class="form-horizontal">
  270. <div class="form-group">
  271. <label for="linkUrl" class="control-label col-sm-2">链接地址</label>
  272. <div class="col-sm-10">
  273. <input type="text" class="form-control" id="linkUrl" value="http://" data-url="">
  274. </div>
  275. </div>
  276. <div class="form-group">
  277. <label for="linkTitle" class="control-label col-sm-2">链接标题</label>
  278. <div class="col-sm-10">
  279. <input type="text" class="form-control" value="" id="linkTitle" data-title="">
  280. </div>
  281. </div>
  282. </form>
  283. </div>
  284. <div class="modal-footer">
  285. <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  286. <button type="button" class="btn btn-primary" id="btnCreateLinkToolbar">确定</button>
  287. </div>
  288. </div>
  289. </div>
  290. </div>
  291. <!-- 添加文档 -->
  292. <div class="modal fade" id="addDocumentModal" tabindex="-1" role="dialog" aria-labelledby="addDocumentModalLabel">
  293. <div class="modal-dialog" role="document">
  294. <form method="post" action="{{urlfor "DocumentController.Create" ":key" .Model.Identify}}" id="addDocumentForm" class="form-horizontal">
  295. <input type="hidden" name="identify" value="{{.Model.Identify}}">
  296. <input type="hidden" name="doc_id" value="0">
  297. <input type="hidden" name="parent_id" value="0">
  298. <div class="modal-content">
  299. <div class="modal-header">
  300. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  301. <h4 class="modal-title" id="myModalLabel">添加文档</h4>
  302. </div>
  303. <div class="modal-body">
  304. <div class="form-group">
  305. <label class="col-sm-2 control-label">文档名称 <span class="error-message">*</span></label>
  306. <div class="col-sm-10">
  307. <input type="text" name="doc_name" id="documentName" placeholder="文档名称" class="form-control" maxlength="50">
  308. </div>
  309. </div>
  310. <div class="form-group">
  311. <label class="col-sm-2 control-label">文档标识</label>
  312. <div class="col-sm-10">
  313. <input type="text" name="doc_identify" id="documentIdentify" placeholder="文档唯一标识" class="form-control" maxlength="50">
  314. <p style="color: #999;font-size: 12px;">文档标识只能包含小写字母、数字,以及“-”和“_”符号,并且只能小写字母开头</p>
  315. </div>
  316. </div>
  317. </div>
  318. <div class="modal-footer">
  319. <span id="add-error-message" class="error-message"></span>
  320. <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  321. <button type="submit" class="btn btn-primary" id="btnSaveDocument" data-loading-text="保存中...">立即保存</button>
  322. </div>
  323. </div>
  324. </form>
  325. </div>
  326. </div>
  327. <!--附件上传-->
  328. <div class="modal fade" id="uploadAttachModal" tabindex="-1" role="dialog" aria-labelledby="uploadAttachModalLabel">
  329. <div class="modal-dialog" role="document">
  330. <form method="post" id="uploadAttachModalForm" class="form-horizontal">
  331. <div class="modal-content">
  332. <div class="modal-header">
  333. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  334. <h4 class="modal-title" id="myModalLabel">上传附件</h4>
  335. </div>
  336. <div class="modal-body">
  337. <div class="attach-drop-panel">
  338. <div class="upload-container" id="filePicker"><i class="fa fa-upload" aria-hidden="true"></i></div>
  339. </div>
  340. <div class="attach-list" id="attachList">
  341. <template v-for="item in lists">
  342. <div class="attach-item" :id="item.attachment_id">
  343. <template v-if="item.state == 'wait'">
  344. <div class="progress">
  345. <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
  346. <span class="sr-only">0% Complete (success)</span>
  347. </div>
  348. </div>
  349. </template>
  350. <template v-else-if="item.state == 'error'">
  351. <span class="error-message">${item.message}</span>
  352. <button type="button" class="btn btn-sm close" @click="removeAttach(item.attachment_id)">
  353. <i class="fa fa-remove" aria-hidden="true"></i>
  354. </button>
  355. </template>
  356. <template v-else>
  357. <a :href="item.http_path" target="_blank" :title="item.file_name">${item.file_name}</a>
  358. <span class="text">(${ formatBytes(item.file_size) })</span>
  359. <span class="error-message">${item.message}</span>
  360. <button type="button" class="btn btn-sm close" @click="removeAttach(item.attachment_id)">
  361. <i class="fa fa-remove" aria-hidden="true"></i>
  362. </button>
  363. <div class="clearfix"></div>
  364. </template>
  365. </div>
  366. </template>
  367. </div>
  368. </div>
  369. <div class="modal-footer">
  370. <span id="add-error-message" class="error-message"></span>
  371. <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  372. <button type="button" class="btn btn-primary" id="btnUploadAttachFile" data-dismiss="modal">确定</button>
  373. </div>
  374. </div>
  375. </form>
  376. </div>
  377. </div>
  378. <!-- Modal -->
  379. <div class="modal fade" id="documentHistoryModal" tabindex="-1" role="dialog" aria-labelledby="documentHistoryModalModalLabel">
  380. <div class="modal-dialog" role="document">
  381. <div class="modal-content">
  382. <div class="modal-header">
  383. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  384. <h4 class="modal-title">文档历史记录</h4>
  385. </div>
  386. <div class="modal-body text-center" id="historyList">
  387. </div>
  388. <div class="modal-footer">
  389. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  390. </div>
  391. </div>
  392. </div>
  393. </div>
  394. <div class="modal fade" id="documentTemplateModal" tabindex="-1" role="dialog" aria-labelledby="请选择模板类型" aria-hidden="true">
  395. <div class="modal-dialog">
  396. <div class="modal-content">
  397. <div class="modal-header">
  398. <h4 class="modal-title" id="modal-title">请选择模板类型</h4>
  399. </div>
  400. <div class="modal-body template-list">
  401. <div class="container">
  402. <div class="section">
  403. <a data-type="normal" href="javascript:;"><i class="fa fa-file-o"></i></a>
  404. <h3><a data-type="normal" href="javascript:;">普通文档</a></h3>
  405. <ul>
  406. <li>默认类型</li>
  407. <li>简单的文本文档</li>
  408. </ul>
  409. </div>
  410. <div class="section">
  411. <a data-type="api" href="javascript:;"><i class="fa fa-file-code-o"></i></a>
  412. <h3><a data-type="api" href="javascript:;">API文档</a></h3>
  413. <ul>
  414. <li>用于API文档速写</li>
  415. <li>支持代码高亮</li>
  416. </ul>
  417. </div>
  418. <div class="section">
  419. <a data-type="code" href="javascript:;"><i class="fa fa-book"></i></a>
  420. <h3><a data-type="code" href="javascript:;">数据字典</a></h3>
  421. <ul>
  422. <li>用于数据字典显示</li>
  423. <li>表格支持</li>
  424. </ul>
  425. </div>
  426. </div>
  427. </div>
  428. <div class="modal-footer">
  429. <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  430. </div>
  431. </div>
  432. </div>
  433. </div>
  434. <template id="template-normal">
  435. {{template "document/template_normal.tpl"}}
  436. </template>
  437. <template id="template-api">
  438. {{template "document/template_api.tpl"}}
  439. </template>
  440. <template id="template-code">
  441. {{template "document/template_code.tpl"}}
  442. </template>
  443. <script src="{{cdnjs "/static/jquery/1.12.4/jquery.min.js"}}"></script>
  444. <script src="{{cdnjs "/static/vuejs/vue.min.js"}}" type="text/javascript"></script>
  445. <script src="{{cdnjs "/static/bootstrap/js/bootstrap.min.js"}}"></script>
  446. <script src="{{cdnjs "/static/webuploader/webuploader.min.js"}}" type="text/javascript"></script>
  447. <script src="{{cdnjs "/static/jstree/3.3.4/jstree.min.js"}}" type="text/javascript"></script>
  448. {{/*<script src="/static/bootstrap/plugins/bootstrap-wysiwyg/external/jquery.hotkeys.js"></script>*/}}
  449. {{/*<script src="/static/bootstrap/plugins/bootstrap-wysiwyg/bootstrap-wysiwyg.js" type="text/javascript"></script>*/}}
  450. {{/*<script src="/static/bootstrap/plugins/bootstrap-wysiwyg/external/google-code-prettify/prettify.js"></script>*/}}
  451. <script src="/static/katex/katex.min.js" type="text/javascript"></script>
  452. <script src="/static/quill/quill.min.js" type="text/javascript"></script>
  453. <script src="/static/quill/quill.icons.js"></script>
  454. <script src="{{cdnjs "/static/layer/layer.js"}}" type="text/javascript" ></script>
  455. <script src="{{cdnjs "/static/js/jquery.form.js"}}" type="text/javascript"></script>
  456. {{/*<script src="/static/js/editor.js" type="text/javascript"></script>*/}}
  457. <script type="text/javascript">
  458. var quill = new Quill('#docEditor', {
  459. theme: 'snow',
  460. modules : {
  461. toolbar :"#editormd-tools"
  462. }
  463. });
  464. $(function () {
  465. var $editorEle = $("#editormd-tools");
  466. $editorEle.find(".ql-undo").on("click",function () {
  467. quill.history.undo();
  468. });
  469. $editorEle.find(".ql-redo").on("click",function () {
  470. quill.history.redo();
  471. });
  472. //弹出创建链接的对话框
  473. $("#createLinkToolbar").on("click",function () {
  474. $("#createLinkToolbarModal").modal("show");
  475. });
  476. /**
  477. * 当点击创建链接按钮后
  478. */
  479. $("#btnCreateLinkToolbar").on("click",function () {
  480. var $then = $("#createLinkToolbarModal");
  481. var link = $then.find("input[data-url]").val();
  482. var title = $then.find("input[data-title]").val();
  483. if(link === ""){
  484. alert("链接地址不能为空");
  485. return false;
  486. }else if(title === ""){
  487. alert("链接标题不能为空");
  488. return false;
  489. }
  490. $then.modal("hide");
  491. window.wysiwyg.insertLink(link,title);
  492. });
  493. /**
  494. * 创建代码块弹窗
  495. */
  496. $("#createCodeToolbar").on("click",function () {
  497. $("#createCodeToolbarModal").modal("show");
  498. });
  499. /**
  500. * 插入代码块
  501. */
  502. $("#btnCreateCodeToolbar").on("click",function () {
  503. var $then = $("#createCodeToolbarModal");
  504. var code = $then.find("textarea").val();
  505. console.log(code)
  506. var codeHtml = '<div contenteditable="false" class="editor-wrapper"><code class="editor-code">' + code + '</code></div><p></p>';
  507. $then.modal("hide");
  508. window.wysiwyg.insertHtml(codeHtml);
  509. });
  510. $(".editor-code").on("dblclick",function () {
  511. var code = $(this).html();
  512. $("#createCodeToolbarModal").find("textarea").val(code);
  513. $("#createCodeToolbarModal").modal("show");
  514. }).on("click",function (e) {
  515. e.preventDefault();
  516. e.stopPropagation();
  517. console.log($(this).parents(".editor-wrapper").html())
  518. $(this).parents(".editor-wrapper").addClass("editor-wrapper-selected");
  519. });
  520. $("#attachInfo").on("click",function () {
  521. $("#uploadAttachModal").modal("show");
  522. });
  523. window.uploader = null;
  524. $("#uploadAttachModal").on("shown.bs.modal",function () {
  525. if(window.uploader === null){
  526. try {
  527. window.uploader = WebUploader.create({
  528. auto: true,
  529. dnd : true,
  530. swf: '/static/webuploader/Uploader.swf',
  531. server: '{{urlfor "DocumentController.Upload"}}',
  532. formData : { "identify" : {{.Model.Identify}},"doc_id" : window.selectNode.id },
  533. pick: "#filePicker",
  534. fileVal : "editormd-file-file",
  535. fileNumLimit : 1,
  536. compress : false
  537. }).on("beforeFileQueued",function (file) {
  538. uploader.reset();
  539. this.options.formData.doc_id = window.selectNode.id;
  540. }).on( 'fileQueued', function( file ) {
  541. var item = {
  542. state : "wait",
  543. attachment_id : file.id,
  544. file_size : file.size,
  545. file_name : file.name,
  546. message : "正在上传"
  547. };
  548. window.vueApp.lists.splice(0,0,item);
  549. }).on("uploadError",function (file,reason) {
  550. for(var i in window.vueApp.lists){
  551. var item = window.vueApp.lists[i];
  552. if(item.attachment_id == file.id){
  553. item.state = "error";
  554. item.message = "上传失败";
  555. break;
  556. }
  557. }
  558. }).on("uploadSuccess",function (file, res) {
  559. for(var index in window.vueApp.lists){
  560. var item = window.vueApp.lists[index];
  561. if(item.attachment_id === file.id){
  562. if(res.errcode === 0) {
  563. window.vueApp.lists.splice(index, 1, res.attach);
  564. }else{
  565. item.message = res.message;
  566. item.state = "error";
  567. }
  568. break;
  569. }
  570. }
  571. }).on("beforeFileQueued",function (file) {
  572. }).on("uploadComplete",function () {
  573. }).on("uploadProgress",function (file, percentage) {
  574. var $li = $( '#'+file.id ),
  575. $percent = $li.find('.progress .progress-bar');
  576. $percent.css( 'width', percentage * 100 + '%' );
  577. });
  578. }catch(e){
  579. console.log(e);
  580. }
  581. }
  582. });
  583. });
  584. </script>
  585. </body>
  586. </html>