检测网站安全,办公室装修合同范本,出名的网站有哪些,网站建设客户分析调查表背景
开发中我们需要填写图文内容#xff0c;就是含有图片和文字#xff0c;html标准组件中是没有的。都是第三方来实现#xff0c;就需要我们去集成。 有早期的fckEditor、ckEditor等#xff0c;新的我们使用了vue框架#xff0c;市场又推出了quillEditor。下面我们就在…背景
开发中我们需要填写图文内容就是含有图片和文字html标准组件中是没有的。都是第三方来实现就需要我们去集成。 有早期的fckEditor、ckEditor等新的我们使用了vue框架市场又推出了quillEditor。下面我们就在vitevue项目中集成了这个组件。
效果图 1、安装组件
安装Quill
cnpm install vueup/vue-quilllatest --save
安装拖放组件
cnpm install quill-image-drop-module --save
安装图片缩放组件
cnpm install quill-blot-formatter --save
2、创建子组件
封装子组件src/components/QuillEditor/index.vue
templateQuillEditorrefmyQuillEditorclassquill-editor:style{ height: height px }contentTypehtmlv-model:contentinnerContent:modulesmodules:optionsoptionsupdate:contenthandleUpdate/QuillEditor
/templatescript setup
/*** 官方文档 https://vueup.github.io/vue-quill/*/
import { Quill, QuillEditor } from vueup/vue-quill;
import vueup/vue-quill/dist/vue-quill.snow.css; //snow主题使用次样式
// import vueup/vue-quill/dist/vue-quill.bubble.css; //bubble主题使用次样式
// import ImageUploader from quill-image-uploader;import { computed, getCurrentInstance, reactive } from vue;
// import { customerUpload, DownloadBaseUrl } from /utils;// Quill.register(modules/imageUploader, ImageUploader);//引入并注册图片改变尺寸插件
// cnpm install quill-image-drop-module --save
import { ImageDrop } from quill-image-drop-module;
Quill.register(modules/imageDrop, ImageDrop)// cnpm install quill-blot-formatter --save
import BlotFormatter from quill-blot-formatter
Quill.register(modules/blotFormatter, BlotFormatter)const modules {module: BlotFormatter,
}const props defineProps({height: {type: Number,default: 500},content: {type: String,default: },toolbar: {type: Array,default() {return [[bold, italic, underline, strike], // toggled buttons[blockquote, code-block],[{ header: 1 }, { header: 2 }], // custom button values[{ list: ordered }, { list: bullet }],[{ script: sub }, { script: super }], // superscript/subscript[{ indent: -1 }, { indent: 1 }], // outdent/indent[{ direction: rtl }],[{ size: [small, false, large, huge] }], // text direction // custom dropdown[{ header: [1, 2, 3, 4, 5, 6, false] }],[{ color: [] }, { background: [] }], // dropdown with defaults from theme[{ font: [] }],[{ align: [] }],[link, video, image],[clean] // remove formatting button];}}
});
const emit defineEmits([update:content]);
const innerContent computed({get() {return props.content;},set(value) {emit(update:content, value);}
});const { proxy } getCurrentInstance();
const options reactive({modules: {imageResize: {displayStyles: {backgroundColor: black,border: none,color: white},modules: [Resize, DisplaySize, Toolbar]},toolbar: props.toolbar,imageUploader: {upload: (file) {return new Promise((resolve, reject) {customerUpload(file).then((res) {console.log(res:, res);resolve(${DownloadBaseUrl}pk${res.data[0].pk});}).catch((err) {proxy.$message.error(err);reject(err);});});}}},placeholder: 请输入内容,readOnly: false,theme: snow
});
const handleUpdate (content) {console.log(content, innerContent.value);
};
/scriptstyle/style
3、页面调用
templateQuillEditor refquillRef v-model:contentcontent :contentcontent :optionseditorOption/{{content}}
/templatescript setup
import { ref } from vue
import QuillEditor from ../components/QuillEditor/index.vuelet content ref(p 请填写内容.../p);
let editorOption {modules: {toolbar: [[bold, italic, underline, strike], // 加粗 斜体 下划线 删除线[{ list: ordered }, { list: bullet }], // 有序、无序列表[{ script: sub }, { script: super }], // 上标/下标[blockquote, code-block], // 引用 代码块[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色[{ align: [] }], // 对齐方式[{ size: [small, false, large, huge] }], // 字体大小[{ font: [] }], // 字体种类[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题[{ direction: rtl }], // 文本方向[{ indent: -1 }, { indent: 1 }], // 缩进[clean], // 清除文本格式[link, image], // 链接、图片、视频],},
};function editorBlur(val) {console.log(当前的文本框的内容 val);
}/scriptstyle/style
