实现wysiwyg编辑器二次开发

static/bootstrap/plugins/bootstrap-wysiwyg/bootstrap-wysiwyg.js

@@ -25,9 +25,16 @@
 			toolbarBtnSelector,
 			updateToolbar = function () {
 				if (options.activeToolbarClass) {
+					var selection = window.getSelection();
+					try {
+                        var tag = 'formatBlock ' + selection.focusNode.parentNode.nodeName.toLowerCase();
+                    }catch (e){
+						console.log(e);
+						tag = '';
+					}
 					$(options.toolbarSelector).find(toolbarBtnSelector).each(function () {
 						var command = $(this).data(options.commandRole);
-						if (document.queryCommandState(command)) {
+						if (document.queryCommandState(command) || tag === command) {
 							$(this).addClass(options.activeToolbarClass);
 						} else {
 							$(this).removeClass(options.activeToolbarClass);
@@ -48,19 +55,57 @@
 					}else{
                         args = '<' + args + '>';
 					}
+				}else if(command === 'enterAction'){
 
 				}
-				// console.log(getCurrentRange())
+
 				document.execCommand(command, 0, args);
 				updateToolbar();
+                editor.change && editor.change();
 			},
+            insertEmpty = function ($selectionElem) {
+
+				insertHtml('\r\n');
+         		return true;
+        	},
+			codeHandler = function () {
+                var selection = window.getSelection();
+                try{
+                    var nodeName = selection.parentNode.nodeName;
+                    console.log(nodeName)
+                    if(nodeName !== 'CODE' && nodeName !== 'PRE'){
+
+                    }
+                    if (!document.queryCommandSupported('insertHTML')) {
+
+                    }
+                }catch (e){
+                    console.log(e)
+                }
+            },
+            enterKeyHandle = function (e) {
+                var selection = getCurrentRange();
+                try {
+                    var nodeName = selection.commonAncestorContainer.parentNode.nodeName;
+                    if(nodeName === 'CODE' || nodeName === 'PRE'){
+                        return insertEmpty(selection.parentNode);
+                    }
+                }catch (e){
+                	console.log(selection)
+                	console.log("enterKeyHandle:" + e);
+				}
+            },
 			bindHotkeys = function (hotKeys) {
 				$.each(hotKeys, function (hotkey, command) {
 					editor.keydown(hotkey, function (e) {
 						if (editor.attr('contenteditable') && editor.is(':visible')) {
 							e.preventDefault();
 							e.stopPropagation();
-							// console.log(command)
+							if(hotkey === 'return'){
+
+								return enterKeyHandle(e);
+							}
+
 							execCommand(command);
 						}
 					}).keyup(hotkey, function (e) {
@@ -164,7 +209,27 @@
 							insertFiles(dataTransfer.files);
 						}
 					});
-			};
+			},
+			insertHtml = function (html) {
+                if(!document.queryCommandSupported('insertHTML')){
+                    var range = window.getSelection().getRangeAt(0);
+
+                    if (range.insertNode) {
+                        // IE
+                        range.deleteContents();
+                        range.insertNode($(args)[0]);
+                        updateToolbar();
+                        editor.change && editor.change();
+                    } else if (range.pasteHTML) {
+                        // IE <= 10
+                        range.pasteHTML(args);
+                        updateToolbar();
+                        editor.change && editor.change();
+                    }
+                }else{
+                	execCommand('insertHTML',html);
+				}
+            };
 		options = $.extend({}, $.fn.wysiwyg.defaults, userOptions);
 		toolbarBtnSelector = 'a[data-' + options.commandRole + '],button[data-' + options.commandRole + '],input[type=button][data-' + options.commandRole + ']';
 		bindHotkeys(options.hotKeys);
@@ -186,6 +251,14 @@
 				updateToolbar();
 			}
 		});
+		this.insertLink = function (linkUrl,linkTitle) {
+            restoreSelection();
+            editor.focus();
+            var args = '<a href="'+linkUrl+'" target="_blank">'+linkTitle+'</a>';
+
+            insertHtml(args);
+            saveSelection();
+        };
 		return this;
 	};
 	$.fn.wysiwyg.defaults = {
@@ -200,7 +273,8 @@
 			'ctrl+e meta+e': 'justifycenter',
 			'ctrl+j meta+j': 'justifyfull',
 			'shift+tab': 'outdent',
-			'tab': 'indent'
+			'tab': 'indent',
+			 'return':'enterAction'
 		},
 		toolbarSelector: '[data-role=editor-toolbar]',
 		commandRole: 'edit',

views/document/new_html_edit_template.tpl

@@ -73,10 +73,10 @@
         <div class="editormd-group">
             <a href="javascript:;" data-toggle="tooltip" data-title="无序列表" data-edit="insertunorderedlist"><i class="fa fa-list-ul first" name="list-ul" unselectable="on"></i></a>
             <a href="javascript:;" data-toggle="tooltip" data-title="有序列表" data-edit="insertorderedlist"><i class="fa fa-list-ol item" name="list-ol" unselectable="on"></i></a>
-            <a href="javascript:;" data-toggle="tooltip" data-title="横线"><i class="fa fa-minus last" name="hr" unselectable="on"></i></a>
+            <a href="javascript:;" data-toggle="tooltip" data-title="横线" data-edit="insertHorizontalRule"><i class="fa fa-minus last" name="hr" unselectable="on"></i></a>
         </div>
         <div class="editormd-group">
-            <a href="javascript:;" data-toggle="tooltip" data-title="链接"><i class="fa fa-link first" name="link" unselectable="on"></i></a>
+            <a href="javascript:;" data-toggle="tooltip" data-title="链接" id="createLinkToolbar"><i class="fa fa-link first" name="link" unselectable="on"></i></a>
             <a href="javascript:;" data-toggle="tooltip" data-title="引用链接"><i class="fa fa-anchor item" name="reference-link" unselectable="on"></i></a>
             <a href="javascript:;" data-toggle="tooltip" data-title="添加图片"><i class="fa fa-picture-o item" name="image" unselectable="on"></i></a>
             <a href="javascript:;" data-toggle="tooltip" data-title="行内代码"><i class="fa fa-code item" name="code" unselectable="on"></i></a>
@@ -127,6 +127,11 @@
                     开发缘起是公司IT部门需要一款简单实用的项目接口文档管理和分享的系统。其功能和界面源于 kancloud 。
 
                     可以用来储存日常接口文档，数据库字典，手册说明等文档。内置项目管理，用户管理，权限管理等功能，能够满足大部分中小团队的文档管理需求。
+                    <pre>
+                        <code>
+                            f
+                        </code>
+                    </pre>
                 </div>
             </div>
             <div class="manual-editor-status">
@@ -136,6 +141,37 @@
 
     </div>
 </div>
+<!--创建链接的模态窗-->
+<div class="modal fade" id="createLinkToolbarModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title">创建链接</h4>
+            </div>
+            <div class="modal-body">
+            <form class="form-horizontal">
+                <div class="form-group">
+                    <label for="linkUrl" class="control-label col-sm-2">链接地址</label>
+                    <div class="col-sm-10">
+                        <input type="text" class="form-control" id="linkUrl" value="http://" data-url="">
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="linkTitle" class="control-label col-sm-2">链接标题</label>
+                    <div class="col-sm-10">
+                        <input type="text" class="form-control" value="" id="linkTitle" data-title="">
+                    </div>
+                </div>
+            </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
+                <button type="button" class="btn btn-primary" id="btnCreateLinkToolbar">确定</button>
+            </div>
+        </div>
+    </div>
+</div>
 <!-- 添加文档 -->
 <div class="modal fade" id="addDocumentModal" tabindex="-1" role="dialog" aria-labelledby="addDocumentModalLabel">
     <div class="modal-dialog" role="document">
@@ -306,9 +342,33 @@
 <script src="/static/js/editor.js" type="text/javascript"></script>
 
 <script type="text/javascript">
-    $("#docEditor").wysiwyg();
+    window.wysiwyg = $("#docEditor").wysiwyg();
 
     $(function () {
+        //弹出创建链接的对话框
+        $("#createLinkToolbar").on("click",function () {
+            $("#createLinkToolbarModal").modal("show");
+        });
+        /**
+         * 当点击创建链接按钮后
+         */
+        $("#btnCreateLinkToolbar").on("click",function () {
+
+            var $then = $("#createLinkToolbarModal");
+            var link = $then.find("input[data-url]").val();
+            var title = $then.find("input[data-title]").val();
+            if(link === ""){
+                alert("链接地址不能为空");
+                return false;
+            }else if(title === ""){
+                alert("链接标题不能为空");
+                return false;
+            }
+
+            $then.modal("hide");
+            window.wysiwyg.insertLink(link,title);
+        });
+
         $("#attachInfo").on("click",function () {
             $("#uploadAttachModal").modal("show");
         });