diff --git a/frontend/public/tinymce/skins/content/default/content.css b/frontend/public/tinymce/skins/content/default/content.css index 46367b55c9..720179ca1d 100644 --- a/frontend/public/tinymce/skins/content/default/content.css +++ b/frontend/public/tinymce/skins/content/default/content.css @@ -4,11 +4,7 @@ * For LGPL see License.txt in the project root for license information. * For commercial licenses see https://www.tiny.cloud/ */ -body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - line-height: 1.4; - margin: 1rem; -} + table { border-collapse: collapse; diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue index e709d1fe45..b39e7ab82e 100644 --- a/frontend/src/components/DeDrag/index.vue +++ b/frontend/src/components/DeDrag/index.vue @@ -661,7 +661,6 @@ export default { this.maxH = val }, w(val) { - if (this.resizing || this.dragging) { return } @@ -760,7 +759,7 @@ export default { elementMouseDown(e) { // private 设置当前组件数据及状态 this.$store.commit('setClickComponentStatus', true) - if (this.element.component !== 'v-text' && this.element.component !== 'rect-shape' && this.element.component !== 'de-input-search' && this.element.component !== 'de-select-grid' && this.element.component !== 'de-number-range' && this.element.component !== 'de-date') { + if (this.element.component !== 'v-text' && this.element.component !== 'de-rich-text' && this.element.component !== 'rect-shape' && this.element.component !== 'de-input-search' && this.element.component !== 'de-select-grid' && this.element.component !== 'de-number-range' && this.element.component !== 'de-date') { e.preventDefault() } // 阻止冒泡事件 @@ -1003,7 +1002,7 @@ export default { move(e) { if (this.resizing) { this.handleResize(e) - } else if (this.dragging) { + } else if (this.dragging && !this.element.editing) { this.handleDrag(e) } else if (this.rotating) { this.handleRotate(e) diff --git a/frontend/src/components/canvas/components/Editor/ContextMenu.vue b/frontend/src/components/canvas/components/Editor/ContextMenu.vue index 65a0f1372a..04baa0f20d 100644 --- a/frontend/src/components/canvas/components/Editor/ContextMenu.vue +++ b/frontend/src/components/canvas/components/Editor/ContextMenu.vue @@ -58,7 +58,7 @@ export default { // 编辑样式组件 - if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') { + if (this.curComponent.type === 'v-text' || this.curComponent.type === 'de-rich-text' || this.curComponent.type === 'rect-shape') { bus.$emit('component-dialog-style') } }, diff --git a/frontend/src/components/canvas/components/Editor/EditBar.vue b/frontend/src/components/canvas/components/Editor/EditBar.vue index 1130294bd3..4522f94a23 100644 --- a/frontend/src/components/canvas/components/Editor/EditBar.vue +++ b/frontend/src/components/canvas/components/Editor/EditBar.vue @@ -217,7 +217,7 @@ export default { edit() { if (this.curComponent.type === 'custom') { bus.$emit('component-dialog-edit') - } else if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') { + } else if (this.curComponent.type === 'v-text' || this.curComponent.type === 'de-rich-text' || this.curComponent.type === 'rect-shape') { bus.$emit('component-dialog-style') } else { bus.$emit('change_panel_right_draw', true) } }, diff --git a/frontend/src/components/canvas/components/Editor/SettingMenu.vue b/frontend/src/components/canvas/components/Editor/SettingMenu.vue index c765fdcf1b..4aa7682905 100644 --- a/frontend/src/components/canvas/components/Editor/SettingMenu.vue +++ b/frontend/src/components/canvas/components/Editor/SettingMenu.vue @@ -67,7 +67,7 @@ export default { edit() { if (this.curComponent.type === 'custom') { bus.$emit('component-dialog-edit') - } else if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') { + } else if (this.curComponent.type === 'v-text' || this.curComponent.type === 'de-rich-text' || this.curComponent.type === 'rect-shape') { bus.$emit('component-dialog-style') } else { bus.$emit('change_panel_right_draw', true) } }, diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue index e1f77f64c2..334fc1513f 100644 --- a/frontend/src/components/canvas/components/Editor/index.vue +++ b/frontend/src/components/canvas/components/Editor/index.vue @@ -61,22 +61,8 @@ @canvasDragging="canvasDragging" @editComponent="editComponent(index,item)" > - diff --git a/frontend/src/components/TinyMCE/index.vue b/frontend/src/components/canvas/custom-component/DeRichText.vue similarity index 63% rename from frontend/src/components/TinyMCE/index.vue rename to frontend/src/components/canvas/custom-component/DeRichText.vue index c0adf563e6..9426560c66 100644 --- a/frontend/src/components/TinyMCE/index.vue +++ b/frontend/src/components/canvas/custom-component/DeRichText.vue @@ -1,13 +1,20 @@ + + + diff --git a/frontend/src/components/canvas/custom-component/PanelTextEditor.vue b/frontend/src/components/canvas/custom-component/PanelTextEditor.vue deleted file mode 100644 index a58c6e0e61..0000000000 --- a/frontend/src/components/canvas/custom-component/PanelTextEditor.vue +++ /dev/null @@ -1,30 +0,0 @@ - - - - - diff --git a/frontend/src/components/canvas/custom-component/VTextBack.vue b/frontend/src/components/canvas/custom-component/VTextBack.vue deleted file mode 100644 index 8106661306..0000000000 --- a/frontend/src/components/canvas/custom-component/VTextBack.vue +++ /dev/null @@ -1,150 +0,0 @@ - - - - - diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js index 4d353d9f15..3364ed5f20 100644 --- a/frontend/src/components/canvas/custom-component/component-list.js +++ b/frontend/src/components/canvas/custom-component/component-list.js @@ -126,6 +126,14 @@ export const assistList = [ icon: 'iconfont icon-text', defaultClass: 'text-filter' }, + { + id: '10002', + component: 'de-rich-text', + type: 'de-rich-text', + label: '富文本', + icon: 'iconfont icon-fuwenbenkuang', + defaultClass: 'text-filter' + }, { id: '10004', component: 'rect-shape', @@ -249,26 +257,28 @@ const list = [ }, { id: '10002', - component: 'v-button', - label: '按钮', - propValue: '按钮', - icon: 'button', - type: 'v-button', + component: 'de-rich-text', + label: '富文本', + propValue: '双击输入文字', + icon: 'icon-fuwenbenkuang', + type: 'de-rich-text', mobileStyle: BASE_MOBILE_STYLE, + hyperlinks: HYPERLINKS, style: { - width: 100, - height: 34, - borderWidth: '', - borderColor: '', - borderRadius: '', - fontSize: 14, + width: 400, + height: 100, + fontSize: 22, fontWeight: 400, lineHeight: '', letterSpacing: 0, - textAlign: '', - color: '', - backgroundColor: '' + textAlign: 'center', + color: '#000000', + verticalAlign: 'middle' }, + x: 1, + y: 1, + sizex: 10, + sizey: 2, miniSizex: 1, miniSizey: 1 }, diff --git a/frontend/src/components/canvas/custom-component/index.js b/frontend/src/components/canvas/custom-component/index.js index 6d9145a740..acb5fb3bb2 100644 --- a/frontend/src/components/canvas/custom-component/index.js +++ b/frontend/src/components/canvas/custom-component/index.js @@ -9,7 +9,8 @@ import UserView from '@/components/canvas/custom-component/UserView' import DeVideo from '@/components/canvas/custom-component/DeVideo' import DeFrame from '@/components/canvas/custom-component/DeFrame' import DeStreamMedia from '@/components/canvas/custom-component/DeStreamMedia' - +import DeRichText from '@/components/canvas/custom-component/DeRichText' +Vue.component('DeRichText', DeRichText) Vue.component('DeStreamMedia', DeStreamMedia) Vue.component('Picture', Picture) Vue.component('VText', VText) diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js index 87409ebf58..f5a17a6d1f 100644 --- a/frontend/src/store/index.js +++ b/frontend/src/store/index.js @@ -159,6 +159,12 @@ const data = { dragging: false, resizing: false } + // Is the current component in editing status + if (!state.curComponent) { + component['editing'] = false + } else if (component.id !== state.curComponent.id) { + component['editing'] = false + } } state.styleChangeTimes = 0 state.curComponent = component diff --git a/frontend/src/styles/deicon/demo_index.html b/frontend/src/styles/deicon/demo_index.html index 7b67011ac0..6c8ed8f898 100644 --- a/frontend/src/styles/deicon/demo_index.html +++ b/frontend/src/styles/deicon/demo_index.html @@ -54,6 +54,12 @@
    +
  • + +
    富文本框
    +
    
    +
    • +
  • 下架
    @@ -588,9 +594,9 @@ 
    @font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1652670008819') format('woff2'),
-       url('iconfont.woff?t=1652670008819') format('woff'),
-       url('iconfont.ttf?t=1652670008819') format('truetype');
+  src: url('iconfont.woff2?t=1652937715816') format('woff2'),
+       url('iconfont.woff?t=1652937715816') format('woff'),
+       url('iconfont.ttf?t=1652937715816') format('truetype');
 }

    第二步：定义使用 iconfont 的样式

    @@ -616,6 +622,15 @@
      +
    • + +
      + 富文本框 +
      +
      .icon-fuwenbenkuang +
      +
      • +
    • @@ -1417,6 +1432,14 @@
        +
      • + +
        富文本框
        +
        #icon-fuwenbenkuang
        +
        • +
      - - - - -
      - - {{ $t('commons.confirm') }} - -
      -       - - +