PrimeFaces Extensions CKEditor: 无法访问自定义配置

huangapple go评论91阅读模式
英文:

PrimeFaces Extensions CKEditor: cannot access custom config

问题

我需要我的pe:ckEditor加载自定义配置,但我一直无法成功,欢迎任何建议如何使其工作。

(我需要它正常工作,因为我有这个问题:https://stackoverflow.com/questions/59608699/primefaces-extensions-ckeditor-when-saving-content-foreign-characters-get-twi,可能可以通过这个解决https://ckeditor.com/old/forums/CKEditor-3.x/utf-8-ckeditor或类似的东西https://ckeditor.com/old/forums/Support/Change-charset-UTF-8

自定义配置文件与包含pe:ckEditor的XHTML文件位于同一文件夹中。

自定义配置内容:

CKEDITOR.editorConfig = function( config ) {
    config.uiColor = '#AADC6E';
    config.toolbar = [
        { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
        { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
        '/',
        { name: 'links', items: [ 'Link', 'Unlink' ] },
        { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
        '/',
        { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
        { name: 'insert', items: [ 'Table', 'HorizontalRule', 'SpecialChar' ] },
        { name: 'tools', items: [ 'ShowBlocks' ] },
        { name: 'document', items: [ 'Source' ] },
    ];
};

我尝试过以下方法:

<h:outputScript name="ckEditor.js" library="js"></h:outputScript>
<pe:ckEditor id="editor" customConfig="ckEditor.js"></pe:ckEditor>
<script type="text/javascript">
    CKEDITOR.config.customConfig = 'ckEditor.js';
    CKEDITOR.replace('editor');
</script>
<h:outputScript name="ckEditor.js" library="js"></h:outputScript>
<pe:ckEditor id="editor" customConfig="ckEditor.js"></pe:ckEditor>
<pe:ckEditor id="editor"></pe:ckEditor>
<script type="text/javascript">
    CKEDITOR.config.customConfig = 'ckEditor.js';
    CKEDITOR.replace('editor');
</script>
<pe:ckEditor id="editor" customConfig="ckEditor.js"></pe:ckEditor>
<pe:ckEditor id="editor" customConfig="./ckEditor.js"></pe:ckEditor>
<pe:ckEditor id="editor" customConfig="project/WebContent/pages/inc/ckEditor.js"></pe:ckEditor>
<pe:ckEditor id="editor" customConfig="/project/WebContent/pages/inc/ckEditor.js"></pe:ckEditor>
<pe:ckEditor id="editor" customConfig="#{request.contextPath}/ckEditor.js"></pe:ckEditor>

当我将自定义配置文件中的详细信息输入到<pe:ckEditor>下方的<script>中时,它可以工作,但不幸的是这对我的情况并不是一个解决方案,因为我在许多页面上使用编辑器,需要将其设置存储在一个地方。

此外,在我进行谷歌搜索时,我发现有一些建议说我应该将自定义配置的指令放入默认配置文件中,但是我在我的项目中没有找到任何默认配置文件,所以这对我来说不是一个选项。

我已经谷歌搜索过,在PrimeFaces Extensions页面和CKEditor页面阅读了文档,阅读了PrimeFaces论坛、CKEditor论坛和这里的类似问题,但仍然没有解决。

PrimeFaces Extensions - 版本7.0.2
PrimeFaces - 版本7.0.7

英文:

I need my pe:ckEditor to load custom config, but I have been unsuccessful in this matter for some time, I will welcome any suggestions how to make it work.

(I need it functional because I have this problem: https://stackoverflow.com/questions/59608699/primefaces-extensions-ckeditor-when-saving-content-foreign-characters-get-twi, which might be solved by this https://ckeditor.com/old/forums/CKEditor-3.x/utf-8-ckeditor or something like this https://ckeditor.com/old/forums/Support/Change-charset-UTF-8)

The custom config file is in the same folder as my XHTML file in which the pe:ckEditor is.

The custom config content:

CKEDITOR.editorConfig = function( config ) {
	config.uiColor = &#39;#AADC6E&#39;;
	config.toolbar = [
		{ name: &#39;basicstyles&#39;, items: [ &#39;Bold&#39;, &#39;Italic&#39;, &#39;Underline&#39;, &#39;Strike&#39;, &#39;Subscript&#39;, &#39;Superscript&#39;, &#39;-&#39;, &#39;RemoveFormat&#39; ] },
		{ name: &#39;paragraph&#39;, items: [ &#39;NumberedList&#39;, &#39;BulletedList&#39;, &#39;-&#39;, &#39;Outdent&#39;, &#39;Indent&#39;, &#39;-&#39;, &#39;Blockquote&#39;, &#39;-&#39;, &#39;JustifyLeft&#39;, &#39;JustifyCenter&#39;, &#39;JustifyRight&#39;, &#39;JustifyBlock&#39;] },
		&#39;/&#39;,
		{ name: &#39;links&#39;, items: [ &#39;Link&#39;, &#39;Unlink&#39; ] },
		{ name: &#39;styles&#39;, items: [ &#39;Styles&#39;, &#39;Format&#39;, &#39;Font&#39;, &#39;FontSize&#39; ] },
		&#39;/&#39;,
		{ name: &#39;colors&#39;, items: [ &#39;TextColor&#39;, &#39;BGColor&#39; ] },
		{ name: &#39;insert&#39;, items: [ &#39;Table&#39;, &#39;HorizontalRule&#39;,  &#39;SpecialChar&#39;] },
		{ name: &#39;tools&#39;, items: [ &#39;ShowBlocks&#39; ] },
		{ name: &#39;document&#39;, items: [ &#39;Source&#39; ] },
	];
};

I tried:

&lt;h:outputScript name=&quot;ckEditor.js&quot; library=&quot;js&quot;&gt;&lt;/h:outputScript&gt;
&lt;pe:ckEditor id=&quot;editor&quot; customConfig=&quot;ckEditor.js&quot;&gt;&lt;/pe:ckEditor&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
 	CKEDITOR.config.customConfig = &#39;ckEditor.js&#39;; 
    CKEDITOR.replace(&#39;editor&#39;); 
 &lt;/script&gt;

And:

&lt;h:outputScript name=&quot;ckEditor.js&quot; library=&quot;js&quot;&gt;&lt;/h:outputScript&gt;
&lt;pe:ckEditor id=&quot;editor&quot; customConfig=&quot;ckEditor.js&quot;&gt;&lt;/pe:ckEditor&gt;

And:

&lt;pe:ckEditor id=&quot;editor&quot;&gt;&lt;/pe:ckEditor&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
     	CKEDITOR.config.customConfig = &#39;ckEditor.js&#39;; 
        CKEDITOR.replace(&#39;editor&#39;); 
     &lt;/script&gt;

And:

&lt;pe:ckEditor id=&quot;editor&quot; customConfig=&quot;ckEditor.js&quot;&gt;&lt;/pe:ckEditor&gt;

And:

&lt;pe:ckEditor id=&quot;editor&quot; customConfig=&quot;./ckEditor.js&quot;&gt;&lt;/pe:ckEditor&gt;

And (full path of the files is project/WebContent/pages/inc/ckEditor.js and project/WebContent/pages/inc/emailEditor.xhtml):

&lt;pe:ckEditor id=&quot;editor&quot; customConfig=&quot;project/WebContent/pages/inc/ckEditor.js&quot;&gt;&lt;/pe:ckEditor&gt;

And:

&lt;pe:ckEditor id=&quot;editor&quot; customConfig=&quot;/project/WebContent/pages/inc/ckEditor.js&quot;&gt;&lt;/pe:ckEditor&gt;

And (because of https://forum.primefaces.org/viewtopic.php?t=31334):

&lt;pe:ckEditor id=&quot;editor&quot; customConfig=&quot;#{request.contextPath}/ckEditor.js&quot;&gt;&lt;/pe:ckEditor&gt;

When I entered the details from the custom config file into the &lt;script&gt; below the &lt;pe:ckEditor&gt;, it worked, but that is unfortunately not a solution for my case as I use the editor on many pages and need its settings to be stored at one place only.

Also, when I was googling, I found some suggestion that I should place the directions for the custom config into the default config file, but I have not found any default config file in my project, so that is unfortunately not an option for me.

I did google, read documentation at PrimeFaces Extensions page and CKEditor page, read similar questions at PrimeFaces forum, CKEditor forum and here, but nothing has worked yet.


PrimeFaces Extensions - version 7.0.2<br />
PrimeFaces - version 7.0.7

答案1

得分: 3

pe:ckEditor上的customConfig属性是一个URL。
只需将您的JS放在浏览器可访问的某个位置。
如果它可以访问(例如)作为localhost:8080/myfolder/ckeditor.js,那么当您将customConfig设置为'#{request.contextPath}myFolder/ckeditor.js'时,它应该能够正常工作。

英文:

The customConfig attribute on pe:ckEditor is a URL.
So just put your JS somewhere, where it's a accessible via the browser.
If its accessible (for example) as localhost:8080/myfolder/ckeditor.js, it should work correctly when you set customConfig to '#{request.contextPath}myFolder/ckeditor.js'

huangapple
  • 本文由 发表于 2020年1月6日 20:36:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/59612256.html
匿名

发表评论

匿名网友

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

确定