simditor官网：https://simditor.tower.im/

1、下载依赖文件并引入您的 Web 应用程序：

<link rel="stylesheet" type="text/css" href="/static/simditor/css/simditor.css" />
<script src="/static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="/static/simditor/js/module.js"></script>
<script type="text/javascript" src="/static/simditor/js/hotkeys.js"></script>
<script type="text/javascript" src="/static/simditor/js/uploader.js"></script>
<script type="text/javascript" src="/static/simditor/js/simditor.js"></script>

注意：

• Simditor 基于jQuery和module.js。
• hotkeys.js用于绑定热键。
• uploader.js与上传文件有关。如果您不想要上传功能，则无需导入此文件。

2、在网页中使用smiditor

要使用 Simditor，首先需要一个textarea这样的元素

<textarea id="editor" placeholder="Balabala" autofocus></textarea>

初始化 Simditor：

var editor = new Simditor({
  textarea: $('#editor')
  //optional options
});

到此：smiditor就已经能改在你网页中使用了，但是都是些基础的配置，满足不了我们的需求，还需要自己设置一些东西来满足自己的需求。

具体的设置参数可查看官方文档：https://simditor.tower.im/docs/doc-config.html

下面是我的设置分享给大家：

首先我定义了一个textarea元素

<textarea id="content" name="content" data-autosave="editor-content"></textarea>

接下来是我定义的js代码：

var editor = new Simditor({
    textarea: $('#content'),
    toolbar: [
        'title',
        'bold',
        'italic',
        'underline',
        'strikethrough',
        'fontScale',
        'color',
        'ol',
        'ul',
        'blockquote',
        'code',
        'table',
        'link',
        'image',
        'hr',
        'indent',
        'outdent',
        'alignment',
    ],
    defaultImage: '/static/simditor/images/image.png',
    imageButton: ['upload', 'external'],
    upload: {
        url: '{:url("upload/index/upload")}',
        params: null,
        fileKey: 'file',
        connectionCount: 3,
        leaveConfirm: 'Uploading is in progress, are you sure to leave this page?'
    }
});

此次代码中我主要设置了菜单和上传图片的方法，上传图片后端返回json格式代码：

return json(['success'=>true,'msg'=>'上传成功','file_path'=>$domain]);

$domain是图片的决定路径地址