富文本编辑器 vue-ueditor-wrap 的使用

vue-cli3 项目中使用 vue-ueditor-wrap

1、安装

npm i vue-ueditor-wrap
# 或者
yarn add vue-ueditor-wrap

2、使用

// 引入组件
import VueUeditorWrap from 'vue-ueditor-wrap';
// 注册组件
components: {
  VueUeditorWrap,
},
// 双向绑定
<vue-ueditor-wrap v-model="content"  @beforeInit="addCustomDialog"  :config="myConfig" ></vue-ueditor-wrap>
// 配置
myConfig: {
	autoHeightEnabled: false, // 编辑器不自动被内容撑高
	initialFrameHeight: 200, // 初始容器高度
	initialFrameWidth: '100%', // 初始容器宽度
	UEDITOR_HOME_URL: '/admin/UEditor/',
	serverUrl: '',
	toolbars: [
	    [
	        'undo', //撤销
	        'bold', //加粗
	        'indent', //首行缩进
	        'italic', //斜体
	        'underline', //下划线
	        'strikethrough', //删除线
	        'subscript', //下标
	        'fontborder', //字符边框
	        'superscript', //上标
	        'formatmatch', //格式刷
	        'fontfamily', //字体
	        'fontsize', //字号
	        'justifyleft', //居左对齐
	        'justifycenter', //居中对齐
	        'justifyright', //居右对齐
	        'justifyjustify', //两端对齐
	        'insertorderedlist', //有序列表
	        'insertunorderedlist', //无序列表
	        'lineheight',//行间距
	    ]
	],
	'fontfamily':[
	    { label:'',name:'songti',val:'宋体,SimSun'},
	    { label:'仿宋',name:'fangsong',val:'仿宋,FangSong'},
	    { label:'仿宋_GB2312',name:'fangsong',val:'仿宋_GB2312,FangSong'},
	    { label:'',name:'kaiti',val:'楷体,楷体_GB2312, SimKai'},
	    { label:'',name:'yahei',val:'微软雅黑,Microsoft YaHei'},
	    { label:'',name:'heiti',val:'黑体, SimHei'},
	    { label:'',name:'lishu',val:'隶书, SimLi'},
	    { label:'',name:'andaleMono',val:'andale mono'},
	    { label:'',name:'arial',val:'arial, helvetica,sans-serif'},
	    { label:'',name:'arialBlack',val:'arial black,avant garde'},
	    { label:'',name:'comicSansMs',val:'comic sans ms'},
	    { label:'',name:'impact',val:'impact,chicago'},
	    { label:'',name:'timesNewRoman',val:'times new roman'}
	],
},
// 添加自定义弹窗
addCustomDialog (editorId) {
    window.UE.registerUI('test-dialog', function (editor, uiName) {
        // 创建 dialog
        let dialog = new window.UE.ui.Dialog({
            // 指定弹出层中页面的路径，这里只能支持页面，路径参考常见问题 2
            iframeUrl: '/admin/widget.images/index.html?fodder=dialog',
            // 需要指定当前的编辑器实例
            editor: editor,
            // 指定 dialog 的名字
            name: uiName,
            // dialog 的标题
            title: '上传图片',
            // 指定 dialog 的外围样式
            cssRules: 'width:1200px;height:500px;padding:20px;'
        });
        this.dialog = dialog;
        var btn = new window.UE.ui.Button({
            name: 'dialog-button',
            title: '上传图片',
            cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
            onclick: function () {
                // 渲染dialog
                dialog.render();
                dialog.open();
            }
        });
        return btn;
    }, 37);
},

全局注册使用

// 在 main.js 中引入
import VueUeditorWrap from 'vue-ueditor-wrap'
// 全局注册组件
Vue.component('vue-ueditor-wrap', VueUeditorWrap)
// 在组建中直接使用
<vue-ueditor-wrap v-model="msg" :config="config"></vue-ueditor-wrap>

wangEditor 编辑器
TinyMCE 5

3、完整的按钮列表

toolbars: [
    [
        'anchor', //锚点
        'undo', //撤销
        'redo', //重做
        'bold', //加粗
        'indent', //首行缩进
        'snapscreen', //截图
        'italic', //斜体
        'underline', //下划线
        'strikethrough', //删除线
        'subscript', //下标
        'fontborder', //字符边框
        'superscript', //上标
        'formatmatch', //格式刷
        'source', //源代码
        'blockquote', //引用
        'pasteplain', //纯文本粘贴模式
        'selectall', //全选
        'print', //打印
        'preview', //预览
        'horizontal', //分隔线
        'removeformat', //清除格式
        'time', //时间
        'date', //日期
        'unlink', //取消链接
        'insertrow', //前插入行
        'insertcol', //前插入列
        'mergeright', //右合并单元格
        'mergedown', //下合并单元格
        'deleterow', //删除行
        'deletecol', //删除列
        'splittorows', //拆分成行
        'splittocols', //拆分成列
        'splittocells', //完全拆分单元格
        'deletecaption', //删除表格标题
        'inserttitle', //插入标题
        'mergecells', //合并多个单元格
        'deletetable', //删除表格
        'cleardoc', //清空文档
        'insertparagraphbeforetable', //"表格前插入行"
        'insertcode', //代码语言
        'fontfamily', //字体
        'fontsize', //字号
        'paragraph', //段落格式
        'simpleupload', //单图上传
        'insertimage', //多图上传
        'edittable', //表格属性
        'edittd', //单元格属性
        'link', //超链接
        'emotion', //表情
        'spechars', //特殊字符
        'searchreplace', //查询替换
        'map', //Baidu地图
        'gmap', //Google地图
        'insertvideo', //视频
        'help', //帮助
        'justifyleft', //居左对齐
        'justifyright', //居右对齐
        'justifycenter', //居中对齐
        'justifyjustify', //两端对齐
        'forecolor', //字体颜色
        'backcolor', //背景色
        'insertorderedlist', //有序列表
        'insertunorderedlist', //无序列表
        'fullscreen', //全屏
        'directionalityltr', //从左向右输入
        'directionalityrtl', //从右向左输入
        'rowspacingtop', //段前距
        'rowspacingbottom', //段后距
        'pagebreak', //分页
        'insertframe', //插入Iframe
        'imagenone', //默认
        'imageleft', //左浮动
        'imageright', //右浮动
        'attachment', //附件
        'imagecenter', //居中
        'wordimage', //图片转存
        'lineheight', //行间距
        'edittip ', //编辑提示
        'customstyle', //自定义标题
        'autotypeset', //自动排版
        'webapp', //百度应用
        'touppercase', //字母大写
        'tolowercase', //字母小写
        'background', //背景
        'template', //模板
        'scrawl', //涂鸦
        'music', //音乐
        'inserttable', //插入表格
        'drafts', // 从草稿箱加载
        'charts', // 图表
    ]
]

3、UEditor完整配置项