wangeditor富文本编辑器中,对应修改字体后源代码中添加的时候font标签,如何将font标签更改为div标签呢

wangeditor富文本编辑器中,对应修改字体后源代码中添加的时候font标签,如何将font标签更改为div标签呢,第1张

1)把当前的编辑器form表单提交修改为Javascript方式提交。

<form action="index.php" method="POST" name="myForm">

form表单加入name元素。

<button class="btn2">提交</button>

submit提交改为button方式。

<script type="text/javascript">

function submitForm(){

document.myForm.action = document.myForm.action

document.myForm.submit()

}

$(".btn2").click(function(){

submitForm()

})

</script>

2)通过UEditor API中的editor.execCommand( 'source')方法事件,在源代码状态提交时切换为编辑模式。

<script type="text/javascript">

var ue = UE.getEditor('editor',{

toolbars: [["undo","redo","|","bold","italic","underline","strikethrough","|","fontsize","forecolor","backcolor","|","removeformat","|","selectall","cleardoc","source","|","unlink","link","|","insertimage"]],wordCount:false

})

function submitForm(){

document.myForm.action = document.myForm.action

document.myForm.submit()

}

$(".btn2").click(function(){

ue.execCommand('source')

submitForm()

})

</script>

父组件中使用

大致配置就这么多,还有颜色,字体,表情什么的都可以配置,样式问题主要看项目需求,后来又加了模板的需求,所以又改了,wangeditor 中是没有模板这个概念的,那么我们怎么实现这个功能呢,听到这个需求的时候我都要考虑换富文本编辑器了,因为不知道换了其他的不知道有没有其他的问题,后来试了试,使用了solt 插槽,看到可以的那一刻,哇,真开心

这个改过之后的布局,具体样式的话,还需要自己调试,效果如下

大致能用了,虽然还有点奇怪,也没有去改,其他的问题就是上传的问题了,本例采用base64的方式上传图片,很多的就是渲染页面时的样式问题,如果出现渲染页面滚动条的问题,可以修改源码样式后在打包

总之大致就这么多


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11237488.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存