Vue + Element + vue-quill-editor 实现源码编辑、自定义图片上传和汉化

集百家之长，看了很多博客再结合自身情况，写了这个小组件功能，仅供参考。原博客地址： https://finget.github.io/2019...

实现源码编辑

vue-quill-editor的配置文件：

// toolbar工具栏的工具选项（默认展示全部）
const toolOptions = [
    // 加粗 斜体 下划线 删除线
    ['bold', 'italic', 'underline', 'strike'],
    // 加粗 斜体 下划线 删除线
    ['blockquote', 'code-block'],
    // 1、2 级标题
    [{header: 1}, {header: 2}],
    // 有序、无序列表
    [{list: 'ordered'}, {list: 'bullet'}],
    // 上标/下标
    [{script: 'sub'}, {script: 'super'}],
    // 缩进
    [{indent: '-1'}, {indent: '+1'}],
    // 文本方向
    [{direction: 'rtl'}],
    // 字体大小
    [{size: ['small', false, 'large', 'huge']}],
    // 标题
    [{header: [1, 2, 3, 4, 5, 6, false]}],
    // 字体颜色、字体背景颜色
    [{color: []}, {background: []}],
    // 字体种类
    [{font: []}],
    // 对齐方式
    [{align: []}],
    [{clean: '源码编辑'}], // 这是自己加的
    // 链接、图片、视频
    ['link', 'image'],
    // 新添加的工具
    ['sourceEditor']
];
const handlers = {
    shadeBox: null,
    // 添加工具方法
    sourceEditor: function () {
        // alert('我新添加的工具方法');
        const container = this.container;
        const firstChild = container.nextElementSibling.firstChild;

// 在第一次点击源码编辑的时候，会在整个工具条上加一个div，层级比工具条高，再次点击工具条任意位置，就会退出源码编辑。可以在下面cssText里面加个背景颜色看看效果。

        if (!this.shadeBox) {
            let shadeBox = this.shadeBox = document.createElement('div');
            
            shadeBox.style.cssText = 'position:absolute; top:0; left:0; width:100%; height:100%; cursor:pointer';
            container.style.position = 'relative';
            container.appendChild(shadeBox);
            firstChild.innerText = firstChild.innerHTML;

            shadeBox.addEventListener('click', function () {
                this.style.display = 'none';
                firstChild.innerHTML = firstChild.innerText.trim();
            }, false);
        } else {
            this.shadeBox.style.display = 'block';
            firstChild.innerText = firstChild.innerHTML;
        }
    }
};

export default {
    placeholder: '',
    // 主题
    theme: 'snow',
    modules: {
        toolbar: {
            // 工具栏选项
            container: toolOptions,
            // 事件重写
            handlers: handlers
        }
    },
    // 在使用的页面中初始化按钮样式
    initButton: function () {
        // 样式随便改
        const sourceEditorButton = document.querySelector('.ql-sourceEditor');
        sourceEditorButton.style.cssText = 'font-size:18px';
        
        // 加了elementui的icon
        sourceEditorButton.classList.add('el-icon-edit-outline');          
        // 鼠标放上去显示的提示文字
        sourceEditorButton.title = '源码编辑';
    }
};

工具名，工具方法名，类名:
这里要注意的是：工具名和工具方法名是一样的，并且生成的 button工具拥有 ql-工具名的类名。
例如上面代码中，我的工具名是 sourceEditor，我的方法名也是 sourceEditor，而生成的 button工具的类名就是 ql-sourceEditor了。

自定义上传图片

vue-quill-editor自带的上传，是把图片变成了base64的格式，不符合一般的项目需求。我猜它是用的FileReader的API。

有兴趣的可以试试这个，拖拽图片转base64预览：

// 自定义vue-quill-editor的主要文件

// 使用方式

// 做了双向绑定的，也可以自己监听change事件

⚠️注意点：

name不能一样
上传逻辑按自己的来，跟我应该不一样
其实最重要的是回显到富文本中的那段代码，无论你怎么上传，甚至可以不用elementui的上传组件，最后拿到上传成功的url，再放进去就搞定了。

汉化

把这段代码放到你的页面中就行了。

.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "请输入链接地址:" !important;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存' !important;
    padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode=video]::before {
    content: "请输入视频地址:" !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px' !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px' !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px' !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本' !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: '标题1' !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: '标题2' !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: '标题3' !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: '标题4' !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: '标题5' !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: '标题6' !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体' !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
    content: '衬线字体' !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
    content: '等宽字体' !important;
}

最后

创建了一个前端学习交流群，感兴趣的朋友，一起来嗨呀！

Vue + Element + vue-quill-editor 实现源码编辑、自定义图片上传和汉化

实现源码编辑

自定义上传图片

汉化

最后

你可能感兴趣的:(vue.js,element-ui,富文本编辑器)