<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>CKFinder &#8211; WilliamKyle&#039;s Home</title>
	<atom:link href="https://www.williamkyle.com.cn/archives/tag/ckfinder/feed" rel="self" type="application/rss+xml" />
	<link>https://www.williamkyle.com.cn</link>
	<description>不积跬步，无以至千里；不积小流，无以成江海。</description>
	<lastBuildDate>Fri, 08 Apr 2022 14:59:37 +0000</lastBuildDate>
	<language>zh-CN</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.9.3</generator>
	<item>
		<title>博客安装笔记</title>
		<link>https://www.williamkyle.com.cn/archives/22.html</link>
					<comments>https://www.williamkyle.com.cn/archives/22.html#comments</comments>
		
		<dc:creator><![CDATA[WilliamKyle]]></dc:creator>
		<pubDate>Tue, 31 Jan 2012 11:31:41 +0000</pubDate>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[CKFinder]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[SyntaxHighlighter]]></category>
		<guid isPermaLink="false">http://www.williamkyle.com.cn/?p=22</guid>

					<description><![CDATA[之前博客的安装记录。 https://web.archive.org/web/20121105184732/h &#8230; <a href="https://www.williamkyle.com.cn/archives/22.html" class="more-link">继续阅读<span class="screen-reader-text">博客安装笔记</span></a>]]></description>
										<content:encoded><![CDATA[
<p>之前博客的安装记录。 <a href="https://web.archive.org/web/20121105184732/http://www.williamkyle.com.cn/" target="_blank" rel="noreferrer noopener">https://web.archive.org/web/20121105184732/http://www.williamkyle.com.cn/</a></p>



<p>以下是原文：</p>



<hr class="wp-block-separator"/>



<p>WordPress 的安装就不用怎么多说了。下载、解压、移动到你想要的目录，修改 owner，建数据库，安装就是的。</p>



<p>我主要讲一下插件的问题，我装的是<a rel="noopener" href="http://wordpress.org/extend/plugins/ck-and-syntaxhighlighter/" target="_blank"><strong>CK and SyntaxHighlighter</strong></a>这个插件，它综合了 CKEditor、CKFinder 以及 SyntaxHighlighter 三个软件，能够提供可视化编辑器、文件管理以及语法高亮。这个插件还是很不错的，至少很对我的胃口，然而这几个插件本身有着一些不足之处，所以得对它们进行一些修改。</p>



<span id="more-22"></span>



<h4>SyntaxHighlighter 的右上角的问号</h4>



<p class="has-text-align-center">&nbsp; &nbsp;&nbsp; <img style="width: 150px; height: 150px;" src="http://www.williamkyle.com.cn/wp-content/uploads/ckfinder/images/SyntaxHighlighter右上角问号.jpg" alt=""/>修改之前 VS 修改之后<img style="width: 150px; height: 150px;" src="http://www.williamkyle.com.cn/wp-content/uploads/ckfinder/images/SyntaxHighlighter右上角问号2.jpg" alt=""/></p>



<p>由于这个插件里的 SyntaxHighlighter 用的是 3.x 版本的，右上角会有一个问号出现，可以通过修改 css 文件让它不显示。</p>



<p>首先打开/wp-content/plugins/ck-and-syntaxhighlighter/syntaxhighlighter/styles/shCoreCk.css 找到&nbsp; &nbsp;&nbsp;</p>



<pre class="wp-block-code has-dark-gray-color has-text-color"><code lang="css" class="language-css">.syntaxhighlighter .toolbar {
  position: absolute !important;
  right: 1px !important;
  top: 1px !important;
  width: 11px !important;
  height: 11px !important;
  font–size: 10px !important;
  z–index: 10 !important;
}
</code></pre>



<p>&nbsp; &nbsp; 添加一个 display:none; 修改成</p>



<pre class="wp-block-code has-dark-gray-color has-text-color"><code lang="css" class="language-css">.syntaxhighlighter .toolbar {
  position: absolute !important;
  right: 1px !important;
  top: 1px !important;
  width: 11px !important;
  height: 11px !important;
  font–size: 10px !important;
  z–index: 10 !important;
  display:none:
}
</code></pre>



<h4>&nbsp;&nbsp;&nbsp;&nbsp;<br />SyntaxHighlighter 代码框右侧滚动条</h4>



<p>如上面所示，这个滚动条出现的很难看，同样修改 shCoreCk.css 文件，在第 54 行添加代码</p>



<pre class="wp-block-code has-dark-gray-color has-text-color"><code lang="css" class="language-css">.syntaxhighlighter table {
  margin: 1px 0 !important;
}
</code></pre>



<h4>&nbsp;SyntaxHighlighter 的自动换行</h4>



<figure class="wp-block-image"><img src="http://www.williamkyle.com.cn/wp-content/uploads/ckfinder/images/SyntaxHighlighter底下滚动条.jpg" alt=""/></figure>



<p>&nbsp;SyntaxHighlighter 3.x 版本貌似不会自动换行，同样可以通过修改 shCoreCk.css 文件让其自动换行</p>



<pre class="wp-block-code has-dark-gray-color has-text-color"><code lang="css" class="language-css">.syntaxhighlighter .line {
  white–space: pre !important;
} </code></pre>



<p>&nbsp; &nbsp; 修改成</p>



<pre class="wp-block-code has-dark-gray-color has-text-color"><code lang="css" class="language-css">.syntaxhighlighter .line {
  /*white-space: pre !important;*/
  white–space: pre–wrap;
  white–space: –moz–pre–wrap;
  white–space: –pre–wrap;
  white–space: –o–pre–wrap;
  word–wrap: break–word;
}
</code></pre>



<p>不过这样还是有问题的，它把折下去的行也算入行号内了，所以到后面，行号会缺少。</p>



<figure class="wp-block-image"><img src="http://www.williamkyle.com.cn/wp-content/uploads/ckfinder/images/SyntaxHighlighter断行.jpg" alt=""/></figure>



<p>这个在 SyntaxHighlighter 2.x 版本没有出现，但是 2.x 版本的复制会把行号也复制进去。</p>



<h4>CKFinder 的权限设置</h4>



<p>CKFinder 的后台首页是个 html 文件，可以直接访问，并创建文件夹、上传文件，危害甚大，所以必须处理。我的解决方案是在/wp-content/plugins/ck-and-syntaxhighlighter/ckfinder/config.php 文件里面添加 WordPress 的 wp-admin/admin.php 的引用，这样一来，就只有能登陆后台的用户使用这个功能了。</p>



<pre class="wp-block-code has-dark-gray-color has-text-color"><code lang="php" class="language-php">include(dirname(str_replace(", '/', __FILE__)) . '/../../../../wp-admin/admin.php');</code></pre>



<h4>CKFinder 的文件路径设置</h4>



<p>由于这个插件返回的文件路径使用的是相对路径，导致在后台编辑的时候不能显示的上传的文件，同样修改一下 config.php 即可，但是文件路径返回的是使用时的域名路径，所以如果修改了域名的话，估计都得修改了。</p>



<pre class="wp-block-code has-dark-gray-color has-text-color"><code lang="php" class="language-php">$baseUrl = 'http://' . $_SERVER["HTTP_HOST"] . '/wp-content/uploads/ckfinder/';
</code></pre>



<p>暂时就改了这么多，当然主题也改了一下，折腾了很久，最终由于 PhotoShop 水平有限，只是正式修改了一小部分，暂时就先这样吧，用空了再继续折腾。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.williamkyle.com.cn/archives/22.html/feed</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
			</item>
	</channel>
</rss>
