富文本自定义图片和自定义文本域 - z_xun

<template>
  <div
    style="
      background: #fff;
      border-radius: 4px;
      padding: 20px;
      box-sizing: border-box;
    "
  >
    <div>
      <div class="baseInfo">
        <div class="baseInfo_l">素材名称</div>
        <div class="baseInfo_r">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
      </div>
      <div class="baseInfo">
        <div class="baseInfo_l">内容</div>
        <div class="baseInfo_r">
          <!-- <el-input class="ipt" v-model="baseInfo" placeholder="请选择分类"></el-input> -->
          <quill-editor
            style="width: 80%; margin-left: 30px; height: 300px"
            ref="myTextEditor"
            v-model="description"
            :options="editorOption"
          >
            <div id="toolbar" slot="toolbar">
              <!-- //这里是插槽通过此 来自定义图片按钮 实现自定义上传 -->
              <el-button
                type="primary"
                style="margin-bottom: 20px"
                @click="insertionRichText"
              >
                插入图片到富文本中
              </el-button>
            </div>
          </quill-editor>
        </div>
      </div>
      <div class="baseInfo" style="margin-top: 200px;margin-left:60px;">
        <div class="baseInfo_l"></div>
        <div class="baseInfo_r">
          <el-button type="primary" @click="back">返回</el-button>
          <el-button type="primary" @click="sureBtn">保存</el-button>
        </div>
      </div>
    </div>
    <goodsPicture ref="goodsPicture" @showimg="showimg"></goodsPicture>
  </div>
</template>

<script>
import \'quill/dist/quill.core.css\'
import \'quill/dist/quill.snow.css\'
import \'quill/dist/quill.bubble.css\'
import { quillEditor } from \'vue-quill-editor\'
import goodsPicture from \'../../../widget/goodsPicture/dialog.vue\'
export default {
  data() {
    return {
      input: \'\',
      description: \'\', //富文本
      dialogVisible: false, // 弹出框
      editorOption: {
        // 富文本自定义工具栏
        placeholder: \'请输入活动内容\',
        modules: {
          toolbar: [
            [\'bold\', \'italic\', \'underline\', \'strike\'], // toggled buttons
            [\'blockquote\', \'code-block\'],
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ list: \'ordered\' }, { list: \'bullet\' }],
            [\'code-block\'],
            [{ script: \'sub\' }, { script: \'super\' }],
            [{ indent: \'-1\' }, { indent: \'+1\' }],
            [{ direction: \'rtl\' }],
            [{ size: [\'small\', false, \'large\', \'huge\'] }],
            [{ color: [] }, { background: [] }],
            [{ font: [] }],
            [{ align: [] }],
          ],
        },
      },
    }
  },
  methods: {
    sureBtn() {
      console.log(this.description,\'description\')
    },
    back() {
      this.$router.go(-1)
    },
    show() {
      return this.description
    },
    // 点击插入到富文本按钮
    insertionRichText() {
      this.$refs.goodsPicture.show({ dialogVisible: true })
      this.picUrl = []
    },
    showimg(picUrl) {
      this.picUrl = picUrl.reverse()
      console.log(this.picUrl, \'触发了\')
      let quill = this.$refs.myTextEditor.quill
      // 如果上传成功
      // 获取光标所在位置
      let length = quill.getSelection(true).index
      this.picUrl.forEach((item) => {
        // 插入图片  res.data为服务器返回的图片地址
        quill.insertEmbed(length, \'image\', item.url) // 这里的url是图片的访问路径不是真实物理路径
        // 调整光标到最后
      })
      quill.setSelection(length + 1)
    },
  },
  components: {
    \'quill-editor\': quillEditor,
    goodsPicture,
  },
}
</script>

<style scoped>
.screen-title2 {
  height: 30px;
  margin-bottom: 10px;
}
.screen-title2 .text {
  float: left;
  height: 20px;
  line-height: 20px;
  padding-left: 6px;
  font-weight: 700;
  border-left: 3px solid #2589ff;
}
.baseInfo {
  display: flex;
  height: 100%;
  line-height: 32px;
  margin-bottom: 15px;
}
.baseInfo_l {
  /* width: 190px; */
  text-align: right;
  margin-right: 20px;
}
.baseInfo_l span {
  color: #d60a0a;
}
.fs {
  font-size: 12px;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.bgc {
  background-color: red;
  color: #fff;
}
.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  line-height: 200px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  text-align: center;
  line-height: 178px;
}
.avatar {
  display: block;
  line-height: 200px;
}
.selectedImg {
  border: 1px solid blue;
  box-sizing: border-box;
}
.tag {
  height: 8px;
  width: 8px;
  padding: 0;
  right: 0;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 10px;
  background-color: #f56c6c;
}
#upload {
  transform: translateY(-10px);
}
#upload .el-upload--text {
  width: 83px !important;
  height: 34px !important;
}
#upload .el-upload--text button {
  transform: translateY(-85px);
}
</style>
<style>
.elmain_two .el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}
</style>