Simditor富文本编辑器的调用

时间:2022-06-02
本文章向大家介绍Simditor富文本编辑器的调用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

首先,官网下载包。http://simditor.tower.im/

然后载入脚本文件。(我用的是TP框架,所以我直接将它下载好以后,解压到后台模块,public目录下。)

将以下链接放到inc里面。方便多处调用!

<link rel="stylesheet" type="text/css" href="[style path]/styles/simditor.css" />
<script type="text/javascript" src="[script path]/scripts/jquery.min.js"></script>
<script type="text/javascript" src="[script path]/scripts/module.js"></script>
<script type="text/javascript" src="[script path]/scripts/hotkeys.js"></script>
<script type="text/javascript" src="[script path]/scripts/uploader.js"></script>
<script type="text/javascript" src="[script path]/scripts/simditor.js"></script>

前端调用

<textarea id="text" name="text"></textarea>

用js语言

<script>
    var editor = new Simditor({
    textarea: $('#text') //注意这里一定要和id对应一致!不然就会出错,或者不显示!
    placeholder:'请输入正文....',
    //增加其他扩展功能如下
    toolbar:[
     'title',
     'bold',
     'italic',
     'underline',
     'strikethrough',
     'fontScale',
     'color',
     'ol',      
     'ul',
     'blockquote',
     'code', 
     'table',
     'link',
     'image',
     'hr',    
     'indent',
     'outdent',
     'alignment'
    ]
    });
</script>

前端id,name要和script里面的textarea:$(对应)一致。

然后就可以使用啦!

Tags: None

Archives QR Code