vue2 editor下載vue2 editor源代碼下載

Vue2editor

易於使用但功能強大且可自定義的豐富文本編輯器，由Quill.js和Vue.js提供支持

查看文檔

發行說明

安裝

您可以使用紗線或NPM

npm install vue2-editor

或者

yarn add vue2-editor

用法

 // Basic Use - Covers most scenarios
import { VueEditor } from "vue2-editor" ;

// Advanced Use - Hook into Quill's API for Custom Functionality
import { VueEditor , Quill } from "vue2-editor" ;

nuxt.js

添加vue2-editor/nuxt到nuxt.config.js的模塊部分

 {
  modules: [ "vue2-editor/nuxt" ] ;
}

為了避免看到VUE的有關內容不匹配的警告，您需要將VueEditor組件與client-only組件NUXT一起提供，如下所示：

 < client-only >
  < VueEditor />
</ client-only >

道具

姓名	類型	預設	描述
商品	大批	-	聲明要註冊的奎爾模塊
禁用	布爾	錯誤的	設置為true禁用編輯器
編輯	目的	-	提供以合併為默認配置的對象（添加格式，自定義羽毛筆模塊，ECT）
Editortoolbar	大批	**桌子太長。請參閱下面的工具欄示例	使用自定義工具欄
ID	細繩	鵝毛筆	設置ID（如果在同一視圖中的多個編輯器）設置ID）
佔位符	細繩	-	編輯器的佔位符文字
UsecustomimageHandler	布爾	錯誤的	處理圖像上傳，而不是使用默認轉換為base64
V模型	細繩	-	將V模型設置為您希望將其綁定到的內容或數據屬性

事件

姓名	參數	描述
模糊	鵝毛筆	在`blur`活動中散發
重點	鵝毛筆	在`focus`事件上排放
圖像添加	文件，編輯器，CursorLocation	當`useCustomImageHandler`真實並添加照片時發出
圖像被視為	文件，編輯器，CursorLocation	當`useCustomImageHandler`真實並刪除照片時發出
選擇變化	範圍，舊的，來源	在Quill的`selection-change`事件上發出
文字變化	Delta，Olddelta，來源	在Quill的`text-change`事件上發出

例子

示例 - 基本設置

< template >
  < div id = " app " >
    < vue-editor v-model = " content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h1>Some initial content</h1> "
    };
  }
};
</ script >

示例 - 自定義圖像處理程序

如果選擇使用自定義圖像處理程序，則選擇AA照片時會發出事件。您可以在下面看到3個參數已通過。

它通過要處理的文件，但是您需要
編輯實例
上載時的光標位置，因此可以在成功的正確位置插入圖像

注意除此示例外，我還創建了一個示例回購，該回購與實際服務器一起演示了此新功能。

< template >
  < div id = " app " >
    < vue-editor
      id = " editor "
      useCustomImageHandler
      @image-added = " handleImageAdded "
      v-model = " htmlForEditor "
    >
    </ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;
import axios from " axios " ;
export default {
  components : {
    VueEditor
  },

  data () {
    return {
      htmlForEditor : " "
    };
  },

  methods : {
    handleImageAdded : function ( file , Editor , cursorLocation , resetUploader ) {
      // An example of using FormData
      // NOTE: Your key could be different such as:
      // formData.append('file', file)

      var formData = new FormData ();
      formData . append ( " image " , file);

      axios ({
        url : " https://fakeapi.yoursite.com/images " ,
        method : " POST " ,
        data : formData
      })
        . then ( result => {
          const url = result . data . url ; // Get url from response
          Editor . insertEmbed (cursorLocation, " image " , url);
          resetUploader ();
        })
        . catch ( err => {
          console . log (err);
        });
    }
  }
};
</ script >

示例 - 頁面加載後設置內容

< template >
  < div id = " app " >
    < button @click = " setEditorContent " >Set Editor Contents</ button >
    < vue-editor v-model = " htmlForEditor " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      htmlForEditor : null
    };
  },

  methods : {
    setEditorContent : function () {
      this . htmlForEditor = " <h1>Html For Editor</h1> " ;
    }
  }
};
</ script >

示例 - 使用多個編輯器

< template >
  < div id = " app " >
    < vue-editor id = " editor1 " v-model = " editor1Content " ></ vue-editor >
    < vue-editor id = " editor2 " v-model = " editor2Content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      editor1Content : " <h1>Editor 1 Starting Content</h1> " ,
      editor2Content : " <h1>Editor 2 Starting Content</h1> "
    };
  }
};
</ script >

< style >
#editor1 ,
#editor2 {
  height : 350 px ;
}
</ style >

示例 - 自定義工具欄

< template >
  < div id = " app " >
    < vue-editor v-model = " content " :editorToolbar = " customToolbar " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h1>Html For Editor</h1> " ,
      customToolbar : [
        [ " bold " , " italic " , " underline " ],
        [{ list : " ordered " }, { list : " bullet " }],
        [ " image " , " code-block " ]
      ]
    };
  }
};
</ script >

示例 - 保存內容

< template >
  < div id = " app " >
    < button @click = " saveContent " ></ button >
    < vue-editor v-model = " content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h3>Initial Content</h3> "
    };
  },

  methods : {
    handleSavingContent : function () {
      // You have the content to save
      console . log ( this . content );
    }
  }
};
</ script >

示例 - 使用實時預覽

< template >
  < div id = " app " >
    < vue-editor v-model = " content " ></ vue-editor >
    < div v-html = " content " ></ div >
  </ div >
</ template >

< script >
import { VueEditor } from ' vue2-editor '

components : {
  VueEditor
},

export default {
  data () {
    return {
      content : ' <h1>Initial Content</h1> '
    }
  }
}
</ script >

如何使用自定義羽毛筆模塊

使用Vue2Editor使用自定義模塊的方法有兩種。這部分是因為在某些情況下，導入和試圖聲明自定義模塊時會遇到錯誤，部分原因是我相信它實際上可以很好地分開關注點。

版本1-導入並註冊自己

Vue2editor現在導出羽毛筆以協助此過程。

導入Vueeditor時，也會導入Quill。
導入您的自定義模塊
用羽毛筆註冊自定義模塊
將必要的配置添加到editorOptions對象

< template >
  < div id = " app " >
    < vue-editor
      :editorOptions = " editorSettings "
      v-model = " content " >
  </ div >
</ template >

< script >
  import { VueEditor , Quill } from ' vue2-editor '
  import { ImageDrop } from ' quill-image-drop-module '
  import ImageResize from ' quill-image-resize-module '

  Quill . register ( ' modules/imageDrop ' , ImageDrop)
  Quill . register ( ' modules/imageResize ' , ImageResize)

  export default {
    components : {
      VueEditor
    },
    data () {
      return {
        content : ' <h1>Initial Content</h1> ' ,
        editorSettings : {
          modules : {
            imageDrop : true ,
            imageResize : {}
          }
        }
      }
    }
  }
</ script >

版本2-您導入| VUE2Editor登記冊

（推薦方式）

導入您的自定義模塊
使用customModules Prop聲明一個模塊。
在模塊下的editorOptions對像中為這些模塊添加必要的配置，如下所示

< template >
  < div id = " app " >
    < vue-editor
      :customModules = " customModulesForEditor "
      :editorOptions = " editorSettings "
      v-model = " content "
    >
    </ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;
import { ImageDrop } from " quill-image-drop-module " ;
import ImageResize from " quill-image-resize-module " ;

export default {
  components : {
    VueEditor
  },
  data () {
    return {
      content : " <h1>Initial Content</h1> " ,
      customModulesForEditor : [
        { alias : " imageDrop " , module : ImageDrop },
        { alias : " imageResize " , module : ImageResize }
      ],
      editorSettings : {
        modules : {
          imageDrop : true ,
          imageResize : {}
        }
      }
    };
  }
};
</ script >

發展

Vue2editor現在使用POI進行開發

yarn dev ：在開發模式下運行示例
yarn docs ：文檔的開發
yarn build ：以兩種格式構建組件
yarn lint ：運行Eslint

執照

麻省理工學院

展開

vue2 editor

Vue2editor

查看文檔

安裝

用法

nuxt.js

道具

事件

例子

示例 - 基本設置

示例 - 自定義圖像處理程序

示例 - 頁面加載後設置內容

示例 - 使用多個編輯器

示例 - 自定義工具欄

示例 - 保存內容

示例 - 使用實時預覽

如何使用自定義羽毛筆模塊

版本1-導入並註冊自己

版本2-您導入| VUE2Editor登記冊

發展

執照

FC 24 Live Editor

editor app

editor

Aloha Editor html5编辑器

RTE（富文本編輯器）ASP.NET

htaccess Editor：htaccess線上產生器

chat.petals.dev

GPT Prompt Templates

GPTyped

blocksuite

KindEditor HTML線上編輯器

阿賽線上HTML編輯器

Google Dorks

shepherd

mongo express