src/js/box/boxContent.js

@@ -4,15 +4,15 @@
  * Description:
  */
 var boxContent = function(style) {
-  this.top =  style.top || '10px';
-  this.left = style.left || '10px';
-  this.width = style.width || '310px';
-  this.height = style.height || '50px';
-  this.isEditor = style.isEditor || false;
-
+  this.top =  (style && style.top) || '10px';
+  this.left = (style && style.left) || '10px';
+  this.width = (style && style.width) || '310px';
+  this.height = (style && style.height) || '50px';
+  this.isEditor = (style && style.isEditor) || false;
 
   //组件id名称
   this.domId = ('syq_box_' + Math.random()).replace('.','_');
+
   //一个实例化的dom
   this.vdom = null;
 
@@ -23,30 +23,27 @@ var boxContent = function(style) {
 
 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 () {
-  // 实例化主件
-
-  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.vdom.css({ width: this.width, height: this.height,top: this.top, left: this.left });
   this.renderBoxDom();
 };
 
 //组件渲染
-boxContent.prototype._renderBodyDom = function() {
+boxContent.prototype.renderBoxDom = 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);
+  if(this.editorContent)editorDom.html(this.editorContent);
   editorDom.css({ width: this.width, height: this.height, 'pointer-events': this.isEditor ? 'all' : 'none' });
   elementBoxDom.append(editorDom);
   circleDom.append(this.boxTpl);
 
   this.vdom.append(elementBoxDom);
   this.vdom.append(circleDom);
-};
+};
+
+export default boxContent;

src/js/main2.js

@@ -307,15 +307,16 @@ pageManager.prototype.renderToDom = function () {
     pages[index].renderToDom();
     this.domBody.append(pages[index].vDom);
   }
-  console.log(this.pages);
   $("#pages-box").replaceWith(this.domBody);
   $('body').on('refreshPage', () => {
     this._refreshPage();
+    this.refreshToolBar('none');
   });
   this.refreshToolBar();
   $('body').on('getQuestion', (e,pageNum,domId) => {
     this.refreshToolBar(...[pageNum,domId]);
   });
+  console.log(pages);
 };
 
 /**
@@ -366,7 +367,7 @@ pageManager.prototype._refreshPage = function () {
 pageManager.prototype.refreshToolBar = function(pNum = null,id) {
   // 如果有参数说明要编辑题目
   if(pNum){
-    this.toolBar.setSubjectTitle(pNum);
+    this.toolBar.setSubjectTitle(pNum,id);
     $('#toolbar').remove();
   }
   this.domBody.append(this.toolBar.toolbarContent());

src/js/yzQuestion.js

@@ -1,4 +1,6 @@
 import $ from 'jquery'
+import boxContent from './box/boxContent';
+
 let yzQuestion = function (cfg) {
   // content里面是box组件
   this.content = cfg.content || null;
@@ -17,9 +19,11 @@ let yzQuestion = function (cfg) {
   this.blockindex = parseInt(cfg.blockindex);
   this.blocknum = parseInt(cfg.blocknum);
 
+  // 这个是组件的dom
+  this.contentDom = [];
 
   this.order = parseInt(cfg.order);
-
+  
   this.domId = ('lsiten_question_'+Math.random()).replace('.','_');
   // dom相关属性
   this.vdom = null;
@@ -54,12 +58,11 @@ yzQuestion.prototype._renderObjectiveDom = function () {
 yzQuestion.prototype._renderCommonDom = function () {
   let content = $('<div id="'+ this.domId +'_content" class="question-selection-content"></div>');
   content.css({height: (this.minHeight - 20) + 'px'});
-
-  if (this.content) {
-    //content.append(this.content.vdom);
-  } else {
-    //this.content = new component();
-    //content.append(cm.vdom);
+  let contentItem = this.content;
+  if (contentItem) {
+    contentItem.forEach( (item) => {
+      this.contentDom.push(new boxContent(item));
+    });
   }
   this.vdom.append(content);
   // 冒泡监听事件

src/js/yzToolbar.js

@@ -4,6 +4,8 @@
  * Description:
  */
 import $ from 'jquery';
+import boxContent from './box/boxContent';
+
 var yzToolbar = function(){
   this.menu = [{
     name: 'table',
@@ -29,8 +31,8 @@ var yzToolbar = function(){
 
 
   // 问题编号
-  this.sujectNum = null;
-
+  this.subjectNum = null;
+  // 需要插入组件的id
   this.sujectDomId = null;
 
 };
@@ -61,19 +63,25 @@ yzToolbar.prototype.toolbarContent = function () {
 };
 
 yzToolbar.prototype.setSubjectTitle = function(pNum,id) {
-  this.sujectNum = pNum;
+  this.subjectNum = pNum;
   this.sujectDomId = id;
   this.menu.forEach( (item) => {
     if( item.name == 'subject' ){
       item.title = '正在编辑' + pNum;
+      if( pNum == 'none' ){
+        item.title = '无';
+      }
     }
   });
 };
 
 yzToolbar.prototype.addComponent = function() {
-  if(!this.subjectNum){
+  if(this.subjectNum == 'none' || !this.subjectNum){
     alert('请选择主观题');return;
   }
+  let box = new boxContent();
+  box.renderToDom();
+  $('#' + this.sujectDomId + '_content').append(box.vdom);
 };
 
 export default yzToolbar;