|
|
@@ -0,0 +1,78 @@
|
|
|
+<template>
|
|
|
+ <div ref="editor" style="text-align:left"></div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import E from 'wangeditor';
|
|
|
+
|
|
|
+const menus = [
|
|
|
+ 'head', // 标题
|
|
|
+ 'bold', // 粗体
|
|
|
+ 'fontSize', // 字号
|
|
|
+ 'fontName', // 字体
|
|
|
+ 'italic', // 斜体
|
|
|
+ 'underline', // 下划线
|
|
|
+ 'strikeThrough', // 删除线
|
|
|
+ 'foreColor', // 文字颜色
|
|
|
+ 'backColor', // 背景颜色
|
|
|
+ 'link', // 插入链接
|
|
|
+ 'list', // 列表
|
|
|
+ 'justify', // 对齐方式
|
|
|
+ 'quote', // 引用
|
|
|
+ // 'emoticon', // 表情
|
|
|
+ 'image', // 插入图片
|
|
|
+ 'table', // 表格
|
|
|
+ // 'video', // 插入视频
|
|
|
+ // 'code', // 插入代码
|
|
|
+ 'undo', // 撤销
|
|
|
+ 'redo', // 重复
|
|
|
+];
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'wang-editor',
|
|
|
+ model: {
|
|
|
+ prop: 'value',
|
|
|
+ event: 'change', // 默认为input时间，此处改为change
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ value: { type: String, required: false, default: '' },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ editorContent: this.value,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ var editor = new E(this.$refs.editor);
|
|
|
+ editor.customConfig.onchange = html => {
|
|
|
+ this.editorContent = html;
|
|
|
+ this.$emit('change', html);
|
|
|
+ };
|
|
|
+ // 自定义菜单配置
|
|
|
+ editor.customConfig.menus = menus;
|
|
|
+ editor.customConfig.zIndex = 0;
|
|
|
+ editor.customConfig.uploadImgServer = '/files/cms/images/upload';
|
|
|
+ editor.customConfig.uploadImgMaxLength = 1;
|
|
|
+ editor.customConfig.uploadImgHooks = {
|
|
|
+ // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
|
|
|
+ // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
|
|
|
+ customInsert: function(insertImg, result, editor) {
|
|
|
+ // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
|
|
|
+ // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
|
|
|
+
|
|
|
+ // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
|
|
|
+ var url = result.uri;
|
|
|
+ insertImg(url);
|
|
|
+
|
|
|
+ // result 必须是一个 JSON 格式字符串！！！否则报错
|
|
|
+ },
|
|
|
+ };
|
|
|
+ editor.create();
|
|
|
+ editor.txt.html(this.value);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getContent: function() {
|
|
|
+ return this.editorContent;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
