vue项目中使用富文本编辑器(wangeditor)
wangeditor官方教程:https://www.kancloud.cn/wangfupeng/wangeditor3/一、在vue项目中安装wangeditornpm install wangeditor二、在vue页面中使用wangeditor,如在editor.vue文件中创建富文本编辑器<template><div class="wang-edit...
·
wangeditor官方教程:https://www.kancloud.cn/wangfupeng/wangeditor3/
一、在vue项目中安装wangeditor
npm install wangeditor
二、在vue页面中使用wangeditor,如在editor.vue文件中创建富文本编辑器
<template>
<div class="wang-editor">
<p>1、将头部和编辑的区域不分开的富文本编辑器</p>
<div id="editor" class="editor">
<span>{{msg}}</span>
</div>
<p>2、将头部和编辑的区域分开的富文本编辑器</p>
<div id="editorToolBar" class="editor-tool-bar" title="富文本的头部"></div>
<div id="editorContent" class="editor-content" title="富文本的编辑区域"></div>
</div>
</template>
<script>
import Editor from 'wangeditor';
export default {
name: 'Editor',
data () {
return {
editor1:null,
editor2:null,
editorContent:'',
msg:'11111',//富文本编辑器中默认初始化的内容
}
},
mounted(){
this.createEditor();
},
methods: {
//创建富文本编辑器
createEditor(){
//一、将头部和编辑的区域不分开的富文本编辑器
this.editor1 = new Editor('#editor');
console.log(this.editor1.txt.html());//获取编辑器内,含有html标签的所有内容
console.log(this.editor1.txt.text());//获取编辑器内,纯文本的所有内容
this.editor1.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
];//编辑器头部的操作功能菜单
this.editor1.customConfig.onchangeTimeout = 1000;//编辑内容改变的函数的时间等待
this.editor1.customConfig.onchange = function (html) {
console.log(html);
}//编辑内容改变的函数
this.editor1.customConfig.zIndex = 100000;//同时改变头部和编辑区的z-index
this.editor1.customConfig.pasteFilterStyle = false;//去除粘贴文本时自带 的样式
this.editor1.customConfig.pasteIgnoreImg = true;//去除粘贴时自带的图片
this.editor1.customConfig.pasteTextHandle = function (content) {//粘贴文本时的函数
console.log(content);//打印粘贴的文本
}//粘贴文本时的函数
this.editor1.customConfig.onblur = function (html) {//编辑器失去焦点
console.log('onblur');
console.log(html);//编辑器中的内容
}//编辑器失去焦点
this.editor1.customConfig.onfocus = function () {//编辑器获得焦点
console.log('onfocus');
}//编辑器获得焦点
this.editor1.customConfig.colors = [
'#000000',
'#eeece0',
'#1c487f',
'#4d80bf',
'#c24f4a',
'#8baa4a',
'#7b5ba1',
'#46acc8',
'#f9963b',
'#ffffff'
];//自定义配置颜色(字体颜色、背景色)
this.editor1.create();
//二、将头部和编辑的区域分开的富文本编辑器
this.editor2 = new Editor('#editorToolBar','#editorContent');
this.editor2.create();
this.editor2.$textElem.attr('contenteditable',false);//禁用编辑功能,进而无法输入内容
this.editor2.$textElem.attr('contenteditable',true);//开启编辑功能
this.editor2.txt.html('312213213');//设置文本中的内容
this.editor2.txt.clear();//清除文本中的内容
}
}
}
</script>
<style scoped lang="less">
.wang-editor{
width: 100%;
height: 100%;
p{
background: #dcddcc;
height: 30px;
font-size: 24px;
}
.editor{
width: 800px;
height: 300px;
margin: 50px auto;
text-align: left;
}
.editor-tool-bar{
width: 800px;
margin: 0 auto;
border: 1px solid #000;
background: #ccc;
}
.editor-content{
width: 800px;
height: 300px;
margin: 0 auto;
border: 1px solid #000;
text-align: left;
}
}
</style>
更多推荐
已为社区贡献32条内容
所有评论(0)