EasyEditor是一个轻量级且高度可配置的富文本html编辑器

EasyEditor是一个轻量级且高度可配置的富文本html编辑器

EasyEditor是一个轻量级且高度可配置的富文本html编辑器。你可以在按钮区使用fontawesome图标,也可以在编辑器上上传和插入图像。

使用方式:

第一步引入bfwone 加载依赖项jquery

第二步use插件及css和主题css

第三步配置参数

 new EasyEditor('#editor');

代码示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">

        bready(function() {
            use(["jquery.easyeditor", "easyeditor"], function() {
                EasyEditor.prototype.imageurl = function() {
                    var _this = this;
                    var settings = {
                        buttonIdentifier: 'insert-image-url',
                        buttonHtml: '插入图片',
                        clickHandler: function() {
                            var link = prompt('请输入图片路径', '');

                            if (link.length > 0) {
                                var figure = document.createElement('figure');
                                $(figure).html('<img src="'+ link +'" alt="">');
                                _this.insertAtCaret(figure);
                            } else {
                                alert('无效');
                            }

                        }
                    };

                    _this.injectButton(settings);
                };
                new EasyEditor('#editor', {
                    buttons: ['bold', 'italic', 'link', 'h2', 'h3', 'h4', 'imageurl']
                });
            });
        });
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        .container {
            width: 960px;
            margin: 0 auto;
        }

        .container-fluid {
            width: 100%;
            box-sizing: border-box;
            padding: 0 40px;
        }


    </style>
</head>
<body>
    <div id="editor" placeholder="请输入文字 "></div>
</body>
</html>

官网 https://github.com/im4aLL/easyeditor


立即下载jquery.easyeditor.js查看所有js插件

网友评论0

程序员在线工具箱