add

src/js/box/boxContent.js

@@ -9,21 +9,44 @@ var boxContent = function(style) {
   this.width = style.width || '310px';
   this.height = style.height || '50px';
   this.isEditor = style.isEditor || false;
+
+
+  //组件id名称
+  this.domId = ('syq_box_' + Math.random()).replace('.','_');
+  //一个实例化的dom
+  this.vdom = null;
+
+  //组件当中的所有html
+  this.editorContent = null;
+
 };
 
 boxContent.prototype.boxTpl = '<div class="line-n line resizable"><div class="circle"></div></div><div class="line-e line resizable"><div class="circle"></div></div><div class="line-s line resizable"><div class="circle"></div></div><div class="line-w line resizable"><div class="circle"></div></div><div class="circle-nw circle resizable"></div><div class="circle-ne circle resizable"></div><div class="circle-se circle resizable"></div><div class="circle-sw circle resizable"></div>';
 
 boxContent.prototype.addContent = function () {
   // 实例化主件
-  let outDom = $('<div class="outer-box"></div>');
+
+  return outDom.context();
+};
+
+//由数据渲染层dom
+boxContent.prototype.renderToDom = function() {
+  this.vdom = $('<div class="outer-box" id="' + this.domId +'"></div>');
+  this.vdom.css({ width: this.width, height: this.height,top: this.top, left: this.left }).append(elementBoxDom.context());
+  this.renderBoxDom();
+};
+
+//组件渲染
+boxContent.prototype._renderBodyDom = function() {
   let elementBoxDom = $('<div class="element-box-contents"></div>');
   let editorDom = $('<div class="element comp_paragraph editable-text"></div>');
   let circleDom = $('<div class="eqc-select"></div>');
   editorDom.text('双击此处进行编辑');
+  if(!this.editorContent)editorDom.html(this.editorContent);
   editorDom.css({ width: this.width, height: this.height, 'pointer-events': this.isEditor ? 'all' : 'none' });
-  elementBoxDom.append(editorDom.context());
-  outDom.css({ width: this.width, height: this.height,top: this.top, left: this.left }).append(elementBoxDom.context());
+  elementBoxDom.append(editorDom);
   circleDom.append(this.boxTpl);
-  outDom.append(circleDom.context());
-  return outDom.context();
+
+  this.vdom.append(elementBoxDom);
+  this.vdom.append(circleDom);
 };

src/js/main2.js

@@ -317,8 +317,8 @@ pageManager.prototype.renderToDom = function () {
     this._refreshPage();
   });
   this.refreshToolBar();
-  $('body').on('getNum', (e,data) => {
-    this.refreshToolBar(data);
+  $('body').on('getQuestion', (e,pageNum,domId) => {
+    this.refreshToolBar(...[pageNum,domId]);
   });
 };
 
@@ -365,10 +365,10 @@ pageManager.prototype._refreshPage = function () {
 /*
 * function 刷新顶部菜单栏
 */
-pageManager.prototype.refreshToolBar = function(num) {
+pageManager.prototype.refreshToolBar = function(pNum = null,id) {
   // 如果有参数说明要编辑题目
-  if(num){
-    this.toolBar.setSubjectTitle(num);
+  if(pNum){
+    this.toolBar.setSubjectTitle(pNum);
     $('#toolbar').remove();
   }
   this.domBody.append(this.toolBar.toolbarContent());

src/js/yzDom.js

@@ -63,7 +63,7 @@ yzDom.prototype._renderObjectiveDom = function () {
     this.colDoms[questions[index].blockindex].append(questions[index].vdom);
   }
   this.vDom.append(main);
-}
+};
 
 /**
  * function 渲染普通的题的dom
@@ -78,9 +78,7 @@ yzDom.prototype._renderCommonDom = function () {
   }
   // main.css(cssOption);
   this.vDom.append(main);
-}
-
-
+};
 
 
 /** 

src/js/yzQuestion.js

@@ -1,5 +1,6 @@
 import $ from 'jquery'
 let yzQuestion = function (cfg) {
+  // content里面是box组件
   this.content = cfg.content || null;
   this.border = parseInt(cfg.border) || 1;
   this.minHeight = cfg.minHeight;
@@ -19,7 +20,7 @@ let yzQuestion = function (cfg) {
   this.domId = ('lsiten_question_'+Math.random()).replace('.','_');
   // dom相关属性
   this.vdom = null;
-}
+};
 
 yzQuestion.prototype._mapKey = [
   'A', 'B', 'C', 'D', 'E', 'F',
@@ -60,7 +61,8 @@ yzQuestion.prototype._renderCommonDom = function () {
   this.vdom.append(content);
   // 冒泡监听事件
   this.vdom.on('click', ()=>{
-    this.vdom.trigger('getNum',this.pNum);
+    // 将题目和domId冒泡到顶层
+    this.vdom.trigger('getQuestion',[this.pNum,this.domId]);
   });
 };
 
@@ -87,7 +89,7 @@ yzQuestion.prototype._renderTitleDom = function () {
     'line-height': '20px'
   });
   this.vdom.append(title);
-}
+};
 /** 
  * function 将数据转换为dom的形式
 */

src/js/yzToolbar.js

@@ -26,10 +26,17 @@ var yzToolbar = function(){
     title: '无',
     icon: 'fa-list-alt'
   }];
+
+
+  // 问题编号
+  this.sujectNum = null;
+
+  this.sujectDomId = null;
+
 };
 
 yzToolbar.prototype.toolbarContent = function () {
-  // 形成toolbar 样式
+  // 形成toolbar 结构
   let toolDom = document.createElement('div');
   let ulDom = document.createElement('ul');
   this.menu.forEach( (item) => {
@@ -41,6 +48,11 @@ yzToolbar.prototype.toolbarContent = function () {
     liDom.appendChild(spanDom);
     liDom.appendChild(liText);
     ulDom.appendChild(liDom);
+    if( item.name == 'component' ){
+      liDom.addEventListener('click', () => {
+        this.addComponent();
+      },!0);
+    }
   });
   toolDom.className = 'toolbar';
   toolDom.appendChild(ulDom);
@@ -48,16 +60,20 @@ yzToolbar.prototype.toolbarContent = function () {
   return toolDom;
 };
 
-yzToolbar.prototype.setSubjectTitle = function(subjectNum) {
+yzToolbar.prototype.setSubjectTitle = function(pNum,id) {
+  this.sujectNum = pNum;
+  this.sujectDomId = id;
   this.menu.forEach( (item) => {
     if( item.name == 'subject' ){
-      item.title = '正在编辑' + subjectNum;
+      item.title = '正在编辑' + pNum;
     }
   });
 };
 
-yzToolbar.prototype.addComponet = function() {
-
+yzToolbar.prototype.addComponent = function() {
+  if(!this.subjectNum){
+    alert('请选择主观题');return;
+  }
 };
 
 export default yzToolbar;