第一次使用TinyMce的手记

1、首先将TinyMCE解压缩,会建立如下的目录结构:

  /tinymce/

  /tinymce/docs/

  /tinymce/docs/zh_cn/

  /tinymce/examples/

  /tinymce/examples/zh_cn/

  /tinymce/jscripts/

  /tinymce/jscripts/tiny_mce/

  /tinymce/jscripts/tiny_mce/langs/

  /tinymce/jscripts/tiny_mce/plugins/

  /tinymce/jscripts/tiny_mce/plugins/

  /tinymce/jscripts/tiny_mce/themes/

  /tinymce/jscripts/tiny_mce/themes/advanced/

  /tinymce/jscripts/tiny_mce/themes/default/

  /tinymce/jscripts/tiny_mce/themes/simple/

  其中docs/目录下是TinyMCE的说明文档,examples/目录下是4个实例页面,而jscripts/目录下则是真正的JS文件。实际使用时候只需要将jscripts/目录上传到服务器上即可。

  2、然后在需要使用TinyMCE的页面里加入如下的JS代码:

 

<!-- tinyMCE -->
<script language="javascript" type="text/javascript"
src="jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
    tinyMCE.init({
        mode : "textareas",
        theme : "advanced",
        language :"zh_cn"
    });
</script>
<!-- /tinyMCE -->

  这里假设页面与jscripts/处于同一目录下,否则请修改代码里的路径。

  现在页面里所有的textarea元素就会被渲染成TinyMCE实例。

  3、初始化配置介绍:

  tinyMCE.init({

  mode : "exact",

  elements : "example_textarea",

  theme : "advanced",

  language :"zh_cn",

  plugins : "flash,emotions,paste",

  theme_advanced_buttons1 : "bold,italic,underline,

  strikethrough, separator, forecolor,backcolor,

  fontselect,fontsizeselect",

  theme_advanced_buttons2_add_before: "cut,copy,

  pastetext,separator",

  theme_advanced_buttons2 : "undo,redo,separator,hr,

  link,unlink,image,flash,separator",

  theme_advanced_buttons2_add :"code,emotions,charmap",

  theme_advanced_buttons3 : "",

  theme_advanced_toolbar_location : "bottom",

  theme_advanced_toolbar_align : "center",

  relative_urls : false,

  remove_script_host : false

  });

  引用内容

  mode与elements是搭配使用的,用来指定渲染name在elements中的HTML元素为TinyMCE编辑器(可以是DIV或者Textarea),比如:

  mode : "exact",elements : "example_textarea"

  也可以单独用 mode : "textareas",这样页面中所有的Textarea元素都会被渲染。

  theme 可以是advanced或者simple(受功能限制),也可以自定义主题。

  language 常用选择可以是:en,zh_cn,zh_cn_utf8,zh_tw,zh_tw_utf8(和语言包名字对应)

  plugins 用来指定加载相应的插件,以提供特别功能

  theme_advanced_buttons 后面的数字用来指定工具栏的第几行,前3行可以不写,系统会自动用默认图标填在前3个工具栏,如果你不想显示前3行,可以像例子里面一样这样写:theme_advanced_buttons3 : "",_add_before后缀指在默认工具栏前面加图标,_add后缀指在默认工具栏后面加图标,具体每个按钮资料可以查看文档(/doc目录)。

  theme_advanced_toolbar_location和theme_advanced_toolbar_align很简单,一看就明白。


http://www.blogjava.net/jjshcc/archive/2010/05/15/321021.html


Tinymce是一个基于JavaScript的富文本编辑器,它可以嵌入到网页中,用于编辑和格式化文本内容。使用Tinymce可以方便地实现所见即所得的编辑效果,并提供了丰富的编辑功能和插件扩展。 要在HTML中使用Tinymce,首先需要引入Tinymce的JavaScript文件和样式表。可以通过CDN或者下载并引入本地文件的方式进行引入。然后,在需要使用Tinymce的文本区域中添加相应的HTML标签和属性。 以下是一个简单的示例,演示如何在HTML中使用Tinymce: 1. 引入Tinymce的JavaScript文件和样式表: ```html <script src="https://cdn.tiny.cloud/1/API_KEY/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script> ``` 2. 创建一个文本区域,并为其添加id和class属性: ```html <textarea id="myTextarea" class="tinymce"></textarea> ``` 3. 初始化Tinymce编辑器: ```html <script> tinymce.init({ selector: '#myTextarea', plugins: 'advlist autolink lists link image charmap print preview anchor', toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help' }); </script> ``` 在上述示例中,我们通过调用`tinymce.init()`方法来初始化Tinymce编辑器。其中,`selector`属性指定了要将Tinymce应用于哪个文本区域,`plugins`属性指定了要加载的插件,`toolbar`属性指定了要显示的工具栏按钮。 通过以上步骤,就可以在HTML中使用Tinymce来编辑和格式化文本内容了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值