vue-quill-editor使用this.$refs.quillEditor.quill.getSelection()方法报错

这可能是因为在组件中使用了ref，但是在使用ref之前组件还没有渲染完毕，导致获取不到对应的DOM元素。可以在mounted生命周期钩子中使用ref获取DOM元素，确保组件渲染完成后再进行操作。

另外，如果使用的是异步组件，可以考虑使用$nextTick()方法，确保DOM元素已经渲染完成后再进行操作。具体可以参考Vue官方文档中的异步组件章节。

相关问题

vue-quill-editor中使用element上传图片

在vue-quill-editor中使用element上传图片，可以通过以下步骤实现：

1. 安装element-ui和vue-quill-editor

npm install element-ui vue-quill-editor --save

2. 在组件中引入element-ui和vue-quill-editor

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueQuillEditor from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
  components: {
    VueQuillEditor,
  },
  data() {
    return {
      editorOption: {
        // ...
      },
    };
  },
  mounted() {
    Vue.use(ElementUI);
  },
  // ...
};

3. 在组件模板中添加上传图片的按钮

<vue-quill-editor v-model="content" :options="editorOption"></vue-quill-editor>
<el-upload
  class="upload-image"
  action="your_upload_url"
  :on-success="handleUploadSuccess"
  :show-file-list="false"
  :headers="your_headers"
>
  <el-button size="small" type="primary">上传图片</el-button>
</el-upload>

4. 实现上传图片的方法handleUploadSuccess

methods: {
  handleUploadSuccess(res) {
    if (res.code === 200) {
      const url = res.data.url; // 上传成功后返回的图片路径
      const quill = this.$refs.myQuillEditor.quill;
      const range = quill.getSelection();
      // 插入图片到编辑器中
      quill.insertEmbed(range.index, 'image', url);
    } else {
      this.$message.error('上传失败');
    }
  },
},

5. 样式调整

.upload-image {
  margin-top: 10px;
  display: inline-block;
}

vue-quill-editor使用element上传图

要在`vue-quill-editor`中使用`element`上传图片，您可以使用以下步骤：

1. 添加`upload`组件到您的页面。

<el-upload
  class="upload-demo"
  ref="upload"
  :action="uploadUrl"
  :on-success="handleUploadSuccess"
  :headers="{ Authorization: token }"
>
  <el-button size="small" type="primary">上传图片</el-button>
</el-upload>

2. 在`data`中定义`uploadUrl`和`token`变量。

data() {
  return {
    uploadUrl: 'your_upload_url',
    token: 'your_token'
  };
}

3. 在`methods`中定义`handleUploadSuccess`方法来获取上传后的图片URL。

methods: {
  handleUploadSuccess(response, file) {
    const imageUrl = response.data.url;
    const quill = this.$refs.myQuillEditor.quill;
    const range = quill.getSelection(true);
    quill.insertEmbed(range.index, 'image', imageUrl);
  },
}

4. 在`vue-quill-editor`中使用`handleUploadSuccess`方法来上传图片。

<quill-editor
  ref="myQuillEditor"
  :options="editorOption"
  v-model="content"
  @image-added="uploadImage($event)"
></quill-editor>

5. 在`methods`中定义`uploadImage`方法来将图片上传到服务器。

methods: {
  uploadImage(file) {
    this.$refs.upload.submit();
  },
}

这样，您就可以使用`element`上传图片到`vue-quill-editor`中了。