Simditor 是Tower开源的一个基于浏览器所见即所得的文本编辑器

Simditor 是Tower开源的一个基于浏览器所见即所得的文本编辑器

Simditor 是Tower开源的一个基于浏览器所见即所得的文本编辑器。

相比传统的编辑器它的特点是:

功能精简,加载快速

输出格式化的标准 HTML

每一个功能都有非常优秀的使用体验

兼容的浏览器:IE10+、Chrome、Firefox、Safari。

使用方式:

第一步引入bfwone 加载依赖项jquery.js、module.js、hotkeys.js、uploader.js

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

第三步配置参数

 let toolbar = ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'];
                let _editor = new Simditor({
                    textarea: $('#simditor'),
                    toolbar: toolbar, //工具栏
                    height: 500,//高度
                    pasteImage: true,//是否可以粘贴图片
                    defaultImage: '', //编辑器插入图片时使用的默认图片
                    upload: {
                        url: '', //文件上传的接口地址
                        params: null, //键值对,指定文件上传接口的额外參数,上传的时候随文件一起提交
                        fileKey: 'filedata', //server端获取文件数据的參数名
                        connectionCount: 3,
                        leaveConfirm: '正在上传文件'
                    }
                });

完整代码示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery-3.2.1.min|simditor/module|simditor/hotkeys|simditor/uploader&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["simditor", "simditor"], function() {

                // let toolbar = ['title', 'bold', 'italic', 'underline', 'strikethrough', '|', 'ol', 'ul', 'blockquote', 'code', '|','link', 'image', 'hr'];
                let toolbar = ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'];
                let _editor = new Simditor({
                    textarea: $('#simditor'),
                    toolbar: toolbar, //工具栏
                    height: 500, //高度
                    pasteImage: true, //是否可以粘贴图片
                    defaultImage: '', //编辑器插入图片时使用的默认图片
                    upload: {
                        url: '', //文件上传的接口地址
                        params: null, //键值对,指定文件上传接口的额外參数,上传的时候随文件一起提交
                        fileKey: 'filedata', //server端获取文件数据的參数名
                        connectionCount: 3,
                        leaveConfirm: '正在上传文件'
                    }
                });

            });
        });
    </script>
    <style>
    </style>
</head>
<body>
    <textarea id="simditor"></textarea>
</body>
</html>

官网地址:https://simditor.tower.im/
立即下载simditor.js查看所有js插件

网友评论0

程序员在线工具箱