Блог

Я пытаюсь работать с этим редактором vue2-medium на основе этого: https://github.com/FranzSkuffka/vue-medium-editor

Я следую инструкциям, но по какой-то причине я не получаю стили для загрузки..

Итак, мой первый шаг, который я установил yarn add vue2-medium-editor

Затем я импортировал свой компонент в:

 <template>
  <div class="flex flex-col h-screen">    
    <div class="grid place-items-center">
      <!-- Auth Card -->
      <div
        class="w-full p-12 px-6 sm:px-10 bg-white rounded-lg shadow-md lg:shadow-lg"
      >
        <!-- <h2
          class="text-center font-semibold text-3xl lg:text-4xl text-gray-800"
        >
          
        </h2> -->

        <form  method="POST">
          <!-- Email Input -->          
          <input
            id="title"
            type="text"
            name="title"
            placeholder="Title of your story"            
            class="text-xl block w-full py-5 px-2 mt-2 text-gray-800 appearance-none border-b-2 border-gray-100 focus:text-gray-500 focus:outline-none focus:border-gray-200"
            required
          />    
          <editor :content='content' :options='options'></editor>      
        </form>
        <div class="mt-5 flex justify-between">          
          <router-link :to="{ name: 'write-story' }">
            <button class="bg-transparent hover:bg-blue-500 text-blue-700 font-bold py-2 px-4 rounded inline-flex items-center border-2 border-blue-500  hover:text-white hover:border-transparent">           
              <svg class="ml-2 fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"/></svg>                         
              <span>Back</span>              
            </button>  
          </router-link>                          
          <router-link :to="{ name: 'home' }">
            <button class="bg-transparent hover:bg-blue-500 text-blue-700 font-bold py-2 px-4 rounded inline-flex items-center border-2 border-blue-500  hover:text-white hover:border-transparent">           
              <span>Submit</span>                       
            </button>  
          </router-link>                      
        </div>
      </div>
    </div>
  </div>  
</template>

<script>  
  import editor from 'vue2-medium-editor'
  export default {
    
    name: "new-question",
    components: { editor },     
    data() {
      return {
          content: "test",
          options: {
          }
      }
    }
  }
</script>
 

В документации есть шаг по включению необходимого css, и он указывает на css в базовом редакторе среды.

Итак, я установил medium editor с yarn add medium-editor

Затем я включил такие стили, основанные на этом репозитории github: https://github.com/tui2tone/vue2-medium-editor =>

 <style>    
  @import "~/medium-editor/dist/css/medium-editor.css";
  @import "~/vue2-medium-editor/src/themes/default.css"; 
</style>
 

Это находится в том же файле. Это успешно работает, но, похоже, не работает.

Это то, что я получаю сейчас:

Чего мне не хватает?

Редактировать 1

если я сделаю это:

 <style>    
  @import "medium-editor/dist/css/medium-editor.css";
  @import "vue2-medium-editor/src/themes/default.css"; 
</style>
 

Я получаю эту ошибку:

 Uncaught Error: Cannot find module '-!../../../../node_modules/css-loader/index.js??ref--6-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!./medium-editor/dist/css/medium-editor.css'
    at webpackMissingModule (app.js:3172)
    at Object../node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/containers/Story/Create.vue?vueamp;type=styleamp;index=0amp;lang=cssamp; (app.js:3172)
    at __webpack_require__ (app.js:20)
    at Object../node_modules/style-loader/index.js!./node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/containers/Story/Create.vue?vueamp;type=styleamp;index=0amp;lang=cssamp; (app.js:21655)
    at __webpack_require__ (app.js:20)
    at Module../resources/js/containers/Story/Create.vue?vueamp;type=styleamp;index=0amp;lang=cssamp; (app.js:61170)
    at __webpack_require__ (app.js:20)
    at Module../resources/js/containers/Story/Create.vue (app.js:61119)
    at __webpack_require__ (app.js:20)
    at Module../resources/js/router.js (app.js:61283)
    ```