最新消息:文章中包含代码时,请遵守代码高亮规范!

UEditor的使用总结【原创】

杂项 Ellen 168浏览 0评论

最近做项目时用到了UEditor插件,在此总结一下Ueditor的用法以及在使用过程中遇到的问题。

UEditor的使用方法:

1、下载UEditor资源包。在下载的时候根据自身需要下载不同的版本。
这里是下载地址:http://ueditor.baidu.com/website/download.html

2、引入js。

<script type="text/javascript" src="js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="js/ueditor/ueditor.all.min.js"></script>
3、将编辑器放在合适的地方。
<div class="edit-block">
    <div class="pull-left">
        <script type="text/plain" id="editor"></script>
    </div>
</div>

4 、实例化编辑器。

<script>
    var ue = UE.getEditor('content');
</script>

具体的配置方法及说明见官方文档。
UEditor 文档:http://fex.baidu.com/ueditor

顺利添加完成。

在测试过程中,添加图片之后,展示页看到的图片宽度超出了容器的宽度,这种情况只要选中img元素设置width:100%就好了。

另外在测试过程中还发现一个问题:富文本编辑框内添加的表格有样式,而发布成功之后在展示内容页面的表格连边框都没有,于是搜了下解决办法,然而网上的办法并没有解决问题,于是决定靠自己。

最后找到了一个很简单的办法,就是在展示内容页面直接给table添加css样式,这种方法只适用于编辑框应用的比较少的情况,否则就要在所有用到的地方都添加样式了。

具体如下:

.detail_text table{
    width:100%;
    /*去掉单元格之间的空格*/
    border-collapse:collapse;
    border-spacing:0;
}
.detail_text td{
    text-align: center;
    border:1px solid #d2d2d2;
}

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/22543.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Elle的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!