RAILS 2 TINYMCE RICH TEXT

最新推荐文章于 2024-08-04 16:33:59 发布

bluelzx

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量537

点赞数

文章标签： tinymce rails javascript include plugins stylesheet

本文链接：https://blog.csdn.net/bluelzx/article/details/2196649

版权

TinyMCE

TinyMCE is a much more full featured rich text exitor. Check out the demo to see all the features that can be enabled for it. It is easy to incorporate TinyMCE into your rails application.

Download TinyMCE and place the tiny_mce directory in your applications public/javascripts directory.
Include tinymce/tinymce and
Call tinyMCE.init with the options that you want enabled. This call controls which of the available TinyMCE elements are enabled. See the TinyMCE documentation or look at the examples in the distribution for a list of all the options.

HERE IS MY VIEW PAGE CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<%= javascript_include_tag "prototype", "effects", "application" %>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>main: </title>
<%= stylesheet_link_tag 'scaffold' %>
<%= javascript_include_tag 'tiny_mce/tiny_mce' %>
<script type="text/javascript">
tinyMCE.init({
  // General options
  mode : "textareas",
  theme : "advanced",
  plugins : "safari,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",

  // 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,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
  theme_advanced_toolbar_location : "top",
  theme_advanced_toolbar_align : "left",
  theme_advanced_statusbar_location : "bottom",
  theme_advanced_resizing : true,

// Example content CSS (should be your site CSS)
//content_css : "css/content.css",

  // Drop lists for link/image/media/template dialogs
  //template_external_list_url : "lists/template_list.js",
  //external_link_list_url : "lists/link_list.js",
  //external_image_list_url : "lists/image_list.js",
  //media_external_list_url : "lists/media_list.js",

// Replace values for the template plugin
  template_replace_values : {
   username : "Some User",
   staffid : "991234"
  }
});
</script>

</head>
<body>

<form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">
<h3>Full featured example</h3>

<p>
This page shows all available buttons and plugins that are included in the TinyMCE core package.
There are more examples on how to use TinyMCE in the <a href="http://wiki.moxiecode.com/examples/tinymce/">Wiki</a>.
</p>

<p><label for="blog_content">Content</label><br/>
<%= text_area 'blog', 'content', :cols => "50" %></p>

<div>
  
  <a href="javascript:;" οnmοusedοwn="tinyMCE.get('elm1').show();">[Show]</a>
  <a href="javascript:;" οnmοusedοwn="tinyMCE.get('elm1').hide();">[Hide]</a>
  <a href="javascript:;" οnmοusedοwn="tinyMCE.get('elm1').execCommand('Bold');">[Bold]</a>
  <a href="javascript:;" οnmοusedοwn="alert(tinyMCE.get('elm1').getContent());">[Get contents]</a>
  <a href="javascript:;" οnmοusedοwn="alert(tinyMCE.get('elm1').selection.getContent());">[Get selected HTML]</a>
  <a href="javascript:;" οnmοusedοwn="alert(tinyMCE.get('elm1').selection.getContent({format : 'text'}));">[Get selected text]</a>
  <a href="javascript:;" οnmοusedοwn="alert(tinyMCE.get('elm1').selection.getNode().nodeName);">[Get selected element]</a>
  <a href="javascript:;" οnmοusedοwn="tinyMCE.execCommand('mceInsertContent',false,'<b>Hello world!!</b>');">[Insert HTML]</a>
  <a href="javascript:;" οnmοusedοwn="tinyMCE.execCommand('mceReplaceContent',false,'<b>{$selection}</b>');">[Replace selection]</a>
</div>

bluelzx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
RAILS 2 TINYMCE RICH TEXT

TinyMCETinyMCE is a much more full featured rich text exitor. Check out the demo to see all the features that can be enabled for it. It is easy to incorporate TinyMCE into your rails application.
复制链接

扫一扫