浅谈tinymac编辑器(适合新手入门)

由于公司项目要求,基于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代码如下:



    
    Demo
    
    
    
    
    
    
    
    



$(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: "***",//自定义请求接口路径 }); });

运行结果如下:

浅谈tinymac编辑器(适合新手入门)_第1张图片


你可能感兴趣的:(tinymac)