集成到vue.js · wangEditor2使用手冊

如果你想在`vue.js`的項目中使用`wangEditor`，以下有一個簡單的demo，以及一個`vue`組件應用的demo。 ----- **第一，簡單demo** 代碼如下，也可參見 https://github.com/wangfupeng1988/wangEditor/blob/master/test/vue/test-vue.html 的代碼。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>editor test</title> <style type="text/css"> #editor-trigger { height: 200px; } </style> <link rel="stylesheet" type="text/css" href="../../dist/css/wangEditor.min.css"> <script type="text/javascript" src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script> </head> <body> <p>wangEditor width vuejs</p> <div id="editor-container"> <div id="editor-trigger"> </div> <hr> <p><b>以下是編輯器的內容：</b></p> <p>{{ editorContent }}</p> </div> <script type="text/javascript" src="../../dist/js/lib/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../dist/js/wangEditor.js"></script> <script type="text/javascript"> new Vue({ el: '#editor-container', data: { editorContent: '' }, ready: function () { var self = this; // 創建編輯器 var editor = new wangEditor('editor-trigger'); editor.onchange = function () { // onchange 事件中更新數據 self.editorContent = editor.$txt.html(); }; editor.create(); } }); </script> </body> </html> ``` --- **第二，vue組件demo** 具體請參見：https://github.com/jiangyoucai/vueComponents ，該demo由 [@jiangyoucai](https://github.com/jiangyoucai) 同學貢獻，在此感謝！