阿树框架-文本编辑器

文本编辑器,即wordpress文章编辑页面的编辑器

文章自定义字段

自定义面板的添加请参考配置文件。配置代码范例:

  1. //注意,本范例配置变量并非$seo_meta
  2. $ashu_meta[] = array(
  3.   'name'  => '产品参数',
  4.   'id'    => '_id_tinymce',
  5.   'desc'  => 'Pleas add some content',
  6.   'std'   => 'Hello, world.',
  7.   'media' => 1,
  8.   'type'  => 'tinymce'
  9. );

详解

name - 自定义字段标题

id - 自定义字段名称,获取数据时用。敬告:请确配置文件中所有id都不相同,同时避免post\page\title等词。

desc - 自定义字段描述信息

std - 数组,默认选中,由于复选框可以选择多个,所以该参数使用数组(数组中的值请设置为buttons中存在的)

media - 布尔值,设置为1时,可以文本编辑器将会出现添加媒体按钮,设置为0则无

type - 值为tinymce时,本条字段类型为文本编辑器

获取与输出范例:
注意,文本编辑器中的内容输出不能简单的输出,应该像文章内容一样,将里面加上段落标签等等。

  1. //获取文章自定义字段的值,请参考get_post_meta函数
  2. //获取
  3. $post_id = $post->ID; //首选需要获取文章id
  4. $product_desc = get_post_meta($post->ID,'_id_tinymce',true); //_id_tinymce即配置数据中的id值
  5. //输出
  6. $product_desc = apply_filters('the_content', $product_desc);
  7. $product_desc = str_replace(']]>', ']]>', $product_desc);
  8. echo $product_desc;

分类自定义字段

分类页面自定义字段的添加请参考配置文件。配置代码范例:

  1. $taxonomy_meta[] = array(
  2.   'name'  => '分类描述',
  3.   'id'    => '_id_tinymce',
  4.   'desc'  => 'Pleas add some content',
  5.   'std'   => 'Hello, world.',
  6.   'media' => 1,
  7.   'edit_only'   => true, //添加分类页面出现文本编辑器可能不合适,所以这里建议设置为true
  8.   'type'  => 'tinymce'
  9. );

详解:

name - 自定义字段标题

id - 自定义字段名称,获取数据时用。敬告:请确配置文件中所有id都不相同,同时避免post\page\title等词。

desc - 自定义字段描述信息

std - 数组,默认选中,由于复选框可以选择多个,所以该参数使用数组(数组中的值请设置为buttons中存在的)

media - 布尔值,设置为1时,可以文本编辑器将会出现添加媒体按钮,设置为0则无

edit_only - 布尔值,添加分类页面出现文本编辑器可能不合适,所以这里建议设置为true

type - 值为tinymce时,本条字段类型为文本编辑器

获取与输出范例:

  1. //获取分类自定义字段,使用get_term_meta函数,函数第一个参数为分类id,int型
  2. //获取数据
  3. $currentterm = get_queried_object(); //获取当前分类
  4. $cat_desc = get_term_meta($currentterm->term_id , '_id_tinymce',true); //_seo_keywords即配置数据中的id值
  5. //输出
  6. $cat_desc = apply_filters('the_content', $cat_desc);
  7. $cat_desc = str_replace(']]>', ']]>', $cat_desc);
  8. echo $cat_desc;

设置页面

设置页面的添加请参考配置文件。配置代码范例:

  1. $general_pageinfo = array(
  2.   'full_name' => '基本设置',
  3.   'optionname'=>'general', //设置名称,获取设置选项用
  4.   'child'=>false,
  5.   'filename' => 'generalpage'
  6. );
  7. $general_option = array();
  8. $general_option[] = array('desc' => '', 'type' => 'open');
  9. //编辑器范例
  10. $general_option[] = array(
  11.   'name'=>'版权说明',
  12.   'id'=>'tinymce_copyright',
  13.   'desc'=>'',
  14.   'std'=>'',
  15.   'type'=>'tinymce'
  16. );
  17. $general_option[] = array('desc' => '', 'type' => 'close');
  18. $general_page = new ashu_option_class($general_option$general_pageinfo);

$general_option详解:

name - 设置选项标题

id - 设置选项名称

std - 默认数据

desc - 设置选项描述信息

type - 值为tinymce时,本条字段类型为编辑器

设置数据的获取与输出范例:

  1. //方法一
  2. global $ashu_option//直接使用全局变量,一个文件中使用一次即可
  3. if( isset($ashu_option['general']['tinymce_copyright']) ){
  4.   $copyright_content = apply_filters('the_content', $ashu_option['general']['tinymce_copyright']);
  5.   $copyright_content = str_replace(']]>', ']]>', $copyright_content);
  6.   echo $copyright_content;
  7. }
  8. //方法二
  9. $general_option = get_option('ashu_general'); //获取设置选项组,为了使选项名称不冲突,在general前面加上前缀ashu_
  10. //获取
  11. if( isset($general_option['tinymce_copyright']) ){
  12.   $copyright_content = apply_filters('the_content', $general_option['tinymce_copyright']);
  13.   $copyright_content = str_replace(']]>', ']]>', $copyright_content);
  14.   echo $copyright_content;
  15. }

所见即所得

引入css
wordpress默认的文章编辑器我们可以通过add_editor_style函数来为编辑器添加一个css样式,以便在编辑过程中也能显示样式。

在三个类文件中,添加编辑器我定义了编辑器所需的css:

  1. $tinymce_args = array(
  2.   'content_css' => get_stylesheet_directory_uri() . '/css/editor-'.$values['id'].'.css'
  3. );

所以只需要在css文件夹中加入一个文件名为 editor-id.css的css文件即可。

举例:上面文章自定义字段id值为“_id_tinymce”,则在css文件夹中添加一个editor-_it_tinymce.css的文件即可。

举例:上面设置页面范例中id值为“tinymce_copyright”,则在css文件夹中添加一个editor-tinymce_copyright.css的文件即可。

预见

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen: