【scripthook】专题简单易用、功能强大的富文本编辑器——Vue2Editor

介绍

Vue2Editor是基于Quill.js和Vuejs构建的易于使用且功能强大的Vue版本的富文本编辑器！

Github

特性

很容易使用。在基于Vue.js Quill.js的构建更复杂的场景中使用自定义选项安装

第一种方法是cdn或

Npm安装vue 2-编辑器

#或使用

Yarn add vue2-editor有两种设置和使用Vue2Editor的方法。

可以将其全局设置为Vue插件，也可以导入VueEditor组件以在本地注册并使用它。两种方法的例子如下

import Vue from "vue";
import Vue2Editor from "vue2-editor";

Vue.use(Vue2Editor);// 基本用途-涵盖大多数情况
import { VueEditor } from "vue2-editor";

// 高级使用-HookQuill的API定制功能
import { VueEditor, Quill } from "vue2-editor";

基本案例

• 基本用法

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

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

export default {
components: { VueEditor },

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

• 自定义图像处理程序

如果选择使用自定义图像处理程序，则在选择照片时会发出一个事件。可以看到下面传递了3个参数。

1. 它传递要处理的文件
2. 编辑器实例
3. 上传时的光标位置，以便成功时可以将图像插入到正确的位置

<template>
<div id="app">
<vue-editor id="editor" useCustomImageHandler @imageAdded="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:
// ('file', file)

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

axios({
url: "https://fakeapi.yoursite.com/images",
method: "POST",
data: formData
})
.then(result => {
let url = re; // Get url from response
Edi(cursorLocation, "image", url);
resetUploader();
})
.catch(err => {
con(err);
});
}
}
};
</script>

• 页面加载后设置内容

<template>
<div>
<button @click="setEditorContent">Set Editor Content</button>
<vue-editor v-model="content" />
</div>
</template>

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

export default {
components: { VueEditor },

data: () => ({
content: null
}),

methods: {
setEditorContent() {
= "<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: 350px;
}
</style>

• 自定义工具栏

<template>
<vue-editor v-model="content" :editor-toolbar="customToolbar" />
</template>

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

export default {
components: { VueEditor },

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

• 保存内容

<template>
<vue-editor v-model="content" :editor-toolbar="customToolbar" />
</template>

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

export default {
components: { VueEditor },

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

• 使用实时预览

<template>
<div>
<vue-editor v-model="content" />
<div>{{ content }}</div>
</div>
</template>

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

export default {
components: { VueEditor },

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

总结

Vue2Editor是一个简单易用的富文本编辑器，如果没有复杂的需求，你可以毫无保留的使用它，如果你需要复杂的功能，也可以使用其自定义能力进行自定义扩展！