123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- <template>
- <div style="border: 1px solid #ccc">
- <Toolbar
- :default-config="toolbarConfig"
- :editor="editorRef"
- :mode="mode"
- style="border-bottom: 1px solid #ccc"
- />
- <Editor
- v-model="valueHtml"
- :default-config="editorConfig"
- :mode="mode"
- style="min-height: 700px"
- @onChange="changeEdit"
- @onCreated="handleCreated"
- />
- </div>
- </template>
- <script>
- import '@wangeditor/editor/dist/css/style.css'
- import { useUserStore } from '@/store/modules/user'
- import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
- import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
- export default {
- components: { Editor, Toolbar },
- props: {
- content: {
- type: String,
- required: true,
- },
- },
- setup(props, { emit }) {
-
- const editorRef = shallowRef()
- const valueHtml = ref(props.content)
- watch(props, (newProps) => {
- valueHtml.value = newProps.content
- })
-
- onMounted(() => {
-
-
-
-
- })
- const toolbarConfig = {}
-
- const editorConfig = {
-
- MENU_CONF: {},
- placeholder: '请输入内容...',
-
- }
-
- onBeforeUnmount(() => {
- const editor = editorRef.value
- if (editor == null) return
- editor.destroy()
- })
- const userStore = useUserStore()
-
- editorConfig.MENU_CONF['uploadImage'] = {
- server: `${process.env.VUE_APP_BASE_URL}` + '/base/resource/upload',
-
- fieldName: 'file',
-
- maxFileSize: 10 * 1024 * 1024,
-
- maxNumberOfFiles: 10,
-
- allowedFileTypes: ['image/*'],
-
- meta: {
- file_type: 'img',
- dir: 'default',
- },
-
- metaWithUrl: false,
-
- headers: {
- Authorization: userStore.token,
- },
-
- withCredentials: true,
-
- timeout: 5 * 1000,
- customInsert(res, insertFn) {
-
-
- console.log('上传图片成功', res)
-
- insertFn(res.data.url)
- },
- }
- const handleCreated = (editor) => {
- editorRef.value = editor
- }
- const changeEdit = () => {
- emit('change-edit', valueHtml.value)
- }
-
- const handleBlur = (editor) => {
- console.log(valueHtml, 'blur', editor)
- }
- const handleChange = (editor) => {
- console.log('change:', editor.getHtml())
- }
- return {
- editorRef,
- valueHtml,
- mode: 'default',
- toolbarConfig,
- editorConfig,
- changeEdit,
- handleBlur,
- handleChange,
- handleCreated,
- }
- },
- }
- </script>
|