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