Laravel 5.5 和 CKEditor 选项
Laravel 5.5 and CKEditor Options
我想在 CKEditor 中使用一些可选的额外功能,特别是视频嵌入。
我已经全部下载到public区的ckeditor,plugins目录下有视频
我从CKeditor的CDN入手:
<script src="//cdn.ckeditor.com/4.7.3/full-all/ckeditor.js"></script>
然后我添加视频插件的选项:
<script>
CKEDITOR.plugins.addExternal( 'video', '{{ public_path('\ckeditor\plugins\video\ ') }}', 'video.js' );
</script>
(video.js 实际上在我也试过的子目录对话框中)。
我可以在我的页面上看到 CKEditor,但没有视频按钮。
有人有什么想法吗?
首先,您需要将插件存档的内容上传到您网站上的任意文件夹。虽然,命名文件夹是个好主意,这样您就知道它包含 CKEditor 插件。为了我们的示例,我们将其命名为 ckeditor/plugins。那么您应该以以下路径结束:
ckeditor/plugins/jsplus_image_editor
现在,我们需要告诉CKEditor从上面的文件夹加载插件。将以下代码添加到 CKEditor 替换标准控件的行上方的 HTML 代码中:
<textarea name="editor1"></textarea>
...
<script>
CKEDITOR.plugins.addExternal( 'yourpluginname',
'/ckeditor/plugins/yourpluginname', 'plugin.js' );
CKEDITOR.replace('editor1');
...
</script>
通常您通过 config.js 安装插件,但由于您使用的是 cdn,我们需要替换配置。用以下代码更新上面的替换:
CKEDITOR.replace('editor1', { customConfig: '/ckeditor/custom_config.js'});
制作上面提到的custom_config.js并放置以下代码
CKEDITOR.editorConfig = 功能(配置){
CKEDITOR.editorConfig = function( config ) {
config.language = 'en';
config.extraPlugins = 'PLUGINNAME';
config.toolbar = 'custom';
config.toolbar_custom = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Scayt' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
{ name: 'tools', items: [ 'Maximize' ] },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source' ] },
{ name: 'others', items: [ '-' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
{ name: 'styles', items: [ 'Styles', 'Format' ] },
{ name: 'about', items: [ 'About' ] },
{ name : 'new_group', items: ['PLUGINNAME'] }
];}
希望对您有所帮助!
我想在 CKEditor 中使用一些可选的额外功能,特别是视频嵌入。
我已经全部下载到public区的ckeditor,plugins目录下有视频
我从CKeditor的CDN入手:
<script src="//cdn.ckeditor.com/4.7.3/full-all/ckeditor.js"></script>
然后我添加视频插件的选项:
<script>
CKEDITOR.plugins.addExternal( 'video', '{{ public_path('\ckeditor\plugins\video\ ') }}', 'video.js' );
</script>
(video.js 实际上在我也试过的子目录对话框中)。
我可以在我的页面上看到 CKEditor,但没有视频按钮。
有人有什么想法吗?
首先,您需要将插件存档的内容上传到您网站上的任意文件夹。虽然,命名文件夹是个好主意,这样您就知道它包含 CKEditor 插件。为了我们的示例,我们将其命名为 ckeditor/plugins。那么您应该以以下路径结束:
ckeditor/plugins/jsplus_image_editor
现在,我们需要告诉CKEditor从上面的文件夹加载插件。将以下代码添加到 CKEditor 替换标准控件的行上方的 HTML 代码中:
<textarea name="editor1"></textarea>
...
<script>
CKEDITOR.plugins.addExternal( 'yourpluginname',
'/ckeditor/plugins/yourpluginname', 'plugin.js' );
CKEDITOR.replace('editor1');
...
</script>
通常您通过 config.js 安装插件,但由于您使用的是 cdn,我们需要替换配置。用以下代码更新上面的替换:
CKEDITOR.replace('editor1', { customConfig: '/ckeditor/custom_config.js'});
制作上面提到的custom_config.js并放置以下代码 CKEDITOR.editorConfig = 功能(配置){
CKEDITOR.editorConfig = function( config ) {
config.language = 'en';
config.extraPlugins = 'PLUGINNAME';
config.toolbar = 'custom';
config.toolbar_custom = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Scayt' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
{ name: 'tools', items: [ 'Maximize' ] },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source' ] },
{ name: 'others', items: [ '-' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
{ name: 'styles', items: [ 'Styles', 'Format' ] },
{ name: 'about', items: [ 'About' ] },
{ name : 'new_group', items: ['PLUGINNAME'] }
];}
希望对您有所帮助!