如何在Ckeditor编辑器中选择中文字体？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在Ckeditor编辑器中选择中文字体？相关的知识，希望对你有一定的参考价值。
CKeditor字体选择里面没有中文字体，可以按如下方法添加：打开CKeditor目录里的 config.js，在
CKEDITOR.editorConfig = function( config )
;
里添加如下代码：
config.font_names=’ 宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;’+ config.font_names;
以后使用的时候就可以用中文字体了。
添加后清空浏览器缓存后新的字体就可以显示出来了。
参考技术A 1.按下面的说明修改Ckeditor本身的配置文件cd/opt/otrs/var/httpd/htdocs/js/thirdparty/ckeditor-4.0viconfig.js将每10行改为：2.按下面的说明修改OTRS富文本编辑器的配置文件cd/opt/otrs/var/httpd/htdocs/jsviCore.UI.RichTextEditor.js用//将第80行注释掉（取决于OTRS的版本，行数可能是不同的）好了，现在你可以在CKeditor中选择中文字体了（见下图）。建议大家在创建知识库文章时，尽可能地用丰富的中文字体修饰你的文字内容，这样能提高用户的阅读兴趣。最后一个问题，就是这个通用程序接口。本回答被提问者采纳
如何在引导模式中使用 CKEditor？
【中文标题】如何在引导模式中使用 CKEditor？【英文标题】：How to use CKEditor in a Bootstrap Modal? 【发布时间】：2014-05-03 11:10:28 【问题描述】：如果我在基于 Bootstrap 模板的 HTML 页面中使用 CKEditor 插件，效果很好，但是如果我将编辑器插入到像这样的 Bootstrap 模态中
<!-- Modal -->
<div class="modal fade" id="modalAddBrand" tabindex="-1" role="dialog" aria labelledby="modalAddBrandLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="modalAddBrandLabel">Add brand</h4>
</div>
<div class="modal-body">
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea> <script>
CKEDITOR.replace('editor1');
</script>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="AddBrandButton" type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
编辑器可以工作，但编辑器弹出窗口上的所有表单控件都被禁用，例如，如果您尝试添加链接或图像，则无法插入 URL 或任何描述，因为输入被禁用。
此问题的任何解决方法？
这是一个小提琴示例：http://jsfiddle.net/7zDay/
【问题讨论】：
看这个例子jsfiddle.net/7zDay Bootstrap with CKEditor equals problems的可能重复 这个answer 提供了一个适用于更多对话框的更好解决方案。 【参考方案1】：这应该有助于http://jsfiddle.net/pvkovalev/4PACy/
$.fn.modal.Constructor.prototype.enforceFocus = function ()
var $modalElement = this.$element;
$(document).on('focusin.modal', function (e)
var $parent = $(e.target.parentNode);
if ($modalElement[0] !== e.target && !$modalElement.has(e.target).length
// add whatever conditions you need here:
&&
!$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text'))
$modalElement.focus()
)
;
2016 年 10 月更新：
CKEditor 的 CDN 链接已更改，所以我更新了 jsfiddle
【讨论】：
甚至不知道这是做什么的，但它解决了我的问题！英雄。 有效！只需创建一个单独的文件并将其包含在 jquery 和引导脚本之后。帮助我节省了时间和精力！ 这对我不起作用。对于另一个通用解决方案检查***.com/questions/31678662/… 救了我！ +1 谢谢！ 哇，这是我在搜索一个小时后找到的唯一解决方案。谢谢！【参考方案2】：这是迟到的回答，但做 css 技巧将解决问题。
Bootstrap modal 的默认z-index 是10051，ckeditor 对话框的默认z-index 是10010。诀窍只是增加ckeditor对话框z-index，如下所示。将以下代码放入您的 css 文件中：
.cke_dialog
z-index: 10055 !important;
【讨论】：
对我来说还不够。我也需要更改 .cke_dialog 和 .cke_dialog_background_cover 的 Z-index【参考方案3】：在 ckeditor 论坛上查看 aaronsnow 对此主题的回复： http://ckeditor.com/forums/Support/Issue-with-Twitter-Bootstrap
他已经给出了密码。只需将代码放入 js 文件中，并确保在 jquery 和 bootstrap 之后包含该文件
【讨论】：
// 当 ckeditor 出现在引导模式对话框中时修复 ckeditor/bootstrap 兼容性错误 // 在加载 jQuery 和引导程序后包含此文件。 $.fn.modal.Constructor.prototype.enforceFocus = function() modal_this = this $(document).on('focusin.modal', function (e) if (modal_this.$element[0] !== e .target && !modal_this.$element.has(e.target).length && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text' )) modal_this.$element.focus() ) ;【参考方案4】： $(document).on('show.bs.modal': function ()
$(this).removeAttr('tabindex');
, '.modal');
【讨论】：
【参考方案5】：使用 100% 工作脚本..
<script type="text/javascript">
// Include this file AFTER both jQuery and bootstrap are loaded.
$.fn.modal.Constructor.prototype.enforceFocus = function()
modal_this = this
$(document).on('focusin.modal', function (e)
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_textarea')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text'))
modal_this.$element.focus()
)
;
</script>
谢谢！
【讨论】：
【参考方案6】：我收到了Uncaught TypeError: Cannot read property 'fn' of undefined
所以我只是将上面@Pavel Kovalev提供的脚本中的$替换为jQuery。
jQuery.fn.modal.Constructor.prototype.enforceFocus = function ()
modal_this = this
jQuery(document).on('focusin.modal', function (e)
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& !jQuery(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
&& !jQuery(e.target.parentNode).hasClass('cke_dialog_ui_input_text'))
modal_this.$element.focus()
)
;
【讨论】：
【参考方案7】：只需在 ckeditor 文件中打开 /core/config.js 而不是更改“baseFloatZIndex”变量
baseFloatZIndex = 10000
到
baseFloatZIndex = 20000
它将更改编辑器框的开始“z-index”和弹出窗口。
【讨论】：
【参考方案8】：添加此 css 以设置链接到对话容器的 .cke_dialog_container z-index
.cke_dialog_container
z-index: 20000
对于模态，我使用了类似于已回答帖子中给出的内容：
$("#createLot").on("show.bs.modal", function()
$(this).removeAttr('tabindex');
)
这解决了我点击链接时出现对话框的问题。
【讨论】：
这是正确的答案，我们可以从 html 中删除 tabindex，不需要用 jquery 来做，但是很好的捕获【参考方案9】：不知道，也许在我的版本中它已经修复了，但我的解决方案是：
$("#messageModal").on('shown.bs.modal', function()
CKEDITOR.replace('message',
height: '400px',
width: '100%'
);
)
【讨论】：
【参考方案10】：一切都很简单：
$('#modal').removeAttr('tabindex');
$('#modal').focusout(function()
$(this).css('position':'relative');
);
$('#modal').focusin(function()
$(this).css('position':'fixed');
);
【讨论】：
你能解释一下你的答案吗？ $('#message-modal').removeAttr('tabindex'); $('#message-modal').focusout(function() if($('.cke_dialog_background_cover').css('display')=='block') $(this).css('position' :'relative'); setTimeout(function() $('#message-modal').css('position':'fixed'); ,10); ); 这个用于模式中的 CKEditor TabIndex 阻止焦点字段。其他所有 css 位置【参考方案11】：这非常简短。从它们存储在您的应用程序中的路径导入 CKEditor Javascript 配置文件。这是我的
<script type="text/javascript" src="% static 'ckeditor/ckeditor-init.js' %"></script>
<script type="text/javascript" src="% static 'ckeditor/ckeditor/ckeditor.js' %"></script>
之后你可以调用CKEditor来替换你的textarea
CKEDITOR.replace('topic',
uiColor: '#9AB8F3',
language: "en-us",
toolbar: "Custom",
height: "200",
width: "400",
skin: "moono",
toolbar_Custom: [
["Bold", "Italic", "Underline"],
["NumberedList", "BulletedList", "-", "Outdent", "Indent", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"],
["Link", "Unlink"]
],
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdn.ckeditor.com/4.3.4/standard/ckeditor.js"></script>
<!-- Modal -->
<div class="modal fade" id="modalAddBrand" tabindex="-1" role="dialog">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="modal-content">
<div class="user-box">
<h2>Create a new discussion</h2>
<form method="post" id="discussion_add" action="#">
<!--FORM FIELD START-->
<div class="form">
<div class="input-container">
<input type="text" id="id_session" name="session" required="true">
</div>
<div class="input-container">
<textarea cols="40" id="id_topic" name="topic" rows="10"></textarea>
</div>
<div class="input-container">
<button class="btn-style">Create Discussion</button>
</div>
</div>
</form>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<button data-toggle="modal" data-target="#modalAddBrand">Launch Modal</button>【讨论】：
【参考方案12】：我想我找到了一些解决方案。
正如@Pavel Kovalev 建议的那样，它与 boostraps 4 JS 和专注于模态脚本有关。我和你的问题一样。
模态框有一个选项称为“焦点”，它将焦点设置在初始化的模态框上。禁用此选项会使您在 CKEditors 模态中的所有输入都能正常工作。不关注这种模式我可以没有:)
在此处查看详细信息： https://getbootstrap.com/docs/4.3/components/modal/#options
在我的处理方法中，我最终得到了这样的结果：
<div class="modal fade" data-focus="false" id="newsAdd" role="dialog" aria-labelledby="fieldAdd" aria-hidden="true">
...
</div>
对于一些更广泛的测试来说，这可能是个好主意，特别是如果您在一页上有多个带有 CKEditor 的引导模式。
至于所有的“修复”你可以在网上找到。看看他们最有可能指的是引导程序 3，其中模式上的事件不同，因此它们根本无法工作。包括@Pavel Kovalev 解决方案。
【讨论】：
【参考方案13】：这对我有用 bootstrap 4.4 和 ckeditor 4.14。您需要做的就是在模态的shown.bs.modal 事件中初始化ckeditor。
$('#yourModal')
.on('shown.bs.modal', (e) =>
CKEDITOR.replace('editor')
);
工作就像一个魅力。
【讨论】：
【参考方案14】：我只是从对话框主 div 元素中删除 tabindex="-1" 。这是示例代码
<div class="modal fade" id="bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
我只是删除了这个
tabindex="-1"
它开始工作了。
【讨论】：
【参考方案15】：对于 Bootstrap 4，此行将不再工作。他们需要弄清楚它已更改为：
$.fn.modal.Constructor.prototype._enforceFocus = function() ;
代替
$.fn.modal.Constructor.prototype.enforceFocus = function() ;
所以，代码应该是这样的：
$.fn.modal.Constructor.prototype._enforceFocus = function()
modal_this = this
$(document).on('focusin.modal', function (e)
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text'))
modal_this.$element.focus()
)
;
【讨论】：
以上是关于如何在Ckeditor编辑器中选择中文字体？的主要内容，如果未能解决你的问题，请参考以下文章