单页应用
实现富文本生成并自定义图片上传
1. 安装
npm install vue2-editor
2. 上代码
template
<vue-editor v-model="content" id="editor" useCustomImageHandler @image-added="handleImageAdded" :editorToolbar="customToolbar">
</vue-editor>
js
//组件中使用
import { VueEditor} from "vue2-editor";
export default {
components: {
VueEditor
},
data() {
return {
content: '',
customToolbar: [ //默认的工具栏中没有字体大小工具，未能满足使用，所以自定义加上
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{
'header': 1
}, {
'header': 2
}],
[{
'script': 'sub'
}, {
'script': 'super'
}], // superscript/subscript
[{
'indent': '-1'
}, {
'indent': '+1'
}], // outdent/indent
[{
'direction': 'rtl'
}],
[{
'header': [1, 2, 3, 4, 5, 6, false]
}],
[{
'size': ['small', false, 'large', 'huge']
}],
[{
'color': []
}, {
'background': []
}], // dropdown with defaults from theme
[{
'font': []
}],
[{
'align': []
}],
['image'],
['clean']
]
}
},
methods: {
handleImageAdded: function(file, Editor, cursorLocation, resetUploader) {
//上传图片之后，拿到url，加入到内容中去
let url = 'http://图片地址';
Editor.insertEmbed(cursorLocation, "image", url);
}
}
}
3.查看成果
<!DOCTYPE html>
<html>
<head>
<!-- 注意加上该样式，不然字体size那些类不生效 -->
<link href="http://cdn.staticfile.org/quill/1.3.6/quill.core.css" rel="stylesheet">
</head>
<body class="ql-editor">
<%- content %>
</body>
</html>
