首页 > 编程语言 >在CakePHP中使用TinyMCE编辑器【转】

在CakePHP中使用TinyMCE编辑器【转】

时间:2022-11-11 20:01:52浏览次数:74  
标签:textarea tinyoptions TinyMCE 编辑器 fieldName array CakePHP options


​TinyMCE Editor​​​ 小巧实用,是网页文章编辑器之首先,最近在用CakePHP做一个小项目正好用到,记录一下。
首先下载​​​TinyMCE​​ ,并把压缩包内tinymce/jscripts/tiny_mce 目录整个拷贝到webroot/js 目录下,然后在需要用到TinyMCE的Controller里加入,代码如下:

var
$helpers
=
Array

(
'Form'
,
'Tinymce'
)
;



 



然后建立views/helpers/tinymce.php 文件,内容如下:

<
?php
class
TinyMceHelper extends
AppHelper {

// Take advantage of other helpers

var
$helpers
=
array

(
'Javascript'
,
'Form'
)
;

// Check if the tiny_mce.js file has been added or not

var
$_script
=
false
;


/**
* Adds the tiny_mce.js file and constructs the options
*
* @param string $fieldName Name of a field, like this "Modelname.fieldname", "Modelname/fieldname" is deprecated
* @param array $tinyoptions Array of TinyMCE attributes for this textarea
* @return string JavaScript code to initialise the TinyMCE area
*/

function
_build(
$fieldName
,
$tinyoptions
=
array

(
)
)
{

if
(
!
$this
->
_script)
{

// We don't want to add this every time, it's only needed once

$this
->
_script =
true
;

$this
->
Javascript
->
link
(
'/js/tiny_mce/tiny_mce.js'
,
false
)
;

}

// Ties the options to the field

$tinyoptions
[
'mode'
]
=
'exact'
;

$tinyoptions
[
'elements'
]
=
$this
->
__name(
$fieldName
)
;

return
$this
->
Javascript
->
codeBlock
(
'tinyMCE.init('
.
$this
->
Javascript
->
object
(
$tinyoptions
)
.
');'
)
;

}


/**
* Creates a TinyMCE textarea.
*
* @param string $fieldName Name of a field, like this "Modelname.fieldname", "Modelname/fieldname" is deprecated
* @param array $options Array of HTML attributes.
* @param array $tinyoptions Array of TinyMCE attributes for this textarea
* @return string An HTML textarea element with TinyMCE
*/

function
textarea(
$fieldName
,
$options
=
array

(
)
,
$tinyoptions
=
array

(
)
)
{

return
$this
->
Form
->
textarea
(
$fieldName
,
$options
)
.
$this
->
_build(
$fieldName
,
$tinyoptions
)
;

}

/**
* Creates a TinyMCE textarea.
*
* @param string $fieldName Name of a field, like this "Modelname.fieldname", "Modelname/fieldname" is deprecated
* @param array $options Array of HTML attributes.
* @param array $tinyoptions Array of TinyMCE attributes for this textarea
* @return string An HTML textarea element with TinyMCE
*/

function
input(
$fieldName
,
$options
=
array

(
)
,
$tinyoptions
=
array

(
)
)
{

$options
[
'type'
]
=
'textarea'
;

return
$this
->
Form
->
input
(
$fieldName
,
$options
)
.
$this
->
_build(
$fieldName
,
$tinyoptions
)
;

}

}

?>



 



然后在要使用TinyMCE的View页面直接用$tinymce->input(‘fieldname’);来调用就可以了。例如:

<
?php
// init TinyMCE Editor

echo
$tinymce
->
input
(

'content'
,

array

(

'label'
=>
false
,

'style'
=>
'height:350px; width:98%;'
,

'error'
=>
'请输入内容'

)
,

array

(

'mode'
=>
'textareas'
,

'theme'
=>
'advanced'
,

'theme_advanced_toolbar_location'
=>
'top'
,

'theme_advanced_toolbar_align'
=>
'left'
,

'theme_advanced_statusbar_location'
=>
'bottom'
,

//'theme_advanced_resizing' => true,

)

)
;

 



 



参考:http://bakery.cakephp.org/articles/view/tinymce-helper-1

 

标签:textarea,tinyoptions,TinyMCE,编辑器,fieldName,array,CakePHP,options
From: https://blog.51cto.com/u_15107509/5845298

相关文章

  • 在线echarts编辑器实现
    一、简介本文主要介绍如何开发一个同echarts官网里面在线echarts编辑工具,通过页面中的代码编辑器修改echarts的option属性来实时渲染echarts的展示效果。其中主要使用到了......
  • 如何实现导入Word文档到ueditor编辑器中
    ueditor粘贴不能粘贴word中的图片是一个很头疼的问题,在我们的业务场景中客户要求必须使用ueditor并且支持word的图片粘贴,因为这个需求头疼了半个月,因为前端方面因为安全的......
  • vue-codemirror 代码编辑器
    codemirror是一个非常强大的代码编辑器插件,但官方并没有提供vue的支持版本,不过跟vue集成的步骤并不复杂,以下是具体实现更多精彩更多技术博客,请移步IT人才终生实训......
  • Ueditor集成Word导入(富文本编辑器)
    ​ 当前功能基于PHP,其它语言流程大致相同 1.新增上传wordjson配置在ueditor\php\config.json中新增如下配置:     /* 上传word配置 */    "wordAction......
  • 百度富文本编辑器UEditor配置及功能实现详解
    ​ 当前功能基于PHP,其它语言流程大抵相同。大概流程:1.将docx文件上传到服务器中2.使用PHPoffice/PHPword实现将word转换为HTML3.将HTML代码返回并赋值到编辑器中......
  • VI文本编辑器
    ......
  • RCP添加一个多页编辑器
    其余代码参考RCP添加一个编辑器视图-信铁寒胜-博客园(cnblogs.com)1、在plugin中,添加一个新的编辑器 2、添加多页编辑器的类packagemyviewrcp2.editors;imp......
  • RCP添加一个编辑器视图
    RCP提供专门的编辑器视图,里面内置了很多编辑器的专用用户,如果修改后,视图中名称显示命名,提示已修改要进行保存。1、plugin.xml中添加视图view扩展点,和org.eclipse.ui.edito......
  • Vue3后台系统做一个富文本编辑器
    前言:富文本编辑器的插件网上有很多,有些需要二次开发,有些有框架的限制,也有些稳定性差。我这边开发中由于领导催的紧,所以为了提高一下自己的效率决定使用wangEditor,这个编辑......
  • 操作系统实验:Shell脚本编程与Vim编辑器
    SHANGHAIUNIVERSITY操作系统(一)实验报告组号第4组学号姓名20120889实验序号实验六日期2022年9月10日一、实验目的与要求实验目的:掌握v......