由于官方文档是针对 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
之前,且同一个注册方法 仅能 注册一次。文章来源:https://www.toymoban.com/news/detail-501789.html
多说两句,这里还有个关于 textarea
的小坑。在你从数据库取 html
内容并渲染至编辑器时
你 必需先 在 textarea
标签中渲染该标签的 value
(或是通过接口返回的内容先给 textarea.value
设置上)
然后在 createEditor
阶段通过取 textarea
的 value
渲染到编辑器,否则可能出现一些神奇的问题。
意思是,不能 将接口返回的已保存至数据库的 html
值在 createEditor
方法中直接设置到 html
属性使用
(非前后端分离项目同理,不能将值直接渲染到 html
属性中)文章来源地址https://www.toymoban.com/news/detail-501789.html
到了这里,关于wangEditor 5上传图片自定义 html 样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!