如何在不同页面中为织梦dedecms的百度ueditor编辑器设置不同的宽度？

在织梦dedecms中，为不同的页面设置百度ueditor编辑器的不同宽度是一个常见需求，通过一些简单的配置和代码修改，可以实现这一目标，下面将详细介绍如何为不同页面中的百度ueditor编辑器设置不同的宽度：

步骤一：创建新的ueditor配置文件

1、复制并重命名配置文件：

找到并复制/include/ueditor/editor_config.js文件。

将复制的文件粘贴并重命名为/include/ueditor/editor_config1.js。

步骤二：修改util.helper.php文件

2、添加新函数：

打开/include/helpers/util.helper.php文件。

在该文件中增加以下代码：

“`php

if ( ! function_exists(‘GetEditorD’)) {

function GetEditorD($fname, $fvalue, $nheight="350", $etype="Basic", $gtype="print", $isfullpage="FALSE",$bbcode=false) {

if(!function_exists(‘SpGetEditorD’)) {

require_once(DEDEINC."/inc/inc_fun_funAdmin.php");

}

return SpGetEditorD($fname, $fvalue, $nheight, $etype, $gtype, $isfullpage, $bbcode);

}

}

“`

步骤三：修改inc_fun_funAdmin.php文件

3、添加新函数：

打开/include/inc/inc_fun_funAdmin.php文件。

在该文件中增加以下代码：

“`php

function SpGetEditorD($fname, $fvalue, $nheight="350", $etype="Basic", $gtype="print", $isfullpage="false", $bbcode=false) {

global $cfg_ckeditor_initialized;

if(!isset($GLOBALS[‘cfg_html_editor’])) {

$GLOBALS[‘cfg_html_editor’] = ‘fck’;

}

if($gtype == "") {

$gtype = "print";

}

if($GLOBALS[‘cfg_html_editor’] == ‘fck’) {

require_once(DEDEINC.’/FCKeditor/fckeditor.php’);

$fck = new FCKeditor($fname);

$fck>BasePath = $GLOBALS[‘cfg_cmspath’].’/include/FCKeditor/’;

$fck>Width = ‘100%’;

$fck>Height = $nheight;

$fck>ToolbarSet = $etype;

$fck>Config[‘FullPage’] = $isfullpage;

if($GLOBALS[‘cfg_fck_xhtml’] == ‘Y’) {

$fck>Config[‘EnableXHTML’] = ‘true’;

$fck>Config[‘EnableSourceXHTML’] = ‘true’;

}

$fck>Value = $fvalue;

if($gtype == "print") {

$fck>Create();

} else {

return $fck>CreateHtml();

}

} elseif($GLOBALS[‘cfg_html_editor’] == ‘ckeditor’) {

require_once(DEDEINC.’/ckeditor/ckeditor.php’);

$CKEditor = new CKEditor();

$CKEditor>basePath = $GLOBALS[‘cfg_cmspath’].’/include/ckeditor/’;

$config = $events = array();

$config[‘extraPlugins’] = ‘dedepage,multipic,addon’;

if($bbcode) {

$CKEditor>initialized = true;

$config[‘extraPlugins’] .= ‘,bbcode’;

$config[‘fontSize_sizes’] = ’30/30%;50/50%;100/100%;120/120%;150/150%;200/200%;300/300%’;

$config[‘disableObjectResizing’] = ‘true’;

$config[‘smiley_path’] = $GLOBALS[‘cfg_cmspath’].’/images/smiley/’;

// 获取表情信息

require_once(DEDEDATA.’/smiley.data.php’);

$jsｓｃｒｉｐｔ = array();

foreach($GLOBALS[‘cfg_smileys’] as $key=>$val) {

$config[‘smiley_images’][] = $val[0];

$config[‘smiley_deｓｃｒｉｐｔions’][] = $val[3];

jsｓｃｒｉｐt[] = ""$val[3]":"$key"";

}

echo jsｓｃｒｉｐt(‘CKEDITOR.config.ubb_smiley = {‘.implode(‘,’, $jsｓｃｒｉｐt).’}’);

}

$GLOBALS[‘tools’] = empty($toolbar[$etype]) ? $GLOBALS[‘tools’] : $toolbar[$etype];

$config[‘toolbar’] = $GLOBALS[‘tools’];

$config[‘height’] = $nheight;

$config[‘skin’] = ‘kama’;

$CKEditor>returnOutput = TRUE;

$code = $CKEditor>editor($fname, $fvalue, $config, $events);

if($gtype == "print") {

echo $code;

} else {

return $code;

}

}

}

“`

步骤四：调用不同宽度的编辑器

4、在需要的地方调用：

根据不同页面的需求，调用GetEditorD函数，并传入相应的参数来设置不同的宽度。

“`php

echo GetEditorD(‘fieldName’, ”, 500, ‘Basic’, ‘print’, ‘false’, false); // 前台编辑器宽度设置为500px

echo GetEditorD(‘fieldName’, ”, 800, ‘Basic’, ‘print’, ‘false’, false); // 后台编辑器宽度设置为800px

“`

通过以上步骤，您可以在织梦dedecms的不同页面中为百度ueditor编辑器设置不同的宽度，从而满足不同的页面需求，这种方法不仅简单易行，而且具有很强的灵活性，可以根据实际需求进行进一步的调整和优化。

表格示例：

页面类型	编辑器名称	宽度（像素）	说明
前台页面	ueditor1	500	适用于内容展示区域较小的页面
后台页面	ueditor2	800	适用于内容丰富、需要更多编辑空间的页面

FAQs：

Q1：如何在织梦dedecms中为不同页面设置百度ueditor编辑器的不同宽度？

A1：可以通过在util.helper.php和inc_fun_funAdmin.php文件中添加自定义函数，并在需要的地方调用这些函数来实现，具体步骤包括复制并重命名ueditor配置文件、修改两个PHP文件以及在需要的地方调用自定义函数。

Q2：为什么需要为不同页面设置不同的编辑器宽度？

A2：不同页面的内容展示需求不同，有些页面需要较窄的编辑器以节省空间，而有些页面则需要较宽的编辑器以方便内容编辑和排版，根据页面需求设置不同的编辑器宽度可以提高用户体验和管理效率。

为织梦dedecms不同页面中百度ueditor编辑器设置不同宽度

1. 前言

在织梦dedecms中，百度ueditor编辑器是一个常用的富文本编辑器，默认情况下，编辑器的宽度是固定的，根据不同的页面布局和设计需求，我们可能需要为不同的页面设置不同的编辑器宽度，以下是如何实现这一功能的详细步骤。

2. 准备工作

确保您的织梦dedecms系统中已经安装了百度ueditor。

确保您有对织梦dedecms后台进行修改的权限。

3. 修改ueditor配置文件

1、找到百度ueditor的配置文件，通常位于织梦dedecms的editor/ueditor目录下。

2、打开config.json文件。

4. 修改编辑器宽度

在config.json文件中，找到initialFrameWidth和initialFrameHeight这两个配置项，这两个配置项分别控制编辑器的初始宽度和高度。

{
    "initialFrameWidth": "100%", // 默认宽度
    "initialFrameHeight": 300 // 默认高度
}

将initialFrameWidth的值更改为所需的宽度值，如果您想将编辑器宽度设置为600像素，可以这样修改：

{
    "initialFrameWidth": "600", // 设置为600像素
    "initialFrameHeight": 300 // 高度保持不变
}

5. 为不同页面设置不同宽度

如果需要为不同的页面设置不同的编辑器宽度，可以通过以下两种方法实现：

方法一：使用自定义模板

1、在织梦dedecms后台，进入“模板管理”。

2、创建一个新的模板或修改现有的模板。

3、在模板中，通过HTML标签的class属性或style属性来设置编辑器的宽度。

<script id="ueditor" type="text/plain" class="ueditor" style="width: 800px; height: 400px;"></script>

方法二：使用JavaScript动态设置

1、在织梦dedecms后台，进入“自定义HTML”或“自定义JS”功能。

2、在相应的位置添加JavaScript代码，根据页面条件动态设置编辑器宽度。

<script type="text/javascript">
    window.onload = function() {
        var editor = UE.getEditor('ueditor');
        if (window.location.href.indexOf('page=2') !== 1) {
            editor.setOpt({initialFrameWidth: '500'}); // 页面URL包含'page=2'时，设置宽度为500像素
        }
    };
</script>

6. 验证效果

保存所有修改后，重新访问相应的页面，查看编辑器是否按照预期设置了不同的宽度。

7. 归纳

通过修改百度ueditor的配置文件或使用自定义模板和JavaScript，可以在织梦dedecms的不同页面中设置不同宽度的编辑器，这有助于提高用户体验和满足不同的页面设计需求。