OneAuth/oaweb/components/editor/index.vue

<!--
 * index.vue
 * Copyright (C) 2023 veypi <i@veypi.com>
 * 2023-10-07 18:57
 * Distributed under terms of the MIT license.
 -->
<template>
  <div class="w-full h-full relative">
    <OneIcon v-if='modelValue' @click="emits('update:modelValue', false)" class="go-edit" name='edit-square'>plus
    </OneIcon>

    <div class="w-full h-full veditor" :id="eid"></div>
  </div>
</template>

<script lang="ts" setup>
import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown';
import options from './options'
// import { oafs } from '@veypi/oaer'

let editor = {} as Cherry;
let emits = defineEmits<{
  (e: 'save', v: string): void
  (e: 'update:modelValue', v: boolean): void
}>()
let props = withDefaults(defineProps<{
  modelValue?: boolean,
  eid?: string,
  content?: string,
  static_dir?: string,
}>(),
  {
    eid: 'v-editor',
    content: '',
    modelValue: true,
  }
)

watch(computed(() => props.modelValue), (e) => {
  editor.switchModel(e ? 'previewOnly' : 'edit&preview')
})
watch(computed(() => props.content), (e) => {
  if (e) {
    editor.setValue(e)
  }
})


const fileUpload = (f: File, cb: (url: string, params: any) => void) => {
  /**
   * @param params.name 回填的alt信息
   * @param params.poster 封面图片地址（视频的场景下生效）
   * @param params.isBorder 是否有边框样式（图片场景下生效）
   * @param params.isShadow 是否有阴影样式（图片场景下生效）
   * @param params.isRadius 是否有圆角样式（图片场景下生效）
   * @param params.width 设置宽度，可以是像素、也可以是百分比（图片、视频场景下生效）
   * @param params.height 设置高度，可以是像素、也可以是百分比（图片、视频场景下生效）
   */
  // oafs.upload([f], props.static_dir).then((e: any) => {
  //   cb(e[0], {
  //     name: f.name, isBorder: false, isShadow: false, isRadius: false, width: '', height: '',
  //   })
  // })
}

const saveMenu = Cherry.createMenuHook('保存', {
  onClick: function () {
    let des = editor.getValue()
    emits('save', des)
    return
  }
});

const backMenu = Cherry.createMenuHook('返回', {
  onClick: function () {
    emits('update:modelValue', true)
    return
  }
})

const init = () => {
  let config = {
    value: props.content,
    id: props.eid,
    isPreviewOnly: props.modelValue,
    callback: {
    },
    fileUpload: fileUpload,
  };
  // @ts-ignore
  options.toolbars.customMenu.saveMenu = saveMenu
  // @ts-ignore
  options.toolbars.customMenu.backMenu = backMenu
  editor = new Cherry(Object.assign({}, options, config));
}


onMounted(() => {
  init()
})
</script>

<style lang="scss">
.go-edit {
  position: absolute;
  right: 2rem;
  top: 1rem;
  opacity: 0.5;
  font-size: 1.5rem;
  z-index: 10;
  cursor: pointer;

  &:hover {
    opacity: 1;
  }
}

.cherry-dialog {
  .cherry-dialog--body {
    bottom: 45px !important;

    iframe {
      width: 100%;
      height: 100%;
    }
  }

  .cherry-dialog--foot {
    height: 45px !important;
    line-height: 34px !important;
  }
}

.veditor .cherry .cherry-previewer {
  // background-color: rgba(0, 0, 0, 0);
  // box-shadow: none;
}

.cherry-toolbar {
  // box-shadow: none;
}
</style>