推荐最新

wangeditor中怎么配置编辑器内的默认字号？

wangeditor中怎么设置他的默认字号？ { field: 'text', component: 'Editor', componentProps: { editorConfig: { toolbarConfig: { toolbarKeys: ['fontFamily', 'fontSize', 'color', 'sup', 'sub', 'lineHeight'] } }, // @ts-ignore onChange: (edit: IDomEditor) => { console.log('edit===========') console.log(edit) setValues({ content: edit.getHtml() }) } },

浏览量205

生成头像

wangeditor中怎么setHtml时的问题？

"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240927/5fa942c3a1522da19fa68401f18f1cef.png) 用wangeditor时遇到一个问题。下面的功能我要的效果是点右边的会在左边的编辑器原来的基础上一直给下面添加，添加的东西现在是文本还是html不确定，但是我用的setHtml()好像只能添加html标签的，纯属文本添加不了，打印有值，但是在编辑器内不显示，有遇到过这问题的吗？怎么解决？ const handleNodeClick = async (data) => { console.log(data) if (!isEdit.value) { return } const editor = await unref(editorRef)?.getEditorRef() editor.setHtml(editor.getHtml() + data.TemplateContent) } editor.setHtml(editor.getHtml() + data.TemplateContent)就是在后面加。

浏览量185

momo

wangEditor富文本编辑器为什么使用document.querySelectorAll获取元素后修改内容不生效？

如题，第三方开发的系统，烂尾，然后前端显示富文本内容一直有个bug(不是第三方富文本编辑器的问题，是第三方开发后前台展示问题) 就是，后台显示正常的文章在前台显示不正常(例如，段落有缩进，到前端就不显示缩进，所以只能通过去除缩进，然后段落前手动敲空格进去)。目前曲折的办法就想着写个扩展，手动去掉缩进，在文字前加空格，但是试了半天发现用"document.querySelectorAll()[].innerText、innerHTML" 修改内容后保存后都不生效...... *** 2024.07.19新增 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240920/c67961bde0dd965b22863febc411c415.png)

浏览量192

云卿山手

怎么把一个由wangeditor编辑过的内容里面的所有标签都去掉？

如下面的是一个wangeditor里生成的文本，我想只要里面的文本内容，需要换行的用替换，这个怎么做到？病理诊断的内容333病理诊断理诊断的内容333病理诊断的内容333病理诊断的内容333 上面的去掉标签应该是： "病理诊断的内容333病理诊断理诊断的内容333病理诊断的内容333病理诊断的内容333 "

浏览量184

LightSea

如何在wangeditor中插入需要请求头的图片？

wangeditor插入图片时，拼接了下载接口。但是下载接口需要请求头，因此导致图片无法插入，请问有什么解决办法吗https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240921/956de519720717f168766a276d97d142.png customInsert: (insertImg, result, editor) => { insertImg(process.env.VUE_APP_BASE_API + '/file/dwn2?fileName=' + result[0])}) 尝试过用下载到本地获取blob地址，但是仍然无法展示 https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240921/92faa2145ae36b6b12bee642a8852810.png

浏览量163

我买了30万的鞋子

一般怎么处理wangEditor获取的html页面？

请问大家一般怎么处理wangEditor获取的html页面，因为生成的html页面样式默认是贴合白色背景的，所以我需要修改html样式。我本来是将html页面转为File文件，然后保存在minio中，然后在前端用iframe标签嵌入html代码，但这样会产生跨域问题，样式不是很好修改。另外一个办法就是不用iframe，从后端获取html字符串，直接用js设置html的字符串到template里，但对于内容很多的html页面总感觉不是很好。

浏览量132

古典研发君

wangEditor怎么可以做到文字超过编辑框高度后可以把字体缩小？

如下面的wangeditor编辑框，怎么可以文字超出框的最多文字时，文字字体自动变小，这个从哪几个点入手？ "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240918/1ff9b7261c061f0be677955d05305404.png)

浏览量130

Fronttend

vue-element-plus-admin框架用封装的form中的wangeditor设置readOnly不起作用的问题？

{ field: 'TemplateContent', component: 'Editor', componentProps: { mode: 'simple', height: '400px', editorConfig: { readOnly: true, toolbarConfig: { toolbarKeys: ['fontFamily', 'fontSize', 'color', 'sup', 'sub', 'lineHeight'] } }, // @ts-ignore onChange: (edit: IDomEditor) => { setValues({ TemplateContent: edit.getHtml() }) } }, colProps: { span: 24 } } 这是用的这个框架封装的form，在表单中添加一个wangeditor编辑器，我默认设置的 readOnly: true,也就是默认编辑器不能编辑，但我之后要设置成能编辑，代码是下面的，现在不起作用，我现在试的是editorConfig里到第二层还是起作用的，但是第三层的属性就不行了。 setSchema([ { field: 'TemplateContent', path: `componentProps.editorConfig.readOnly`, value: false } ]) 下面是editor源码： import { onBeforeUnmount, computed, PropType, unref, nextTick, ref, watch, shallowRef } from 'vue' import { Editor, Toolbar } from '@wangeditor/editor-for-vue' import { IDomEditor, IEditorConfig, i18nChangeLanguage, DomEditor } from '@wangeditor/editor' import { propTypes } from '@/utils/propTypes' import { isNumber } from '@/utils/is' import { ElMessage } from 'element-plus' import { useLocaleStore } from '@/store/modules/locale' const localeStore = useLocaleStore() const currentLocale = computed(() => localeStore.getCurrentLocale) i18nChangeLanguage(unref(currentLocale).lang) const props = defineProps({ editorId: propTypes.string.def('wangeEditor-1'), height: propTypes.oneOfType([Number, String]).def('500px'), editorConfig: { type: Object as PropType, default: () => undefined }, modelValue: propTypes.string.def('') }) const emit = defineEmits(['change', 'update:modelValue']) // 编辑器实例，必须用 shallowRef const editorRef = shallowRef() const valueHtml = ref('') watch( () => props.modelValue, (val: string) => { if (val === unref(valueHtml)) return valueHtml.value = val }, { immediate: true } ) // 监听 watch( () => valueHtml.value, (val: string) => { emit('update:modelValue', val) } ) const handleCreated = (editor: IDomEditor) => { editorRef.value = editor } // 编辑器配置 const editorConfig = computed((): IEditorConfig => { return Object.assign( { customAlert: (s: string, t: string) => { switch (t) { case 'success': ElMessage.success(s) break case 'info': ElMessage.info(s) break case 'warning': ElMessage.warning(s) break case 'error': ElMessage.error(s) break default: ElMessage.info(s) break } }, autoFocus: false, scroll: true, uploadImgShowBase64: true }, props.editorConfig || {} ) }) const editorStyle = computed(() => { return { height: isNumber(props.height) ? `${props.height}px` : props.height } }) // 回调函数 const handleChange = (editor: IDomEditor) => { emit('change', editor) } // 组件销毁时，及时销毁编辑器 onBeforeUnmount(() => { const editor = unref(editorRef.value) // 销毁，并移除 editor editor?.destroy() }) const getEditorRef = async (): Promise => { await nextTick() return unref(editorRef.value) as IDomEditor } defineExpose({ getEditorRef })

浏览量116

中年复健狗

wangeditor怎么设置不让文本有背景？

怎么可以让下面的wangeditor内的文本不带背景颜色？现在是白色，想默认不叫他有背景颜色。 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240914/6d42758658686ef291409bfa18c70f20.png)

浏览量113

刘一抗二二

wangeditor富文本回显后禁止编辑后，报错Cannot resolve a DOM node from Slate node: {"text":"模拟 Ajax 异步设置内容 HTML"}？

想要的效果就是富文本回显后，禁止修改效果实现了，但是报错了 "Cannot resolve a DOM node from Slate node: {"text":"模拟 Ajax 异步设置内容 HTML"}" "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241119/19c8a2d5a4bfaacb8c4b6f85f71b9abf.png) 实现方法：通过查文档 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241119/ea4f30d6a18a7506955a94c2f138e18d.png) 使用"editor.disable()"实现了，但是报错 "wangeditor文档地址" (https://link.segmentfault.com/?enc=g78Kd7vNGtFFDIhbdj23IA%3D%3D.8k%2Bj5ks6o%2FRw9lsYH9nGZWfwVRXFIv7awjNxeBOzaDQro03HU9dUEaZDxIA2Ba%2By) 代码 import { Editor, Toolbar } from "@wangeditor/editor-for-vue"; import "@wangeditor/editor/dist/css/style.css"; export default { name: "HelloWorld", components: { Editor, Toolbar }, data() { return { editor: null, html: "hello", toolbarConfig: {}, editorConfig: { placeholder: "请输入内容..." }, mode: "default", // or 'simple' }; }, methods: { onCreated(editor) { this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错 }, }, mounted() { // 模拟 ajax 请求，异步渲染编辑器 setTimeout(() => { this.html = "模拟 Ajax 异步设置内容 HTML"; this.editor.disable(); }, 1500); }, beforeDestroy() { const editor = this.editor; if (editor == null) return; editor.destroy(); // 组件销毁时，及时销毁编辑器 }, };

浏览量23