kindeditor富文本编辑器的过滤模式

最新推荐文章于 2024-10-31 15:27:01 发布

原创最新推荐文章于 2024-10-31 15:27:01 发布 · 419 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一种使用KindEditor实现的富文本编辑器配置方法，详细展示了可使用的HTML标签及其属性设置，适用于需要定制化编辑器功能的前端开发场景。

<textarea id="articleText" name="articleText"></textarea>
<script type="text/javascript">
    editor.html()
    $(function(){
        editor = KindEditor.create('#articleText', {
            filterMode: true,//是否开启过滤模式
            htmlTags : {
                font : ['id', 'class', 'color', 'size', 'face', '.background-color'],
                div : [
                    'id', 'class', 'align', '.border', '.margin', '.padding', '.text-align', '.color',
                    '.background-color', '.font-size',, '.font-weight', '.background',
                    '.font-style', '.text-decoration', '.vertical-align', '.margin-left'
                ],
                a : ['id', 'class', 'href', 'target', 'name'],
                embed : ['id', 'class', 'src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],
                img : ['id', 'class', 'src', 'width', 'height', 'border', 'alt', 'title', 'align', '.width', '.height', '.border'],
                'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6,span' : [
                    'id', 'class', 'align', '.text-align', '.color', '.background-color',  '.background',
                    '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.text-indent', '.margin-left'
                ],
                pre : ['id', 'class'],
                hr : ['id', 'class', '.page-break-after'],
                'br,tbody,tr,strong,b,sub,sup,em,i,u,strike,s,del' : ['id', 'class'],
                iframe : ['id', 'class', 'src', 'frameborder', 'width', 'height', '.width', '.height']
            }
        });

    })
</script>