CKEditor5 入门使用

教程分享 > WEB技术 > Web Editor (548) 2024-08-07 11:24:34

1.引入依赖js文件

<script type="text/javascript" src="/plugin/ckeditor5/ckeditor.js"></script>

2.html 中CKEditor5 位置

<div class="form-group col-lg-12">
    <label class="control-label  col-lg-3  text-right"><span class="control-label required-mark"></span>内容:</label>
    <textarea class="form-control-erbi col-lg-5"  name="editor"  id="editor" /></textarea>
</div>

3.样式 CKEditor5 展示部分

<style>
    .ck-editor__main{
        75%;
        padding-right: 0;
        float: right;
    }

    .ck-editor__editable {
        min-height: 200px;
    }
</style>

4. JavaScript初始化CKEditor5 编辑器

var myEditor = null;
window.onload = function(){
    ClassicEditor
        .create(document.querySelector("#editor"), {
            ckfinder: {
                uploadUrl: '/admin.php/Common/ck_editor?command=QuickUpload&type=Files&responseType=json'
            }
        })
        .then(editor => {
            myEditor = editor;
            // 设置初始值
            myEditor.setData('');
        })
        .catch(error => {
            console.error(error);
        });
}

5. CKEditor 图片上传后台,文件名默认为upload

public function ck_editor(){
        $config = array(
            "savePath" => "./site_upload/ck_editor/" ,             //存储文件夹
            "maxSize" => 1000000 ,                   //允许的文件最大尺寸,单位KB
            "allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" )  //允许的文件格式
        );

        $up = new Uploader( "upload" , $config );
        $info = $up->getFileInfo();
        $info['url'] = substr($info['url'],1);
        $host_name = Func::getHostName();
        $url = 'http://' . $host_name . $info['url'];
        $qiniu = new QiniuImg();
        $ext = pathinfo($url, PATHINFO_EXTENSION);
        $name = time() . mt_rand() . '.' . $ext;
        $s = $qiniu->up($url, $name, config('app.qiniu.bucket'));
        if($s){
            @unlink('.'.$info['url']);
            $info['url'] = config('cdn_host').$name;
        }
        if ($info) {
            $this->json->setAttr('uploaded',true);
            $this->json->setAttr('url',[$info['url']]);
            $this->json->Send();
        } else {
            $this->json->setAttr('uploaded',false);
            $this->json->setErr(10099,'上传失败');
            $this->json->Send();
        }
}

6.CKEditor5获取编辑器内容

var htmlStr=myEditor.getData();
$('#editor').val(htmlStr);

7CKEditor5自定义配置toolbar

var myEditor = null;
    window.onload = function(){
        ClassicEditor
            .create(document.querySelector("#editor"), {
                toolbar: ["undo", "redo", "|", "alignment", "bold", "italic", "blockQuote", "imageTextAlternative", "imageUpload", "heading", "link", "numberedList", "bulletedList"],
                ckfinder: {
                    uploadUrl: '/admin.php/Common/ck_editor?command=QuickUpload&type=Files&responseType=json'
                }
            })
            .then(editor => {
                myEditor = editor;
                // 设置初始值
                myEditor.setData('');
            })
            .catch(error => {
                console.error(error);
            });
}


 

https://www.leftso.com/article/2407251445233428.html

相关文章
1.引入依赖js文件&lt;script type="text/javascript" src="/plugin/ckeditor5/ckeditor.js"&gtl;&lt;/s
ckeditor5使用demo,配置详情参考。官网相关资源查阅,组件配置
ckeditor5 图片上传地址配置,ckeditor5和4的图片上传配置有点不一样。首先是确定你选的上传支持插件是什么,我这里是下面这个插件ckfinder
在CKEditor4版本中,对于编辑器高度设置是通过config配置里面的属性height来实现的,如下方所示CKEditor5 版本查文档发现已经没有这个配置了,通过网络资料查询得知,CKEd...
CKeditor5代码片段是官方自己集成的。可以通过在线构建的时候选择Code blocks 组件。选择后默认支持一下代码语言,是通过pre标签+code标签实现的。[ { langu...
CKeditor无论那个版本,在我主要以文章编辑的时候,需要去掉默认的H1标签,所以需要自定义配置heading标签。同样CKeditor5 与之前的4版本有所不同。CKeditor5自定义配置...
在ckeditor4的时候绑定blur事件代码如下:window.editor.on('blur',function(){//这里写你想做的事儿})同样的代码搬到ckeditor5不仅不能用,还...
针对CKEditor5是否开源免费,我们阅读官方响应文档得到下面的结果:所有下载均受相关开源许可协议或商业许可协议(以适用者为准)的约束。 再查阅更详细的文档,
ckeditor 5 自定义插件实现,自定义一个插件并在toolbar上。点击自定义插件图标响应对应事件。环境ckeditor 5.42.1(github稳定版
CKEditor 5 不重新构建移除某个plugin控件组件参考代码:ClassicEditor .create( document.querySelector...
CKeditor 5.0 如何获取纯文本数据,ckeditor官方其实提供了获取带html脚本的内容方法,只需要配合jQuery简单就获取到了文本内容,详细操作如下
ckeditor4的早期版本,图片上传组件。默认情况会有以下图片预览描述文字,如下图所示:上图红色圈出部分即为图片预览的描述。这个放到应用中会感觉很奇怪。所以多
CKeditor5 默认情况下的fontsize组件是小号默认大号特大号这种,没有具体的字体大小px单位选择,有些时候需要配置。故而对默认配置进行了修改。配置方式如下: C...
CKEditor4.4整合SprngMVC实现上传图片
ckeditor绑定keyup/keydown等事件实现一些功能,比如实时保存$(function(){//1编辑器初始化$('textarea#blog_content').ckeditor();