首页 / 话题 / 前端 / 文章详情

如何在自己的网页使用simditor富文本编辑器

一直在的 2022-07-13 | 阅读(1362) | 评论(0


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>

注意:

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是图片的决定路径地址
评论(0)
请登录
请登录后发表评论