wangeditor(Vue 3 初始化配置文字的字体大小、样式、)

棒5

于 2024-05-13 16:37:35 发布

阅读量212

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_55896343/article/details/138808762

版权

这里是设置初始化的文字信息的配置 :defaultContent=“jsonContent”

<template>
    <div style="border: 1px solid #ccc">
      <Toolbar
       style="border-bottom: 1px solid #ccc"    
       :editor="editorRef" 
       :defaultConfig="toolbarConfig"
       :mode="mode" />
      <Editor 
      style="height: 500px; overflow-y: hidden;" 
      v-model="valueHtml" 
      :defaultConfig="editorConfig" 
      :defaultContent="jsonContent" 
      :mode="mode"
       @onCreated="handleCreated" />
    </div>
     </template>

    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

    // 内容 HTML
    const valueHtml = ref('')
    const toolbarConfig = reactive({
      toolbarKeys: [
        'bold', // 加粗
        'italic', // 斜体
        'through', // 删除线
        'underline', // 下划线
        'bulletedList', // 无序列表
        'numberedList', // 有序列表
        'color', // 文字颜色
        'fontSize', // 字体大小
        'lineHeight', // 行高
        'delIndent', // 缩进
        'indent', // 增进
        'divider', // 分割线
        'justifyCenter', // 居中对齐
        'justifyJustify', // 两端对齐
        'justifyLeft', // 左对齐
        'justifyRight', // 右对齐
        'undo', // 撤销
        'redo', // 重做
     
      ],
      excludeKeys: [
        'bgColor', // 背景色
        'blockquote', // 引用
        'codeBlock', // 代码段
        'emotion', // 表情
        'fontFamily', // 字体
        'headerSelect' ,// 标题
        'deleteImage',//删除图片
        'uploadImage', // 上传图片
        'fullScreen', // 全屏
        'insertLink', // 插入链接
        'clearStyle', // 清除格
        'insertImage', // 网络图片
        'insertTable', // 插入表格
      ]
    })
    const editorConfig = {  placeholder: '请输入内容...' ,}
    const jsonContent =ref([
        {
          type: "paragraph",
          children: [{ text: "黑体" }],
          fontSize: "38px",
          fontFamily: "黑体",
          lineHeight: 1.5,
        },
      ],)
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }