Tinymce、smarty 、jquery的融合及首行缩进功能的插件实现

原创 2009年01月15日 18:32:00

引入方式

   在系统中引入的方式为js引入方式。

 

//jquery基类引入

<script language="javascript" src="http://{$smarty.server.SERVER_NAME}/webroot/js/jquery.js"></script>

//jquery日历插件引入

<script language="javascript" src="http://{$smarty.server.SERVER_NAME}/webroot/js/cal/ui.datepicker.js"></script>

//jquery文件上传插件引入

<script language="javascript" src="http://{$smarty.server.SERVER_NAME}/webroot/js/ajaxfileupload.js"></script>

//tinymce引入

<script language="javascript" src="http://{$smarty.server.SERVER_NAME}/webroot/js/tiny_mce/tiny_mce.js"></script>

 

和其他js控件一样引入方式一样,都是用js引入方式实现的。

tinymce的初始化

1. js初始化

 

  <!--smarty的不执行标记//->
 {literal}
 <script language="javascript">
  tinyMCE.init({
   // General options
   debug : false,//错误报告开关
   mode : "exact",//用特定的模式
   elements : "webeditor_demo1",//容器的id值,将来要在页面中替换的
   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,stageindent,example",
      
      //Language package
   language : "zh",//语言设定
   
   // 操作框上的功能显示
   theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,stageindent,|,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,example",
   //样式设定
   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",
   
   
   //config the link to blank
     //valid_elements :"a[href|target=_blank]",
          
   // 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"
  });
 </script>
 {/literal}

tinymce的初始化要和jquery的引入的位置一致,而不是写在jquery的$(document).ready(..)里写的。 一定要用exact模式,默认模式下,是将tinymce显示在每个textarea中,定义了id之后就不管是什么标签了,如div,span 都可以。

 

2. 页面内的初始化

html代码

<form action="./interface/responsetinymce" method="post">

<div id="webeditor_demo1"></div>

</form>

除了要定义一个id和elements 想对应的容器之外,就是必须要定义一个form 。它的action定义要发送的服务器端地址,他的method定义数据的发送方式。

插件开发

   在3.x的tinymce中在tiny_mce/plugins/example有一个插件开发的例子,只要修改程序框架中的代码为要完成的功能即可。现在主要讲一下“首行缩进”功能的实现。

 

1.文件

         在自己的插件目录下有俩个文件:

a. editor_plugin.js 

b. editor_plugin_src.js

 

第一个文件是压缩后的js文件,第二个是自己开发的文件。tinymce推荐的压缩工具是 jstrim 。Url是http://javascriptcompressor.com/

 

2.基本原理   

 

<p style="text-indent:24px;"> 

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>

     实现方法是通过给段落标签加入style属性来实现的。

3.tinymce的实现

 

ed.addCommand('mceStageindent', function() {

            //基本变量设置

var ed = tinyMCE.activeEditor, d = ed.dom, s = ed.selection, e, iv, iu , st;

 st= s.getNode().style;

var allinline=d.select('p');

    var bfontSize=document.body.currentStyle?document.body.currentStyle['fontSize']:

         document.defaultView.getComputedStyle(document.body,false)['fontSize'];

 iu=/[a-z%]+$/i.exec(bfontSize);//获得文字的大小

     iv=parseInt(bfontSize)*2;//俩个文字的宽度

  

            //实现在选取段落时候缩进段落,不选取则缩进所有段落。

if (s.getContent() != "") {

if (st.textIndent == "" || st.textIndent == "undefined") {

st.textIndent = iv+iu;

}

else {

st.textIndent = '';

}

}else{

if (st.textIndent == "" || st.textIndent == "undefined") {

d.setStyle(allinline, 'text-indent', iv+iu);

}else{

d.setStyle(allinline, 'text-indent', '');

}

}

}

);    

        

版权声明:本文为博主原创文章,未经博主允许不得转载。

TinyMCE段落缩进功能修改

最近开始使用TinyMCE作为手头一个小项目的在线编辑器,在测试过程中,遇到一个小问题:TinyMCE默认的段落缩进功能采用的方法是在标签中插入padding-left:30px样式。而通常我们需要的...
  • T5500
  • T5500
  • 2008年09月27日 15:52
  • 1421

Onenote如何快速实现首行缩进的功能。

因为Onenote定位的是笔记本,所以本身并不带有首行缩进功能。下面来介绍如何用其它辅助手段来实现这个功能。楼主现在用的是onenote2016,其它版本未测试过这个方法,不过应该是可行的。 首先下载...

LaTeX技巧013:quotation,quote环境实现首行缩进2em

前言quotation和quote都是LaTeX中的引用环境,当文章是引用其他文献的内容可以使用该环境,主要表现为引用内容的左右边距比正文要大,quote是没有缩进的,quotation是在quote...

CSDN-markdown 首行缩进的快捷实现: 全角空格配合&emsp;

在排版时,汉语经常需要首行空两格,但是Markdown 语言本身并不提供实现段首缩进功能,而手动输入空格很难掌握宽度,很不推荐。这里介绍我认为最简单快捷的实现方法:全角空格+&emsp配合互补....

uilabel 的相关处理 类富文本(自动换行,设置行高,同一个label多种颜色,给文字加下划线 首行缩进 等 等)

1.自动换行 UIFont *font=[UIFont systemFontOfSize:lableFont]; self.numberOfLines=0; self.lineBreakMode=NS...

CSS 首行缩进两个文字

总是在前面加上8个“ ”,因为过去大家对CSS的概念也不太熟悉,也不太重视,这种方法实现虽然比较直接,但是文字多的时候会有很多“ ”充斥在代码中,如果再有些换行,那代码显着比较乱,现在大家开始主动了解...

CSS实现首行缩进和悬挂缩进

首行缩进text-indent控制首行缩进,后加缩进长度,数值可正可负,单位可以是em,百分比,或者绝对单位。...

Markdown使用技巧总结——字体,颜色,字号,背景,首行缩进等

转载自:http://blog.csdn.net/u010177286/article/details/50358720Markdown 常用技巧: 换行: 方法1: 连续两个以上空格+回车 ...

CSS代码(五):一种段落首行缩进字符的解决办法

在HTML电子邮件的群发中,需要按照中文排版风格自动缩进两字符,很自然就想到了利用空格与CSS伪类的content属性,如下:p:before { content : "\20\20"; } ...
  • yiifaa
  • yiifaa
  • 2017年10月31日 16:48
  • 198

Word 2010 自定义首行缩进的快捷键

经常处理Word文档的朋友们都知道,首行缩进是比较常用的一个功能,通常有以下几种方法可以实现:   1、使用N个空格。(此种做法很受鄙视、很不专业,看起来敲两下长条键挺方便,但是对于长篇文档来说,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Tinymce、smarty 、jquery的融合及首行缩进功能的插件实现
举报原因:
原因补充:

(最多只允许输入30个字)