wangeditor介绍文档
wangeditor的原文博客链接
自己配置了下……
一些常见配置:
- 设置可编辑器内容区域的
高度
instance.config.height = 350;
- 同步获取富文本编辑器的内容是方法
onchange()
,内容是instance.txt.html()
onchange() {
// 将值instance.txt.html() 传递至父组件
content.emit('getWangEditorValue', instance.txt.html());
},
- 设置富文本编辑器的内容是
instance.txt.html('富文本内容')
instance.txt.html()
- 清空编辑器内容
instance.txt.clear()
1. 安装wangeditor
cnpm install wangeditor
2. WangEditor.vue
基本配置
WangEditor.vue
<template>
<div ref='editor'></div>
</template>
<script lang="ts">
import { onMounted,defineComponent, onBeforeUnmount, ref, toRefs } from 'vue';
// 引入wangeditor组件
import WangEditor from 'wangeditor';
// 引入代码高亮组件
import hljs from 'highlight.js'
// 公共状态文件
// 官方文档:https://www.kancloud/wangfupeng/wangeditor3/335774
export default defineComponent({
name: 'Wangeditor',
// 设置富文本编辑器的HTML内容
props:{
contentHtml:String,
},
setup(props: any, content: any) {
// 获取编辑器实例html
const editor = ref();
// 编辑器实例对象
let instance: any = '';
onMounted(() => {
// 编辑器实例对象
instance = new WangEditor(editor.value);
// 自定义菜单
instance.config.menus = [
// 'head',
'bold', //字体加粗
'fontSize',//字号
'fontName',//字体
// 'italic',
// 'underline',//下划线
// 'strikeThrough',//删除线
// 'indent',
// 'lineHeight',
'foreColor',
// 'backColor',
'link',
'list',//列表
// 'todo',
'justify',//对其
// 'quote',// 引用
'emoticon',
'image',
// 'video',//视频
// 'table',//表格
'code',
// 'splitLine',
'undo',//撤销
'redo',//恢复
];
// 代码高亮
instance.highlight = hljs;
// 开启本地上传图片(这是后端上传链接)
instance.config.uploadImgServer = '/upload-img';
// 限制上传图片格式
instance.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
// 开启本地上传视频(这是后端上传链接)
instance.config.uploadVideoServer = '/api/upload-video';
// 设置编辑器高度
instance.config.height = 350;
// 设置编辑器页面层级
instance.config.zIndex = 10;
// 设置编辑器placeholder
instance.config.placeholder = '请输入您的文字!';
// 配置编辑器显示颜色
instance.config.colors = [
'#000000',
'#eeece0',
'#1c487f',
'#4d80bf'
];
// 忽略粘贴内容中的图片
instance.config.pasteIgnoreImg = true;
Object.assign(instance.config, {
// wangeditor 值发生变化的时候
onchange() {
// 将值instance.txt.html() 传递至父组件
content.emit('getWangEditorValue', instance.txt.html());
},
// 上传网络图片回调
linkImgCallback(src:string){
console.log('图片 src ', src)
},
// 上传网络视频回调
onlineVideoCallback(video:string) {
// 自定义回调内容,内容成功插入后会执行该函数
console.log('插入视频内容', video)
}
});
instance.create();
// 设置富文本编辑器的页面内容,父组件传递的
instance.txt.html(props.contentHtml)
});
// 页面卸载
onBeforeUnmount(() => {
instance.destroy();
instance = null;
});
return {
editor,
};
},
});
</script>
3. 使用demo:
<template>
<div>
{{data.contentHtml}}
<div class="wangeditor">
<wang-editor :contentHtml="data.contentHtml" v-on:getWangEditorValue="getWangEditorValue"></wang-editor>
</div>
<button @click="submit">提交获取富文本内容</button>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
import WangEditor from "@/components/WangEditor.vue";
export default defineComponent({
components: {
WangEditor,
},
setup() {
const data = reactive({
// 设置富文本内容 contentHtml:'渲染的富文本内容'
contentHtml: "",
});
const getWangEditorValue = (str: string) => {
data.contentHtml = str;
};
// 保存提交文章内容
const submit = () => {
console.log("富文本编辑器内容是:", data.contentHtml);
};
return {
data,
submit,
getWangEditorValue,
};
},
});
</script>
后续再写……
更多推荐
wangeditor富文本编辑器在vue3中的使用
发布评论