富文本前端后端uniapp端整合

51 阅读 0 评论 34 点赞

我是靠谱客的博主成就裙子，最近开发中收集的这篇文章主要介绍富文本前端后端uniapp端整合，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前端：

        <el-row>
          <el-col :span="24">
            <el-form-item label="商品详情3：">
              <ueditor-wrap v-model="formValidate.description" :config="myConfig"  @beforeInit="addCustomDialog"  style="width: 90%;"></ueditor-wrap>
            </el-form-item>
          </el-col>
        </el-row>



<script>

import UeditorWrap from 'vue-ueditor-wrap';
export default {
  components: { UeditorWrap },

  data() {
    return {

      myConfig: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 500, // 初始容器高度
        initialFrameWidth: '100%', // 初始容器宽度
        UEDITOR_HOME_URL: '/UEditor/',
        serverUrl: ''
      },

  },

  methods: {
    
        
    addCustomDialog () {
      window.UE.registerUI('yshop', function (editor, uiName) {
        let dialog = new window.UE.ui.Dialog({
          iframeUrl: '/yshop/materia/index',
          editor: editor,
          name: uiName,
          title: '上传图片',
          cssRules: 'width:1200px;height:500px;padding:20px;'
        });
        this.dialog = dialog;

        var btn = new window.UE.ui.Button({
          name: 'dialog-button',
          title: '上传图片',
          cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
          onclick: function () {
            dialog.render();
            dialog.open();
          }
        });

        return btn;
      }, 37);
    },
  }



}

</script>

后端：

接口拿到字符串直接存入数据库

<p><span style="font-size: 10px;">11111111122555</span><br/></p><p><strong>dddd22</strong></p><p><span style="color: rgb(255, 0, 0); font-size: 24px;"><strong>你好大字啊</strong></span></p><p><br/></p><p><img style="max-width: 100%;" src="https://image.test.cn/5ca081af6183f.jpg"/><img src="https://image.test.cn/5ca04fa9c08ef.jpg"/></p>

uniapp:


      <!-- 商品详情 -->
      <view class="product-intro">
        <text class="title"><text>产品介绍3</text></text>
        <view class="conter" v-html="storeInfo.description"></view>
      </view>






调用后端接口获取到数据后得处理方式：

      getProductDetail(that.id, from)
        .then(res => {
          res.data.storeInfo.description = res.data.storeInfo.description.replace(/<img/gi, '<img style="max-width:100%;height:auto;"')
          that.$set(that, 'storeInfo', res.data.storeInfo)
          // 给 attr 赋值，将请求回来的规格赋值给 attr
          that.$set(that.attr, 'productAttr', res.data.productAttr)
})