浅谈tinymac编辑器（适合新手入门）

女爷i 2021-09-26 14:34 341阅读 0赞

由于公司项目要求，基于tinymac编辑器开发项目。由于第一次接触前端代码，所以走了许多弯路。下面是我的个人总结。

准备数据（以4dev版本为例）：

在tinymac官网下载tinymce4dev所对应的皮肤以及所需要的 plugins（百度tinymac第一条即可进入官网）

这里是tiny初始化函数

$(function () {
            tinymce.init({
                theme: 'modern',
                resize: false,
                selector: "textarea",
                menubar: false,
                branding: false,
                plugins: 'advlist autolink link image lists charmap print preview check clear contextmenu',
                toolbar1: 'undo redo   | bold italic fontsizeselect  removeformat newdocument | alignleft aligncenter alignright alignjustify | link image | check clear ',
                contextmenu: "br2p",//自定义右键菜单，若不需要注释掉即可（plugins） 
                spellchecker_rpc_url: "***",//自定义请求接口路径            12         });
        });

主要引用的scc和js文件如下：

完整的html代码如下：

<html>
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <link rel="stylesheet" href="css/index.css"/>
        <link rel="stylesheet" href="css/jquery.spellchecker.css"/>
        <link rel="stylesheet" href="css/bootstrap.min.css"/>
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/lib/tinymce4dev/jquery.tinymce.min.js"></script>
        <script src="js/lib/tinymce4dev/tinymce.js"></script>
        <script src="js/lib/tinymce4dev/plugins/spellchecker/plugin.min.js"></script>
    </head>
    <body background="images/body_bg.jpg">
    
    <div class="top_bg" id="top_bg">
        <img src="images/logo.png" width="135" height="50" style="margin-left: 10px">
    </div>
    <div class="area" id="demo">
        <textarea class="textarea" id="textarea"></textarea>
    </div>
    
    
    
        $(function () {
            tinymce.init({
                theme: 'modern',
                resize: false,
                selector: "textarea",
                menubar: false,
                branding: false,
                plugins: 'advlist autolink link image lists charmap print preview check clear contextmenu',
                toolbar1: 'undo redo   | bold italic fontsizeselect  removeformat newdocument | alignleft aligncenter alignright alignjustify | link image',
                contextmenu: "br2p",//自定义右键菜单，若不需要注释掉即可（plugins）
    
                spellchecker_rpc_url: "***",//自定义请求接口路径
               
            });
        });
       </script>
    
    </body>
    </html>

运行结果如下：

![1366960-20180402163407282-1499976603.png][]

[1366960-20180402163407282-1499976603.png]: /images/20210923/291607e4a36e4cfe81ad9b3c35f9e203.png