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

最新推荐文章于 2024-06-10 17:22:00 发布

鼠年大吉

最新推荐文章于 2024-06-10 17:22:00 发布

阅读量2.3k

点赞数

分类专栏： tinymac 文章标签： tinymac

本文链接：https://blog.csdn.net/qq_35573326/article/details/79803615

版权

tinymac 专栏收录该内容

1 篇文章 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文件如下：

       <link rel="stylesheet" href="css/index.css"/>
       <script type="text/javascript" src="js/jquery-1.11.0.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>

完整的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>

<!-- Load TinyMCE -->

    $(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>

运行结果如下：

鼠年大吉

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
浅谈tinymac编辑器（适合新手入门）

由于公司项目要求，基于tinymac编辑器开发项目。由于第一次接触前端代码，所以走了许多弯路。下面是我的个人总结。准备数据（以4dev版本为例）：　　在tinymac官网下载tinymce4dev所对应的皮肤以及所需要的 plugins（百度tinymac第一条即可进入官网）这里是tiny初始化函数$(function () { tinymce.init({ ...
复制链接

扫一扫

专栏目录