@wangeditor/editor-for-vue ^5.1.12 富文本使用记录

暗色主题配色

/* textarea - css vars */
--w-e-textarea-bg-color: #1d1e1f;
--w-e-textarea-color: #E5EAF3;
--w-e-textarea-border-color: transparent;
--w-e-textarea-slight-border-color: #e8e8e8;
--w-e-textarea-slight-color: #d4d4d4;
--w-e-textarea-slight-bg-color: #18222c;
/* 选中的元素，如选中了分割线 */
--w-e-textarea-selected-border-color: #141414;
/* 工具，如图片拖拽按钮 */
--w-e-textarea-handler-bg-color: #4290f7;

/* toolbar - css vars */
--w-e-toolbar-color: #E5EAF3;
--w-e-toolbar-bg-color: #1d1e1f;
--w-e-toolbar-active-color: #fff;
--w-e-toolbar-active-bg-color: #999;
--w-e-toolbar-disabled-color: #999;
--w-e-toolbar-border-color: #E5EAF3;

/* modal - css vars */
--w-e-modal-button-bg-color: #1d1e1f;
--w-e-modal-button-border-color: #d9d9d9;

工具栏配置

const toolbarConfig: Partial<IToolbarConfig> = {
  toolbarKeys: [
    "bold", // 粗体
    "underline", // 下划线
    "italic", // 斜体
    "through", // 删除线
    "code", // 内行代码
    "sub", // 下标
    "sup", // 上标
    "clearStyle", // 清除格式
    "color", // 文字颜色
    "bgColor", // 背景色
    "fontSize", // 字号
    "fontFamily", // 字体
    "indent", // 增加缩进
    "delIndent", // 减少缩进
    "justifyLeft", // 左对齐
    "justifyRight", // 右对齐
    "justifyCenter", // 居中对齐
    "justifyJustify", // 两端对齐
    "lineHeight",  // 行高
    "insertImage", // 网络图片
    "deleteImage", // 删除图片
    "editImage", // 编辑图片
    "viewImageLink", // 查看链接
    "imageWidth30", // 图片30%大小
    "imageWidth50", // 图片50%大小
    "imageWidth100", // 图片100%大小
    "divider", // 分割线
    "emotion", // 表情
    "insertLink", // 插入链接
    "editLink", // 修改链接
    "unLink", // 取消链接
    "viewLink", // 查看链接
    "codeBlock", // 代码块
    "blockquote", // 引用
    "headerSelect", // 标题
    "header1", // h1
    "header2", // h2
    "header3", // h3
    "header4", // h4
    "header5", // h5
    "todo", // 待办
    "redo", // 重做
    "undo", // 撤销
    "fullScreen", // 全屏
    "enter", // 回车
    "bulletedList", // 无序列表
    "numberedList", // 有序列表
    "insertTable", // 插入表格
    "deleteTable",  // 删除表格
    "insertTableRow", // 插入行
    "deleteTableRow", // 删除行
    "insertTableCol", // 插入列
    "deleteTableCol", // 删除列
    "tableHeader", // 表头
    "tableFullWidth", // 宽度自适应
    "insertVideo", // 插入视频
    "uploadVideo", // 上传视频
    "editVideoSize", // 修改视频尺寸
    "uploadImage", // 上传图片
    "codeSelectLang" // 选择代码块语言
  ]
}

最后

以上就是不安胡萝卜为你收集整理的@wangeditor/editor-for-vue ^5.1.12 富文本使用记录的全部内容，希望文章能够帮你解决@wangeditor/editor-for-vue ^5.1.12 富文本使用记录所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。