Simditor使用方法(快速入门教程)

Simditor是一个基于浏览器所见即所得的文本编辑器。Simditor的理念是保持简单,避免过度的功能,每一个特性都追求极致的用户体验。

 

今天在用原生PHP开发项目的时候,就选择了Simditor编辑器,非常的适合此项目。下面来给大家说说:如何快速入门使用Simditor?

 

Simditor快速入门使用方法

 

1、在你的前端,也就是html页面中引用如下相关的JS和CSS;

以下都是必须引入的文件。

index.php

  <link rel="stylesheet" type="text/css" href="/admin/simditor/simditor.css?x73259" />

  <script type="text/javascript" src="/admin/js/jquery.min.js?x73259"></script>

  <script type="text/javascript" src="/admin/simditor/module.js?x73259"></script>
  <script type="text/javascript" src="/admin/simditor/hotkeys.js?x73259"></script>
  <script type="text/javascript" src="/admin/simditor/uploader.js?x73259"></script>
  <script type="text/javascript" src="/admin/simditor/simditor.js?x73259"></script>

 

2、在使用Simditor的HTML页面里添加 textarea文本框 代码,例如:

index.php

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

 

3、在script中初始化编辑器:

<script>
        toolbar = [ 'title', 'bold', 'italic', 'underline', 'strikethrough',
            'color', 'fontScale', 'ol', 'ul', 'blockquote', 'code', 'table',
            'link', 'image', 'hr',  'indent', 'outdent','alignment' ,'html'];
        var editor = new Simditor({
            textarea : $('#editor'),
            placeholder : '这里输入内容...',
            pasteImage: true,
            toolbarFloat:true,
            toolbar : toolbar,  //工具栏
            defaultImage : 'simditor-1.0.5/images/image.png', //编辑器插入图片时使用的默认图片
            upload : {
                url : 'ImgUpload.action', //文件上传的接口地址
                params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
                fileKey: 'fileDataFileName', //服务器端获取文件数据的参数名
                connectionCount: 3,
                leaveConfirm: '正在上传文件'
            }
        });
    </script>

 

4、最后的效果如下:

Simditor使用效果

 

相关推荐:

Simditor实现查看“HTML源代码”扩展:simditor-html

    A+
发布日期:2020年07月08日 12:26:43  所属分类:Simditor
最后更新时间:2020-07-08 12:30:20
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
付杰
服务器管理面板/主机控制面板“安装”服务
服务器管理面板/主机控制面板“安装”服务
  • ¥ 9.9元
  • 市场价:49.9元
SEO顾问 中小型网站 单站最低99.9元 全方位优化
SEO顾问 中小型网站 单站最低99.9元 全方位优化
  • ¥ 99.9元
  • 市场价:5000元
PHP运行环境 wamp lamp lnmp 安装 配置 搭建
PHP运行环境 wamp lamp lnmp 安装 配置 搭建
  • ¥ 9.9元
  • 市场价:49.9元
刷流量 刷人气 刷点击 刷收藏 刷APP关键词
刷流量 刷人气 刷点击 刷收藏 刷APP关键词
  • ¥ 1.0元
  • 市场价:9.9元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: