背景需求

技術需求：擴充套件 富文字編輯器  功能

技術調研

目標：本著不重複造輪子，集中精力解決業務邏輯。其實主要是沒技術實力.... 方向：尋找開源的富文字編輯器； 發現 各個開源的都差不多(技術菜，看不出區別)，傳統的編輯器太龐大，適合移動端的較少 結果：公司最近在搞tower,發現他們公司有個開源的simditor，就拿過來試了試，發現還不錯呢 現狀：too young too simple , 自行搜尋‘富文字編輯器都是坑’

扒開來看

官方demo下載，一切ok 我的需求：呼叫某個方法可以插入自定義圖片； 秉著鑽（拼）研（死）精（一）神（搏），改寫插入橫線模組原始碼，果然可以插入圖片，有戲

  HrButton.prototype.command = function() {
    var $hr, $newBlock, $nextBlock, $rootBlock;
    $rootBlock = this.editor.selection.rootNodes().first();
    $nextBlock = $rootBlock.next();
    if ($nextBlock.length > 0) {
      this.editor.selection.save();
    } else {
      $newBlock = $('<p/>').append(this.editor.util.phBr);
    }
     $hr = $('<img src = "xxx.jpg" alt = "" />').insertAfter($rootBlock);//原來的程式碼:$hr = $('<hr/>').insertAfter($rootBlock);
 

照葫蘆畫瓢

擴充套件: 在Simditor物件原型裡邊增加一個function   ，如

<span style="white-space:pre">	</span>Simditor.prototype.insertJQNode($node)//引數為一個jquery 封裝的dom物件 

這樣我就可以在js中隨意呼叫 new Simditor().insertJQNode($("<img src= ''/>"))來插入圖片了。 下邊就是具體擴充套件方式，按照Simditor的規範去定義prototype

(function(root, factory) {
	if (typeof define === 'function' && define.amd) {
		// AMD. Register as an anonymous module.
		define([ "jquery", "simple-module", "simditor" ], function($,
				SimpleModule) {
			return (root.returnExportsGlobal = factory($, SimpleModule));
		});
	} else if (typeof exports === 'object') {
		// Node. Does not work with strict CommonJS, but
		// only CommonJS-like enviroments that support module.exports,
		// like Node.
		module.exports = factory(require("jquery"), require("simple-module"),
				require("simditor"));
	} else {
		root['Simditor'] = factory(jQuery, SimpleModule);
	}
}(this, function($, SimpleModule) {

	
	Simditor.prototype.insertJQNode = function($node) {

		//主要程式碼在這..........................

	};

	return Simditor;

}));
 

現在框架搭起來了，就差insertJQNode 方法的實現：

	Simditor.prototype.insertJQNode = function($node) {

		if (!$node) {
			console.error("$node is null");
			return;
		}
		if (!this) {
			console.error("Simditor instance  is null");
			return;
		}
		this.focus();// 獲取焦點

		var $newNode, $newBlock, $nextBlock, $rootBlock;
		// console.log(this['selection'].rootNodes())
		$rootBlock = this['selection'].rootNodes().first();//選中節點中的第一個節點
		$nextBlock = $rootBlock.next();//

		if ($nextBlock.length > 0) {//若選中多個節點，則在第一個節點後插入 
			$newNode = $node.insertAfter($rootBlock);
			this['selection'].save();
			this['selection'].restore();
		} else if ($rootBlock[0].outerHTML == '<p><br></p>') {//若是空行
			$newNode = $node.insertBefore($rootBlock);
			this['selection'].setRangeAtStartOf($rootBlock);

		} else {//某行的末尾
			$newNode = $node.insertAfter($rootBlock);
			$newBlock = $('<p/>').append(this.util.phBr);
			$newBlock.insertAfter($newNode);
			this['selection'].setRangeAtStartOf($newBlock);
		}

		return this.trigger('valuechanged');

	};
 

小優化：遮蔽simditor預設對  img的處理

	Simditor.Toolbar.buttons.image = function() {
		return
	};

小功告成

呼叫方式

    var editor = new Simditor({
      textarea: $('#txt-content'),
      placeholder: '這裡輸入文字...',
      toolbar: toolbar,
      pasteImage: true,
      defaultImage: 'assets/images/image.png',
      upload: location.search === '?upload' ? {
        url: '/upload'
      } : false
    });

    var $img = $("<p><img alt='loading' src='http://3o890.jpg' width='100%'></p>");    
    editor.insertJQNode($img);

完整程式碼下載地址  這算是個v1.0版本吧，裡邊很多細節都很粗糙，歡迎大家批評指正 下次把程式碼模組化，繼續完善  ----------------------------------------