如何在初始化时，设置一个默认的字体、字号？

wangfupeng1988 commented 2 years ago

JSON 格式

    const jsonContent = [
        {
          type: 'paragraph',
          lineHeight: '1.5',
          children: [
            { text: '', fontFamily: '黑体', fontSize: '32px' }
          ]
        },
    ]

    const editor = E.createEditor({
      selector: '#editor-text-area',
      content: jsonContent,
      config: editorConfig
    })

Vue React 组件有 defaultContent 属性，可传入上述 jsonContent

HTML 格式

    const htmlContent = '<p style="line-height: 1.5;"><span style="font-size: 16px; font-family: 微软雅黑;"></span></p>'

    const editor = E.createEditor({
      selector: '#editor-text-area',
      html: htmlContent,
      config: editorConfig
    })

Vue 组件可以使用 v-model 属性传入 HTML 内容，React 组件可以使用 value 属性传入 HTML 内容

cxylys commented 2 years ago

editor-for-vue里面没有createEditor方法只有editorConfig属性怎么设置content呢

wangfupeng1988 commented 2 years ago

Vue 组件可以传一个 defaultContent 属性进去，值就是上面的 content

Corgis commented 2 years ago

Vue 组件可以传一个 defaultContent 属性进去，值就是上面的 content

你好我这样写好像根本不生效，我是根据vue3demo写的代码

wangfupeng1988 commented 2 years ago

@Corgis 我重新编辑了 issue 内容，你再看看

Corgis commented 2 years ago

<p style="line-height: 1.5;"><span style="font-size: 16px; font-family: 微软雅黑;"></span></p>

嗯十分感谢这样子是可以设置默认的样式了。

aoyamaliu commented 2 years ago

  jsonContent: [
    {
      type: 'paragraph',
      children: [
        { text: '', fontFamily: '宋体', fontSize: '14px' },
      ],
      // lineHeight ,关于默认行高的设置，可查看源码或通过官方demo
      // https://www.wangeditor.com/demo/index.html
      // 输入文字，设置默认字体、行高之后 在控制台输入 ，this.editor.children 会显示如下内容：
      /*
      *[{"type": "paragraph", "children": [ {  "text": "faskdfjaslkdfj" } ], "lineHeight": "2.5" } ]
      * 按对应格式设置 jsonContent 即可
      * */
      lineHeight: 1
    }
  ],

Corgis commented 2 years ago

请问通过defaultContent 如何配置默认行高我设置lineHeight: '2' 无效， { type: 'paragraph', children: [{ text: '', fontFamily: '微软雅黑', fontSize: '12px', lineHeight: '2' }] } 是否只能通过 html的形式

aoyamaliu commented 2 years ago

请问通过defaultContent 如何配置默认行高我设置lineHeight: '2' 无效， { type: 'paragraph', children: [{ text: '', fontFamily: '微软雅黑', fontSize: '12px', lineHeight: '2' }] } 是否只能通过 html的形式

lineHeight 与 type同级

zouzixuan commented 2 years ago

defaultContent会覆盖塞进去的html怎么办

wangfupeng1988 commented 2 years ago

defaultContent会覆盖塞进去的html怎么办

那就在 html 中直接写上默认的字号、行高等信息。不用 defaultContent

kKevin0001 commented 2 years ago

Vue使用WangEditor5设置默认文本、字体大小、字体、行高的方法，点击查看

touyingzideren1 commented 2 years ago

他在插入图片之后字体会变成最初默认的,而非配置默认的,

lizhengpeng commented 2 years ago

设置完默认之后，数据回显不回来，怎么处理

wangfupeng1988 commented 2 years ago

@lizhengpeng 可从新提交一个 issue ，说明详细的复现步骤

zhangyueteng87 commented 2 years ago

如果按照作者上述做法： 1.会导致H1一直到H5标签的字体也是16。 2.如果用户填写了内容也确实是16px,但是如果我清除所有内容，提交后，再加载回来，字体又变成14大小了 1667097107947

wangfupeng1988 commented 2 years ago

@zhangyueteng87 怀疑是你自己的 css 污染了 H1 - H6 的默认字体

hhy1234567 commented 2 years ago

react添加这个内容区域的字号没有改变

wangfupeng1988 commented 2 years ago

@hhy1234567 你都用了 value={props.html} 了，那就用 HTML 格式吧，别用 JSON 格式了。

HTML 格式设置默认字体、字号，看 issue 最开始，我有写。

hhy1234567 commented 2 years ago

要实现的是用户默认输入的字号大小就给他一个18。

------------------ 原始邮件 ------------------ 发件人: "wangeditor-team/wangEditor" @.>; 发送时间: 2022年10月31日(星期一) 晚上9:34 @.>; @.**@.>; 主题: Re: [wangeditor-team/wangEditor] 如何在初始化时，设置一个默认的字体、字号？ (Issue #4042)

@hhy1234567 你都用了 value={props.html} 了，那就用 HTML 格式吧，别用 JSON 格式了。

HTML 格式设置默认字体、字号，看 issue 最开始，我有写。

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

Mowmowj commented 1 year ago

@wangfupeng1988 请问我在 vue2-wangeditor-demo 中 <Editor v-model="simpleTemp" /> data() { return { simpleTemp: '123', } } 写入带样式的 html 之后样式丢失了最后只有

123

是异常情况吗?

wangfupeng1988 commented 1 year ago

@Mowmowj 你在编辑器中设置一个字体颜色，然后获取 HTML 看看，参考输出的 HTML 格式来写 color 样式

Mowmowj commented 1 year ago

@wangfupeng1988 感谢回答另外还有个问题想请教下我之前的项目是基于 wangeditor4, editor.txt.html= ''读取含有复杂样式的html 如果升级到 wangEditor 5 无法直接像4代那样直接 editor.txt.html= '' 需要改写大量模版样式 , 现在新项目需要使用 vue 3 看了4代文档没有提到 vue3 目前我起了一个小demo 看上去没有问题请问下vue3的项目可以完美使用 wangeditor4嘛

meicy commented 1 year ago

JSON 格式

    const jsonContent = [
        {
          type: 'paragraph',
          lineHeight: '1.5',
          children: [
            { text: '', fontFamily: '黑体', fontSize: '32px' }
          ]
        },
    ]

    const editor = E.createEditor({
      selector: '#editor-text-area',
      content: jsonContent,
      config: editorConfig
    })

Vue React 组件有 defaultContent 属性，可传入上述 jsonContent

HTML 格式

    const htmlContent = '<p style="line-height: 1.5;"><span style="font-size: 16px; font-family: 微软雅黑;"></span></p>'

    const editor = E.createEditor({
      selector: '#editor-text-area',
      html: htmlContent,
      config: editorConfig
    })

Vue 组件可以使用 v-model 属性传入 HTML 内容，React 组件可以使用 value 属性传入 HTML 内容

"@wangeditor/editor": "^5.1.1", "@wangeditor/editor-for-react": "^1.0.4", const defaultContent = [ { type: 'paragraph', lineHeight: 2, children: [{ text: '', fontFamily: '黑体', fontSize: '32px' }], }, ] <Editor defaultConfig={editorConfig} value={html || value} defaultContent={defaultContent} onChange={handleChange} getSelectionText={getSelectionText} mode="default" /> 默认值设置无效

zwpforstudy commented 1 year ago

  const htmlContent = '<p style="margin: 0px"><span style="font-size: 16px; font-family: 微软雅黑; color: #222220"></span></p>' 
const [html, setHtml] = useState(htmlContent)

输入后html：

<p><span style="color: rgb(34, 34, 32); font-size: 16px; font-family: 微软雅黑;">lllldfdf</span></p><p><span style="color: rgb(34, 34, 32); font-size: 16px; font-family: 微软雅黑;">111</span></p>

请问下我设置P标签默认margin不生效，会代码会自动剔除吗？

328793966 commented 1 year ago

Vue3想初始化富文本内容时，通过v-model绑定html内容，例如 模拟 Ajax 异步设置内容 当font-size设置大于48px的时候，初始化的时候样式会被剔除

wangeditor-team / wangEditor