• TinyMCE javascript 所见即所得可视化编辑器


    TinyMCE - javascript 所见即所得可视化编辑器。
    主页:http://tinymce.moxiecode.com/
    API文档:http://tinymce.moxiecode.com/js/tinymce/docs/api/index.html
    文档:http://wiki.moxiecode.com/index.php/TinyMCE:Index
    中文手册:http://www.inpeck.com/TinyMceManual/
    压缩版本(生产环境用):http://wiki.moxiecode.com/index.php/TinyMCE:Compressor
    1.特性:
    1).Easy to integrate
    2).Customizable
    3).Browserfriendly
    4).Lightweight
    5).AJAX Compatible
    6).International
    7).Open Source

    2.压缩版(GZip)安装(生产环境用):
    1).下载TinyMCE Compressor .NET
    http://nchc.dl.sourceforge.net/project/tinymce/TinyMCE%20Compressor%20.NET/2.0.2/tinymce_compressor_net_2_0_2.zip
    2).复制tiny_mce_gzip.js 和 tiny_mce_gzip.aspx 到tiny_mce(包含tiny_mce.js的)目录.
    3).复制ICSharpCode.SharpZipLib.dll 到web 应用程序的bin 目录。
    4).移除当前脚本标签<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
    5).添加新的 GZip 脚本标签 <script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce_gzip.js"></script>.
    6).添加新的GZip版初始化调用将会告诉压缩器在输出中包含哪些文件。

    初始化(initialization)例子:
    The example below will pack both themes and all plugins into one file/steam. Remove the things you don't need or add you custom plugins to the settings below. Remember that the tinyMCE_GZ.init call must be placed in it's own script tag.
    <script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce_gzip.js"></script>
    <script type="text/javascript">
    tinyMCE_GZ.init({
     plugins : 'style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras',
     themes : 'simple,advanced',
     languages : 'en',
     disk_cache : true,
     debug : false
    });
    </script>
    <script type="text/javascript">
    tinyMCE.init({
       .. your normal init ..
    });
    </script>
    注意:
    1).To remove a plugin, remember to remove it both from tinyMCE_GZ.init and TinyMCE.init.
    2).To add a plugin, remember to add it both to the tinyMCE_GZ.init and the tinyMCE.init calls.

    3.初始化配置参数说明:
    http://wiki.moxiecode.com/index.php/TinyMCE:Configuration
    所有的配置参数都放在tinyMCE.init() JavaScript 调用中。
    mode : "textareas"
      textareas : 当页面加载完后,将所有textareas元素转换成为编辑器。
      specific_textareas : 略
      exact : 将确定的元素转换成为编辑器。由elements 选项指定,可以为divs 或者 textareas 元素。
      none : 不转换任何元素。稍后,你的页面可以调用tinyMCE.execCommand("mceAddControl", true, "id"); 函数将元素转换为编辑器。
     例子:
    tinyMCE.init({
     ...
     mode : "exact",
     elements : "elm1,elm2"
    });
    <textarea id="elm1" ...

    参考:http://www.iwms.net/n2065c17.aspx
    关于编辑器中中文字体太小的问题:
    修改:jscripts\tiny_mce\themes\advanced\skins\default\content.css 文件第一行:
    body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; margin:8px;}
    font-size: 属性值即可,如果用的是另外一种主题,修改相应文件就可以了。

    4.中文语言包
    从 tinymce 官方网站下载的语言包
    安装后,却是繁体中文版本。

    实在看着不爽,又重新转化了一下。

    有需要的可以点击 tinymce Simplified Chinese pack 下载。

    如果tinymce的中文字体大小显示不正常,可以搜索tinymce目录下的所有css文件中的 font-size:10px; 和 font-size:11px; 替换为 font-size:12px; 这样中文字体 宋体就能显示正常。

     在这里可以下载到TinyMCE3的中文包 http://services.moxiecode.com/i18n 下载时注意,是先勾选前面的小方框,再按下方的Download按钮,而不是那个XML。
    可 惜是繁体的,我制作了一个简体中文包,因为TinyMCE要求语言代号必须遵守ISO 639-1的国际编码标准,中文的代号只能是zh,而且不分简体和 繁体。为了不覆盖原有的繁体包,我也耍了一下小滑头,将语言包代号写为ch,传了上去。嘿嘿,ch代表的语言是“Chamorro/夏莫洛语”,估计夏莫 洛人暂时还没有用TinyMCE吧,大家要简体中文包就下那个页面中的Chamorro语吧,哈哈。
    安装时,将下载的压缩包中的文件解压到javascript/tiny_mce目录中,提示有同名文件选覆盖即可。
    使用时,在页面的tinyMCE初始化语句 tinyMCE.init 中加上一行 language : ”ch”, 即可。

    完全按钮配置:

    tinyMCE.init({
        
    // 基本选项: 
        mode : "textareas",
        theme : 
    "advanced",
        language : 
    "zh",  //中文语言包
        plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager"

        
    // 主题选项 (Theme options)
       theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",   //工具栏第二行的按钮,| 为按钮分隔符
       theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor"//工具栏第三行的按钮
       theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",    //工具栏第三行的按钮
       theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",  //工具栏第四行的按钮
       theme_advanced_toolbar_location : "top",   //工具按钮栏的位置,
       theme_advanced_toolbar_align : "left",   //工具按钮栏水平对齐方式
       theme_advanced_statusbar_location : "bottom",   //编辑器状态栏位置
       theme_advanced_resizing : true,  //设置是否可以改变编辑器大小
       theme_advanced_fonts: "宋体=宋体;黑体=黑体;仿宋=仿宋;楷体=楷体;隶书=隶书;幼圆=幼圆;Arial=arial,helvetica,sans-serif;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Tahoma=tahoma,arial,helvetica,sans-serif;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats", //设置字体
      theme_advanced_resize_horizontal: false   //设置是否允许水平方向上改变大小
    });

  • 相关阅读:
    dategrid快速录入一行数据的一波操作
    shiro权限控制入门
    Activiti工作流小序曲
    在线HTML文档编辑器使用入门之图片上传与图片管理的实现
    ActiveMQ整合spring结合项目开发流程(生产者和消费者)总结
    缓存框架EhCache的简单使用
    关于特征工程入门中的一些基本知识
    SQL SERVER常用系统表和常用函数
    TestOne
    JS 代码调试经验总结
  • 原文地址:https://www.cnblogs.com/weekend001/p/1563137.html
Copyright © 2020-2023  润新知