2回答

robotZSJ

2023-07-08

wangEditor 官网目前是v5版本，老师使用的方式是v4版本。

修改了代码，测试正常

1.template

2.script 导入

3.export - setup()

4. 表单位置

5.onMounted

6.return

                        <a-form-item>
                            // 修改
                            <div ref="editor"></div>
                        </a-form-item>

<script lang="ts">
// 修改
  import { defineComponent, onMounted, ref, createVNode, reactive } from 'vue';
  import axios from 'axios';
  import {message, Modal} from 'ant-design-vue';
  import {Tool} from "@/util/tool";
  import {useRoute} from "vue-router";
  import ExclamationCircleOutlined from "@ant-design/icons-vue/ExclamationCircleOutlined";
  
  // 修改
  import WangEditor from 'wangeditor'

  interface contentDTO {
  html: string;
  instance: any;
}


      // 修改
      const editor = ref();
        // 存储输入的内容
      const content: contentDTO  = reactive({
          html: '',        // 存储输入的内容
          instance: null,  // 存储 富文本编辑器对象的实例
      });


   

      // -------- 表单 ---------
      // 因为树选择组件的属性状态，会随当前编辑的节点而变化，所以单独声明一个响应式变量
      const treeSelectData = ref();
      treeSelectData.value = [];
      const doc = ref();
      doc.value = {};// 修改
      const modalVisible = ref(false);
      const modalLoading = ref(false);


      const handleSave = () => {
        modalLoading.value = true;
        doc.value.content = content.instance.txt.html();// 修改
        axios.post("/doc/save", doc.value).then((response) => {
          modalLoading.value = false;
          const data = response.data; // data = commonResp
          if (data.success) {
            modalVisible.value = false;

            // 重新加载列表
            handleQuery();
          } else {
            message.error(data.message);
          }
        });
      };

  

      onMounted(() => {
        handleQuery();

        // 修改
        content.instance = new WangEditor(editor.value);
        content.instance.config.zIndex = 0;
        content.instance.create();
      });

      return {
        ...
        // 修改
        editor,
        content
      }
    }
  });

G

M

T

Y

检测语言世界语簡體中文繁體中文丹麦语乌克兰语乌兹别克语乌尔都语亚美尼亚语伊博语俄语保加利亚语信德语修纳语僧伽罗语克罗地亚语冰岛语加利西亚语加泰罗尼亚语匈牙利语南非祖鲁语卡纳达语卢森堡语印地语印尼巽他语印尼爪哇语印尼语古吉拉特语吉尔吉斯语哈萨克语土耳其语塔吉克语塞尔维亚语塞索托语夏威夷语威尔士语孟加拉语宿务语尼泊尔语巴斯克语布尔语(南非荷兰语)希伯来语希腊语库尔德语 (Kurmanji)库尔德语 (Sorani)弗里西语德语意大利语意第绪语拉丁语拉脱维亚语挪威语捷克语斯洛伐克语斯洛文尼亚语斯瓦希里语旁遮普语日语普什图语格鲁吉亚语毛利语法语波兰语波斯尼亚语波斯语泰卢固语泰米尔语泰语海地克里奥尔语爱尔兰语爱沙尼亚语瑞典语白俄罗斯语科萨科西嘉语立陶宛语索马里语约鲁巴语缅甸语罗马尼亚语老挝语芬兰语苏格兰盖尔语苗语英语荷兰语菲律宾语萨摩亚语葡萄牙语蒙古语西班牙语豪萨语越南语阿塞拜疆语阿姆哈拉语阿尔巴尼亚语阿拉伯语鞑靼语韩语马其顿语马尔加什语马拉地语马拉雅拉姆语马来语马耳他语高棉语齐切瓦语

世界语簡體中文繁體中文丹麦语乌克兰语乌兹别克语乌尔都语亚美尼亚语伊博语俄语保加利亚语信德语修纳语僧伽罗语克罗地亚语冰岛语加利西亚语加泰罗尼亚语匈牙利语南非祖鲁语卡纳达语卢森堡语印地语印尼巽他语印尼爪哇语印尼语古吉拉特语吉尔吉斯语哈萨克语土耳其语塔吉克语塞尔维亚语塞索托语夏威夷语威尔士语孟加拉语宿务语尼泊尔语巴斯克语布尔语(南非荷兰语)希伯来语希腊语库尔德语 (Kurmanji)库尔德语 (Sorani)弗里西语德语意大利语意第绪语拉丁语拉脱维亚语挪威语捷克语斯洛伐克语斯洛文尼亚语斯瓦希里语旁遮普语日语普什图语格鲁吉亚语毛利语法语波兰语波斯尼亚语波斯语泰卢固语泰米尔语泰语海地克里奥尔语爱尔兰语爱沙尼亚语瑞典语白俄罗斯语科萨科西嘉语立陶宛语索马里语约鲁巴语缅甸语罗马尼亚语老挝语芬兰语苏格兰盖尔语苗语英语荷兰语菲律宾语萨摩亚语葡萄牙语蒙古语西班牙语豪萨语越南语阿塞拜疆语阿姆哈拉语阿尔巴尼亚语阿拉伯语鞑靼语韩语马其顿语马尔加什语马拉地语马拉雅拉姆语马来语马耳他语高棉语齐切瓦语

文本转语音功能仅限200个字符

选项 : 历史 : 反馈 : Donate

关闭

0

0

甲蛙

2021-07-29

检查下你的wangeditor是否跟我的版本一致，用最新的版本的话，需要重新看官网的示例写法

0

0