DEDE的首页的CSS样式在哪里修改？

方法/步骤

1

1、请确认自己现在已经完全升级到Dedecms V57版本。

2

2、查看include目录下是否有FCKeditor文件夹，如果没有请从原来V56版本的include文件夹里拷贝一个过来。

3

3、完成上两步确认工作后，进入Dedecms管理后台，主菜单---系统---系统基本参数，里面选择第二项核心设置里将“Html编辑器（ckeditor,需要fck的用户可以去官网下载）： ”这项的值改为“fck”，点击确定，OK，改造完毕！

4

4、添加一篇文章试试，看看编辑器是不是已经完全换回来了？

然后在安装自动排版插件，网上57的自动排版插件，其实在56的基础上改的，直接上传，安装就可以了！

前言

前一段时间公司Vuejs项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了。

具体可以参考这篇文章：//wwwgxlcmscom/article/118413htm

ueditor是百度编辑器，官网地址：http://ueditorbaiducom/website/

完整的功能演示，可以参考：http://ueditorbaiducom/website/onlinedemohtml

最近工作中要求升级，需要在vue中创建多个ueditor实例，我使用neditor，其实就是把ueditor样式美化了下，其他和ueditor几乎一样，下面话不多说了，来一起看看详细的介绍吧。

截图

说明

下载ueditor或neditor源码,拷贝到static目录下面

然后修改ueditorconfigjs配置文件

在vue项目的mainjs添加ueditor引用

新建3个页面 home,tab1,tab2。tab1和tab2是home下面的子页面

在router-view外面一定要添加keep-alive组件和transition组件,不然ueditor实例无法保存

在components文件夹下面新建一个editor作为编辑器的公共组件

在tab1中调用editor,同时要传入一个id并在editor页面接受,注意如果需要多个实例,id一定不能相同

<template>

<div>

<editor ref="editor" id="tab1Editor"></editor>

<button @click="getContent" class="m-t-10">获取内容</button>

<div>

<span>当前富文本编辑器内容是: {{content}}</span>

</div>

</div>

</template>

<script>

import Editor from '@/components/editor'

export default {

name: 'tab1',

components: { Editor },

data() {

return {

content:''

}

},

methods: {

//获取内容

getContent(){

thiscontent = this$refseditorcontent

}

}

}

</script>

<style scoped>

m-t-10{

margin-top: 10px;

}

</style>

editor页面代码,因为我们在router-view套用了keep-alive,所以ueditor的初始化一定要放在activated里面,

确保每次进入页面都会重新渲染ueditor,在deactivated里面调用ueditor的destroy方法,确保每次离开页面的时候

会销毁编辑器实例,这样就可以渲染多个ueditor实例了,并且每次切换都能保存编辑器的内容。

如果多个tab只需要一个实例请调用reset()方法

<template>

<div>

<div :id="thisid"></div>

</div>

</template>

<script>

export default {

name: 'editor',

props: ['id'],

data() {

return {

ue: '', //ueditor实例

content: '', //编辑器内容

}

},

methods: {

//初始化编辑器

initEditor() {

thisue = UEgetEditor(thisid, {

initialFrameWidth: '100%',

initialFrameHeight: '350',

scaleEnabled: true

})

//编辑器准备就绪后会触发该事件

thisueaddListener('ready',()=>{

//设置可以编辑

thisuesetEnabled()

})

//编辑器内容修改时

thisselectionchange()

},

//编辑器内容修改时

selectionchange() {

thisueaddListener('selectionchange', () => {

thiscontent = thisuegetContent()

})

}

},

activated() {

//初始化编辑器

thisinitEditor()

},

deactivated() {

//销毁编辑器实例，使用textarea代替

thisuedestroy()

//重置编辑器，可用来做多个tab使用同一个编辑器实例

//如果要使用同一个实例,请注释destroy()方法

//thisuereset()

}

}

</script>

源码地址

github：https://githubcom/oblivioussing/vue-ueditor-multi

本地下载：http://xiazaijb51net/201711/yuanma/vue-ueditor-multi(jb51net)rar

总结

Dedecms 的首页样式文件一般在配套的模板文件里，默认模板的css样式在skin目录下css文件夹里的stylecss文件里，其他模板css样式都是自定义的，需要具体分析。

一、dedecms 默认模板样式。

1、默认模板样式位置是固定的，直接用Vscode编辑器打开模板文件目录，定位到“default”文件夹下，就可以看见style文件夹，里面都是默认模板的样式。

2、一般首页的样式都在“dedecmscss”文件里，打开修改即可。

二、查看自定义模板css样式。

自定义模板的css样式比较灵活，开发者可能会把样式文件放在任何一个目录下，此时就需要自己去分析模板。

1、打开dedecms的目录，打开自定义模板文件夹。

2、接着打开首页模板文件“indexhtm”，可以看到，“<link>”标签里的 css文件路径，一般就是模板套用的css样式，只要打开它就可以修改了。

3、按下“crtl”键，此时编辑器页面会出现“按住Crtl并单击可访问连接的提示”。

4、此时按住“crtl”鼠标左键单击link标签下的路径，Vscode就会自动定位到该文件的目录并打开改文件。

最后就可以修改样式了。

可以弄个插件，把上传的word，自动整理为网页形式的。在word文档中编辑一篇文章，格式段落都整理好后，粘贴到dede编辑器里面却发现，格式都无效了，可能dede有自己的打算，比如这样可以文章字体大小统一，样色统一，整体比较整洁。但是用惯了word编辑文章的同学们就感觉不顺手了。郑州亿仟家网络经过查资料和实际操作，把方法给大家介绍一下。

Dedecms集成的是CKEditor编辑器，我们要做的是把CKEditor编辑器替换成kindeditor编辑器，kindeditor编辑器以其强大的功能和良好的用户体验度，是目前国内使用最广泛的编辑器之一。

具体操作步骤如下：

1，首先下载kindeditor文件包，下载地址：/uploads/file/20130430/20130430105608_10173zip

2，解压后把kindeditor文件夹上传到include/目录下。

3，用kindeditor文件夹下的inc_fun_funAdminphp替换include/inc/下的inc_fun_funAdminphp文件。

4，修改dedecms系统参数——核心设置——Html编辑器（ckeditor,需要fck的用户可以去官网下载）：将ckeditor改成kindEditor。