wangEditor 5上传图片自定义 html 样式

这篇具有很好参考价值的文章主要介绍了wangEditor 5上传图片自定义 html 样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

由于官方文档是针对 TS 进行说明的,且并未详细提及到上传图片后对渲染的处理,这里仅针对 JS 的处理方法进行描述

原理

通过覆写该文件后进行注册即可:https://github.com/wangeditor-team/wangEditor/blob/master/packages/basic-modules/src/modules/image/elem-to-html.ts

创建部分

HTML 部分

<div id="wang-editor—wrapper">
    <div id="toolbar-container"></div>
    <div id="editor-container" style="height: 100%; min-height: 500px;"></div>
</div>

<!-- 注意此处我使用的是 textarea -->
<textarea class="hidden" id="content" name="content"></textarea>

JS 部分

const {createEditor, createToolbar} = window.wangEditor;

const editorConfig = {
    placeholder: '点击此处输入文字或通过工具栏插入相关内容...',
    MENU_CONF: {
        // 根据需要自行配置,或通过后端代码渲染、接口设置均可
    },
    onChange(editor) {
        // 同步到 textarea
        $this.parents('.form-field').find('#content').val(editor.getHtml());
    }
};

const editor = createEditor({
    selector: '#editor-container',
    config: editorConfig,
    mode: 'default',
    html: $('#content').val()
});

const toolbarConfig = {};

const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default',
});

以上是根据文档创建编辑器的过程,接下来是如何对上传后的图片添加自定义样式的说明

修改部分

将 JS 中第一行修改为 const {Boot, createEditor, createToolbar} = window.wangEditor;,多出一个 Boot

接着在该行下方定义对象 imageToHtmlConf,代码如下:

const imageToHtmlConf = {
    type: 'image',
    elemToHtml: function imageToHtml(elemNode) {
        const {src, alt = '', href = '', style = {}} = elemNode || {}
        const {width = '', height = ''} = style

        let styleStr = 'max-width: 100%;'; // 自定义样式设置到此处

        if (width) styleStr += `width: ${width};`;
        if (height) styleStr += `height: ${height};`;

        return `<img src="${src}" alt="${alt}" data-href="${href}" style="${styleStr}"/>`
    }
};

最后将该 config 进行注册:

Boot.registerElemToHtml(imageToHtmlConf);

此时上传图片后,直接提交到后端将会看到请求的参数类似下方:

content: <p><img src="https://res.example.com/202306/974a2c7993cc086bcc2d187ec0711e1764998411b4ab5.jpg" alt="" data-href="" style="max-width: 100%;"/></p>

特别说明

注意registerElemToHtml 方法必需在 createEditor 之前,且同一个注册方法 仅能 注册一次。

多说两句,这里还有个关于 textarea 的小坑。在你从数据库取 html 内容并渲染至编辑器时
必需先textarea 标签中渲染该标签的 value(或是通过接口返回的内容先给 textarea.value 设置上)
然后在 createEditor 阶段通过取 textareavalue 渲染到编辑器,否则可能出现一些神奇的问题。
意思是,不能 将接口返回的已保存至数据库的 html 值在 createEditor 方法中直接设置到 html 属性使用
(非前后端分离项目同理,不能将值直接渲染到 html 属性中)文章来源地址https://www.toymoban.com/news/detail-501789.html

到了这里,关于wangEditor 5上传图片自定义 html 样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • wangEditor富文本编辑器图片/视频上传

    wangEditor 有丰富的 API 和足够的扩展性,允许我们自定义开发菜单、模块、插件等。在 Vue、React 中运用也很方便。因此本文介绍下vue中富文本上传图片和视频。 安装引入后富文本有显示上传图片按钮,点击上传后会报 没有配置上传地址 的错误,如下图所示: 所以自定义上传

    2024年02月15日
    浏览(65)
  • vue2+wangEditor5富文本编辑器(图片视频上传)并加锚链接

    官网:https://www.wangeditor.com/v5/installation.html#npm 1、安装使用 安装 在main.js中引入样式 在使用编辑器的页面引入js 模板 js 到这一步编辑完就可以正常显示了 2、上传图片、视频 1)上传到后台接口的可直接按照文档这个配置就行接口返回格式也要可文档上一致 2)自定义上传(一

    2024年02月12日
    浏览(57)
  • vue3+wangEditor5/vue-quill自定义上传音频+视频

    这是另一个常用的富文本编辑器,它提供了许多可定制的功能和事件,并且也有一2个官方的 Vue 3 组件 wangEditor5用在Vue3中自定义扩展音频、视频、图片菜单;并扩展音频元素节点,保证音频节点的插入、读取、回写功能正常;支持动态修改尺寸 UEditor是由百度web前端研发部开

    2024年02月12日
    浏览(49)
  • wangEditor5在Vue3中的自定义图片+视频+音频菜单

    本文适用于wangEditor5用在Vue3中自定义扩展音频、视频、图片菜单;并扩展音频元素节点,保证音频节点的插入、读取、回写功能正常;支持动态修改尺寸。适用于初学者。 ButtonMenu:自定义扩展新功能 | wangEditor ModalMenu:自定义扩展新功能 | wangEditor 注册菜单到wangEditor:定义新

    2024年02月06日
    浏览(46)
  • [Vue3] Wangeditor富文本实现将粘贴中包含的图片自动上传后台,并替换src

    前言 吐槽: 还以为他们富文本把文字写好, 在一个个上传图片, 组成一片文章. 那就没有办法了, 只能修改下代码增加下自动上传图片功能. 后来写到一半才发现html 有个属性好像可以让跨域的图片 显示出来. meta name=\\\"referrer\\\" content=\\\"no-referrer\\\" / 以为这样就可以不用写了, 但是老大

    2024年02月04日
    浏览(49)
  • 百度富文本上传图片后样式崩塌

     🔥 博客主页 : 破浪前进 🔖 系列专栏 : Vue、React、PHP ❤️ 感谢大家点赞👍收藏⭐评论✍️ 问题描述:上传图片后,图片会变得很大,当点击的时候更是会顶开整个的容器的高跟宽 原因:百度富文本为了呈现给用户良好的使用导致没有写死宽高,本地多大上传后就是

    2024年02月06日
    浏览(58)
  • HTML--CSS--图片和背景样式

    最基本的应该就是对大小的管理 width:像素值; 宽度 height:像素值; 高度 一样使用 border 进行定义 效果: 图片对齐和文本的对齐是一样的,也是用 text-align 进行,但需要注意不能直接在 img 定义,需要在父元素处定义 属性依然是: left 左对齐 center 居中 right 右对齐 效果: 用法

    2024年01月18日
    浏览(61)
  • HTML--CSS--超链接样式以及鼠标样式自定义

    再复习一下,超链接的定义方式如下: 如果觉得下划线不好看,可以加上: a{text-decoration: none;} 这都是之前学到过的东西,另外 如果你有注意的话,应该能发现超链接未点击时,点击时和点击后的颜色都是不同的。 这个颜色我们也可以自定义,方法如下: a:link 定义超链接元

    2024年01月18日
    浏览(53)
  • uniApp 封装Upload组件实现图片和视频上传,解决官方api单一上传问题

     uniapp 官方api没有同时上传图片和视频的组件,所以就只能自己做了,在此记录下! 这里之所以循环一个一个上传是因为,我是用于小程序端的,目前uniapp不支持微信小程序以文件列表形式上传, filePath: item, //改为files可实现一次上传多个文件,仅App、H5( 2.6.15+)支持 具体

    2024年02月14日
    浏览(42)
  • elementUI 的上传组件<el-upload>,自定义上传按钮样式

    原理:调用el-upload组件的方法唤起选择文件事件 效果: 页面代码: js代码:(其他逻辑与element文档的上使用一致) css代码: 隐藏原来的选择图片按钮 原理:把图片显示分离出来,el-upload做选择图片使用,单独做一个显示图片的区域 效果:  页面代码: js 代码: css代码:

    2024年02月13日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包