百度腦圖kityminder
阿新 • • 發佈：2022-12-01
KityMinder Editor 是一款強大、簡潔、體驗優秀的腦圖編輯工具，適合用於編輯樹/圖/網等結構的資料。
編輯器由百度 FEX 基於 kityminder-core 搭建，並且在百度腦圖中使用。
- kityminder-core 是 kityminder 的核心部分，基於百度 FEX 開發的向量圖形庫 kity。包含了腦圖資料的視覺化展現，簡單編輯功能等所有底層支援。
- kityminder-editor 基於 kityminder-core 搭建，依賴於 AngularJS，包含 UI 和熱盒 hotbox 等方便使用者輸入的功能，簡單來說，就是一款編輯器。
- 百度腦圖 基於 kityminder-editor，加入了第三方格式匯入匯出 (FreeMind, XMind, MindManager) 、檔案儲存、使用者認證、檔案分享、歷史版本等業務邏輯。
kityminder-core
好像沒有編輯功能，只有資料展示
1.新增包
yarn add kity kityminder-core
2.引用
import kity from 'kity'
import kityminder from 'kityminder-core'
上面不行
在typings.d.ts中新增
declare var kityminder: any; declare module 'kityminder-core' { const kityminder: any export = kityminder }
在angular.json script中引用
在angular.json style中引用
{"input": "node_modules/kityminder-core/dist/kityminder.core.min.css"}3.建立容器
<div id="minder-container"></div>
4.初始化
const minder = new kityminder.Minder({ renderTo:'#minder-container' }); minder.importJson({ "root": { "data": { "text": "根目錄" }, "children": [ { "data": { "text": "新聞" } }, { "data": { "text": "網頁" } }, { "data": { "text": "貼吧" } }, { "data": { "text": "知道" } }, { "data": { "text": "音樂" } }, { "data": { "text": "圖片" } }, { "data": { "text": "視訊" } }, { "data": { "text": "地圖" } }, { "data": { "text": "百科", "expandState": "collapse" } } ] }, "template": "default" });
kityminder-editor
一.克隆專案
先把kityminder-editor專案clone到本地 https://github.com/fex-team/kityminder-editor
二.執行專案
1. 安裝 nodejs 和 npm和 bower 和 grunt
2.初始化：切到 kityminder-editor 根目錄下執行 npm run init
遇到問題：執行 npm run init 時失敗
ECMDERR Failed to execute "git ls-remote --tags --heads https://github.com/angular-ui/bootstrap-bower.git", exit code of #128 fatal: unable to access 'https://github.com/angular-ui/bootstrap-bower.git/': Failed to connect to github.com port 443: Timed out
解決辦法：批量替換git://，，，記得改回去
git config --global url."git://".insteadOf https://
補充
//檢視所有git 配置項
git config --list
// 刪除某個git配置項
git config --global --unset url
3.執行-在 kityminder-editor 根目錄下執行 grunt dev 即可啟動專案
根目錄下的 `index.html` 為開發環境，`dist` 目錄下的 `index.html` 使用打包好的程式碼，適用於線上環境
4.構建-執行 `grunt build`，完成後 `dist` 目錄裡就是可用執行的 kityminder-editor
此時kityminder-editor只有最基本的功能，可對專案進行二次開發5.二次開發-如新增匯入 匯出功能
由於 kityminder-editor 是基於 kityminder-core 搭建的，而 kityminder-core 內建了五種常見 格式的匯入或匯出，在建立編輯器例項之後，可以使用四個介面進行資料的匯入匯出。* `editor.minder.exportJson()` - 匯出腦圖資料為 JSON 物件 * `editor.minder.importJson(json)` - 匯入 JSON 物件為當前腦圖資料 * `editor.minder.exportData(protocol, option)` - 匯出腦圖資料為指定的資料格式，返回一個 Promise，其值為匯出的結果 * `editor.minder.importData(protocol, data, option)` - 匯入指定格式的資料為腦圖資料，返回一個 Promise，其值為轉換之後的腦圖 Json 資料
目前支援的資料格式包括：
* `json` - JSON 字串，支援匯入和匯出 * `text` - 純文字格式，支援匯入和匯出 * `markdown` - Markdown 格式，支援匯入和匯出 * `svg` - SVG 向量格式，僅支援匯出 * `png` - PNG 點陣圖格式，僅支援匯出 修改專案下的 ui\directive\topTab\topTab.directive.js
// 匯入資料 scope.importfile = function() { var fileInput = $('#fileInput'); var file = fileInput[0].files[0] // textType = /(md|km)/, fileType = file.name.substr(file.name.lastIndexOf('.') + 1); switch (fileType) { case 'md': fileType = 'markdown'; break; case 'txt': fileType = 'text'; break; case 'km': case 'json': fileType = 'json'; break; default: alert('只支援.km、.md、.text、.json檔案'); return; } var reader = new FileReader(); reader.onload = function (e) { var content = reader.result; editor.minder.importData(fileType, content).then(function (data) { $(fileInput).val(''); }); } reader.readAsText(file); }; // 匯出資料 scope.exportfile = function(type) { var exportType; switch (type) { case 'km': exportType = 'json'; break; case 'md': exportType = 'markdown'; break; case 'txt': exportType = 'text'; break; default: exportType = type; break; } editor.minder.exportData(exportType).then(function (content) { var blob = new Blob(); switch (exportType) { case 'png': blob = dataURLtoBlob(content); //將base64編碼轉換為blob物件 break; default: blob = new Blob([content]); break; } var a = document.createElement("a"); //建立標籤，模擬點選下載 a.download = $('#node_text1').text()+ '.' + type; // 下載檔名 a.href = URL.createObjectURL(blob); a.click(); }); }; //base64轉換為圖片blob function dataURLtoBlob(dataurl) { var arr = dataurl.split(','); //注意base64的最後面中括號和引號是不轉譯的 var _arr = arr[1].substring(0, arr[1].length - 2); var mime = arr[0].match(/:(.*?);/)[1], bstr = atob(_arr), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); }
修改專案下的 ui\directive\topTab\topTab.html
<div class="custom-btn save-btn"> <div class="custom-icon save-icon"></div><div class="custom-text">儲存</div> </div> <div class="custom-btn import-btn"> <div class="custom-icon import-icon"></div><div class="custom-text">匯入</div> <input type="file" id="fileInput" onchange="angular.element(this).scope().importfile()" accept=".km,.txt,.md,.json" > </div> <div class="custom-btn export-btn dropdown" dropdown> <div class="dropdown-toggle" dropdown-toggle> <div class="custom-icon export-icon"></div><div class="custom-text">匯出</div> </div> <ul class="dropdown-menu" role="menu"> <li ng-click="exportfile('json')"><a href="">匯出JSON</a></li> <li ng-click="exportfile('txt')"><a href="">匯出txt</a></li> <li ng-click="exportfile('png')"><a href="">匯出png</a></li> <li ng-click="exportfile('svg')"><a href="">匯出svg</a></li> <li ng-click="exportfile('md')"><a href="">匯出md</a></li> <li ng-click="exportfile('km')"><a href="">匯出km</a></li> </ul> </div>修改專案下的 less\topTab\topTab.less
.custom-btn { cursor: pointer; display: inline-block; border-right: 1px dashed #eee; vertical-align: middle; margin: 5px 0; .custom-icon { height: 30px; width: 50px; } .custom-text { height: 20px; width: 50px; text-align: center; font-size: 12px; } .save-icon { background: url(images/icons.png) center -918px no-repeat; } .import-icon { background: url(images/icons.png) center -593px no-repeat; } .export-icon { background: url(images/icons.png) center -643px no-repeat; } } .import-btn { overflow: hidden; position: relative; input { width: 50px; height: 50px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: inline-block; opacity: 0; } }
6. 在其他專案引用
可在其他專案，如angular專案，根據dist資料夾下的index.html引用的資源，組成一個外掛，放assets裡
使用一個iframe連結index.html,就可使用了