JavaScript >> Javascript 文檔 >  >> Vue.js

如何使用 Vue 重用您的 Trix WYSIWYG 編輯器?

在為您的網站添加 WYSIWYG 編輯器時,您是否考慮過:

1)使用哪個庫?
2)如何實施?
3) 如果我必須添加超過 2 個編輯器怎麼辦?
4) 我可以讓它們重複使用嗎?

是的,你可以。

這裡我使用的是 Basecamp 的 Trix 編輯器。

在開始之前查看文檔並安裝庫!

在使其可重用之前,讓我們先快速設置編輯器。

開始

首先,讓我們添加編輯器標籤,就像文檔提到的那樣:

<template>
   <div>
       <input id="x" type="hidden" name="content">
       <trix-editor input="x"></trix-editor>
   </div>
</template>

現在你有了一個不錯的編輯器。但是將您輸入的文本存儲在某處會很棒。讓我們在表單輸入上創建一個雙向綁定:

<template>
   <div>
       <input id="x" type="hidden" name="content" v-model="trixText"> <!-- new code here -->
       <trix-editor input="x"></trix-editor>
   </div>
</template>

<script>
import Trix from 'trix';
export default {
   data() {
      return {
          trixText: '' // new code here
      }
   }
}
</script>

聆聽 Trix 編輯器的變化

來自文檔:

這裡我們將使用 trix-change 聽眾。

<template>
   <div>
       <input id="x" type="hidden" name="content" v-model="trixText">>
       <trix-editor input="x"></trix-editor>
   </div>
</template>

<script>
export default {
   data() {
      return {
          trixText: ''
      }
   },
   methods: {
       setTextToTrix: function() {
           this.trixText = document.getElementById("x").value; 
       }
   }
   mounted() {
       document.addEventListener("trix-change", this.setTextToTrix); // Listen to the changes on the editor
   }
}
</script>

完成後刪除事件偵聽器。

<!-- TrixComponent.vue -->
<script>
export default {
 ..
  mounted() {
    document.addEventListener("trix-change", this.setTextToTrix);
  },
  beforeDestroy: function() {
    document.removeEventListener("trix-change", this.setTextToTrix); // New code here
  }
};
</script>

使其可重複使用

所以現在你已經設置了你的基本編輯器!是時候讓它可重複使用了。

使 trix-editor 可重用的秘訣:

<input id="x" type="hidden" name="content" v-model="trixBody"> <!-- notice the id? -->
<trix-editor ref="trix" input="x"></trix-editor> <!-- notice the id? -->

這意味著我們可以創建一個唯一的 id 對於每個使用 TrixComponent.vue 的組件 .

為了證明這一點,讓我們有 2 個組件:ComponentA.vueComponentB.vue 使用您剛剛創建的相同編輯器。

讓我們繼續ComponentA.vue 第一的。

<!-- ComponentA.vue -->

<template>
  <div class="component-a">
    <h3>Component A</h3>
    <h6>
      Text:
      <span v-html="textA"></span> <!-- Data received will be in HTML format -->
    </h6>
    <TrixComponent></TrixComponent> <!-- TrixComponent -->
  </div>
</template>

<script>
import TrixComponent from "./TrixComponent";
export default {
  components: {
    TrixComponent
  },
  data() {
    return {
      textA: "",
    };
  },
  methods: {
  }
};
</script>

我們可以將 id 作為道具從 ComponentA.vue 傳遞 到 TrixComponent.vue .

<!-- ComponentA.vue -->
<template>
  <div class="component-a">
    <h3>Component A</h3>
    <h6>
      Text:
      <span v-html="textA"></span>
    </h6>
    <TrixComponent :id="id"></TrixComponent> <!-- pass the id here -->
  </div>
</template>

<script>
import TrixComponent from "./TrixComponent";
export default {
  components: {
    TrixComponent
  },
  data() {
    return {
      id: "A" // Here we have an id 'A'
    };
  },
  methods: {
  }
};
</script>

我們可以分配 props(id) 到輸入和 trix 編輯器。

<!-- TrixComponent.vue -->
<template>
  <div>
    <input :id="id" type="hidden" name="content" v-model="trixText"> <!-- Set the id according to the props -->
    <trix-editor :input="id"></trix-editor> <!-- Set the id according to the props --> 
  </div>
</template>

<script>
export default {
  props: ["id"], // Receive the id from the parent component
  data() {
    return {
      trixText: ""
    };
  },
  methods: {
    setTextToTrix(e) {
      this.trixText = document.getElementById(this.id).value; // REMEMBER TO UPDATE THE ID HERE TOO!
    },
  },
  mounted() {
    document.addEventListener("trix-change", this.setTextToTrix);
  },
  beforeDestroy: function() {
    document.removeEventListener("trix-change", this.setTextToTrix);
  },
};
</script>

TrixComponent.vue 取回數據

我們將從 TrixComponent.vue 發出數據 到它的父組件,即 ComponentA.vue

<!-- TrixComponent.vue -->
<template>
  <div>
    <input :id="id" type="hidden" name="content" v-model="trixText">
    <!-- updated here -->
    <trix-editor :input="id"></trix-editor>
  </div>
</template>

<script>
export default {
  props: ["id"],
  data() {
    return {
      trixText: ""
    };
  },
  methods: {
    setTextToTrix(e) {
      this.trixText = document.getElementById(this.id).value;
    },
    emitDataBackToComponent() {
      this.$emit("dataFromTrix", this.trixText); // Emit the data back to the parent component
    }
  },
  mounted() {
    document.addEventListener("trix-change", this.setTextToTrix);
  },
  beforeDestroy: function() {
    document.removeEventListener("trix-change", this.setTextToTrix);
  },
  updated() {
    this.emitDataBackToComponent(); // Fire the event whenever there's an update
  }
};
</script>

ComponentA.vue 然後將能夠從 TrixComponent.vue 接收數據

<!-- ComponentA.vue -->
<template>
  <div class="component-a">
    <h3>Component A</h3>
    <h6>
      Text:
      <span v-html="textA"></span>
    </h6>
    <TrixComponent :id="id" @dataFromTrix="getDataFromTrix"></TrixComponent> <!-- Receive the data back -->
  </div>
</template>

<script>
import TrixComponent from "./TrixComponent";
export default {
  components: {
    TrixComponent
  },
  data() {
    return {
      textA: "",
      id: "A"
    };
  },
  methods: {
    getDataFromTrix: function(data) {
      this.textA = data; // Assign the data back to the the variable
    }
  }
};
</script>

ComponentB.vue 的邏輯相同 :只需傳遞一個不同的 id(可能是 id: 'B' ?) 到 TrixComponent.vue .

而已!
您現在已經創建了一個可重用的 trix 編輯器 :)

這是代碼示例。

快樂編碼😊


Tutorial JavaScript 教程
  1. 深入了解容器圖像 - 第 3 部分

  2. 3 月的 Maps API 教程

  3. 如何 Dockerize 一個 ExpressJS 應用程序

  4. 解決方案:分區列表

  5. 創建簡單的倒數計時器組件

  6. 準備使用 React.Js 和 JavaScript 進行家庭評估面試

  7. 是時候直觀地理解代碼了

  1. 使用 about:blank 在瀏覽器中打開一個帶有乾淨控制台的空白頁面

  2. 使用 React.Suspense 等待圖像加載

  3. 為您的 GitHub 自述文件創建動態自定義屏蔽!

  4. 以任何語言獲取 React.js 應用程序中的所有國家/地區

  5. 如果您的生態系統中的微服務出現故障,您會怎麼做?

  6. JavaScript 閉包的一個實際例子 - 部分應用函數

  7. Angular 中的組件架構

  1. 編寫安全的 Node.js 代碼 – Danny Grander

  2. 我創建了一個只顯示隨機顏色的服務

  3. React 組件組合:如何正確使用

  4. 死簡單 OAuth