ckeditor使用前端代码

已于 2024-01-12 14:14:04 修改
阅读量359 收藏 10
点赞数 8
文章标签： android
于 2024-01-12 14:03:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/op898/article/details/135551357
版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – classic editor build – development sample</title>
    <style>
        body {
            max-width: 800px;
            margin: 20px auto;
        }
    </style>
</head>
<body>

<h1>CKEditor 5 – classic editor build – development sample</h1>

<div id="editor">
    <h2>Sample</h2>

    <p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">classic editor build</a>.</p>

    <figure class="image">
        <img src="tests/manual/sample.jpg" alt="Autumn fields" />
    </figure>

    <p>You can use this sample to validate whether your <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>
</div>

<h2 style="text-align:center"><a href="index35.html" target="_blank">ckfinder3.5</a></h2>
 


<script src="build/ckeditor.js"></script>
<script src="build/translations/zh-cn.js"></script>
 

<script>
    ClassicEditor.create( document.querySelector( '#editor' ),{
    toolbar: {
                items: [
                    'sourceEditing',
                    '|','undo','redo',
                    '|','heading',
                    '|','findandReplace','alignment','bold','italic','underline','code',
                    'horizontalLine','removeformat','link','strikethrough','subscript','superscript','blockQuote','specialCharacters',
                    '|','FontSize','FontColor','FontBackgroundColor','FontFamily','highlight',
                    '|','numberedList','bulletedList','todoList','outdent','indent','pageBreak',
                    '|','insertImage','cKFinder','insertTable','mediaEmbed',
                
                ]
            },
            ckfinder: {
                uploadUrl: 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
            },
            //设置字体
            fontFamily: {
                options: [
                    'default',
                    'Blackoak Std',
                    '宋体,SimSun',
                    '新宋体,NSimSun',
                    '微软雅黑,Microsoft YaHei',
                    '楷体_GB2312,KaiTi_GB2312',
                    '隶书,LiSu',
                    '幼园,YouYuan',
                    '华文细黑,STXihei',
                ]
            },
            image: {

                styles: [
                    'full','alignLeft', 'alignCenter', 'alignRight'
                ],  
                resizeOptions: [
                    {
                    name: 'resizeImage:原尺寸',
                    label: '原尺寸',
                    value: null
                    },
                    {
                    name: 'resizeImage:25',
                    label: '25%',
                    value: '25'
                    },
                    {
                    name: 'resizeImage:50',
                    label: '50%',
                    value: '50'
                    },
                    {
                    name: 'resizeImage:75',
                    label: '75%',
                    value: '75'
                    }
                ],
                toolbar: [
                    // 'imageStyle:full',
                    // 'imageStyle:side',
                    'imageStyle:alignLeft',
                    'imageStyle:alignCenter',
                    'imageStyle:alignRight',
                    '|',
                    'resizeImage', 
                    '|',
                    'toggleImageCaption',
                    'imageTextAlternative',
                    'linkImage'
                ],

            },
            table: {
            contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells',
            'tableCellProperties',
            'tableProperties'
            ]
            },
            language: 'zh-cn'
    } )
        .then( editor => {
            window.editor = editor;
        } )
        .catch( error => {
            console.error( 'There was a problem initializing the editor.', error );
        } );
</script>

</body>
</html>

op898
关注
  • 8
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CKEditor使用，前端代码及后台处理代码
qq_14853875的博客
07-19 589
CKEditor使用，前端代码及后台处理代码
在layui中使用CKEditor，前端代码及后台处理代码
qq_14853875的博客
08-02 3089
在layui中使用CKEditor，获取CKEditor的内容，设置CKEditor的内容，设置CKEditor为只读
在vue中使用CKEditor5的巨坑！调整图片大小
qq_36802917的博客
03-05 6705
在vue中使用ckeditor5的时候，发现图片没有调整大小的框，一开始以为是没有什么属性，找了半天原来要下载插件。 没有插件那就下载，然后我下载了@ckeditor/ckeditor5-image之后，在配置里面引入，居然报错了？？ 后面搜索了很多才发现这个巨坑！ 当我们使用build版本时，可能已经安装了@ckeditor/ckeditor5-image 但是没有引入ImageRes...
cpeditor配置刷题环境简明教程（适用于在线笔试、leetcode、牛客）
Liber-coder的博客
08-08 7337
安装过程 安装C++14(G++5.4.0)环境 进入这里，MinGW-w64 - for 32 and 64 bit Windows 稍微往下翻一下，找到MinGW-W64 GCC-5.4.0的x86_64-posix-seh安装。为什么是这个版本？因为牛客支持的两种C++编译器分别为C++14(G++5.4.0)和C++11(glang 3.9)，这里保证与牛客相同 解压MinGW压缩包到你想安装的路径。添加bin目录到环境变量path中： 注意： win10以下的操作系统需要重启，以生效更改。
CP Editor 使用
Harris-H的博客
02-23 5855
CP Editor 使用 前言 写这篇，只是桌面太满，需要clear一下我的杂记。 1.Competitive Companion 插件配合直接抓取测试数据 在题目界面点击 会抓取六个题目的测试数据同时生成6个cpp文件。 如果某个题目界面点击，则只会该题目的cpp文件和测试数据。 2.格式化代码 ctrl+shift+I (需要配置clang-formate.exe) 3.用镜像自定义提交 使用镜像和Competitive companion 爬下来cpp是没有提交的，需要右键cpp然后设置Cod
【CKEditor5】CKEditor5 添加代码高亮 (Prismjs)
此人太懒，没有任何简介
12-14 1061
CKEditor5 添加代码高亮 (Prismjs)
前端使用ckeditor
菲宇运维
10-18 748
一、导入js文件 <script src="js/plugins/ckeditor/ckeditor.js"></script> 将下载的文件导入相应html目录下 二、html代码 <textarea rows="20" class="form-control" name="liasionContent" id="liasionContent"><...
ckeditor4 使用总结
猎人在吃肉
09-21 6868
ckeditor4 定制工具栏 增加字体 配置主题皮肤 配置 默认字体大小和样式 ckeditor4 中，config.js 配置文件不生效的解决方法 ckeditor4 窗口根据内容高度，动态变化 ckeditor4 内容没有同步到 textarea 中 ckeditor4 图片上传相关的配置 删除 图片上传时的高级配置 tab 项 指定图片上传地址 、清除预览区的文字 springboot2.x 实现后台保存图片 图片上传成功和失败时的返回格式 ckeditor4 只显示内容，工具栏不显示，隐藏
在Django前台使用ckeditor富文本编辑器
weixin_44304678的博客
12-14 2592
1.首先安装CKEditor富文本编辑器 pip install django-ckeditor pip install pillow 第二行命令安装图形处理模块 2.在settings.py里面注册富文本编辑器 INSTALLED_APPS = [ # 三方应用程序 "ckeditor", "ckeditor_uploader", ] 3.配置富文本编辑器 在settings.py里面加入下面代码 MEDIA_URL = "/media/" CKEDITOR_UPLOAD_PA
ckeditor-前端组件
08-09
**ckeditor-前端组件** 在前端开发领域，组件化已经成为一种重要的设计模式，它使得代码更加模块化、可重用和易于维护。`ckeditor`就是这样一个...熟练掌握CKEditor的使用和配置，可以提升前端开发的效率和用户体验。
ckeditor5富文本框使用demo.zip
03-18
在这个"ckeditor5富文本框使用demo.zip"压缩包中，我们可以找到一个关于如何在前端项目中集成和使用CKEditor 5的示例。 首先，让我们深入理解CKEditor 5的核心特性： 1. **富文本编辑**：CKEditor 5支持各种文本...
ckeditor4源代码（非压缩版）
05-26
10. **文档资源**：源码通常会带有文档，可能在`docs`目录下，这对于理解和使用CKEditor 4的API非常有帮助。 通过深入研究这些知识点，你可以学习到如何自定义CKEditor 4的功能，优化性能，甚至为社区贡献新的特性...
asp.net 使用ckeditor5富文本编辑器包含图片上传全部代码
03-11
在ASP.NET应用中，CKEditor5是一款常用的富文本编辑...主要涉及了前端CKEditor5的配置和后端C#控制器处理图片上传请求。通过这些步骤，开发者可以为用户提供一个功能完备的富文本编辑体验，同时支持图片的上传和显示。
富文本编辑器ckeditor使用手册
12-08
在“富文本编辑器ckeditor使用手册”中，你将找到关于如何安装、配置、使用以及自定义CKEditor的各种指导。以下是一些关键知识点的详细说明： 1. **安装CKEditor**：首先，你需要从CKEditor的官方网站下载编辑器的...
47、PHP实现机器人的运动范围
weixin_44010641的博客
07-24 830
地上有一个m行和n列的方格。一个机器人从坐标0,0的格子开始移动，每一次只能向左，右，上，下四个方向移动一格，但是不能进入行坐标和列坐标的数位之和大于k的格子。但是，它不能进入方格（35,38），因为3+5+3+8 = 19。请问该机器人能够达到多少个格子？当k为18时，机器人能够进入方格（35,37），因为3+5+3+7 = 18。
【Android】广播机制
2301_79977698的博客
07-24 785
在Android中，广播（Broadcast）是一种消息，任何应用程序都可以发送广播消息，任何应用程序也都可以接收广播消息。广播通常用于通知应用程序某些事件的发生，比如系统启动、电量低、网络状态改变等。Broadcast Receiver（广播接收器）：用于接收广播消息并响应这些消息的组件。Intent（意图）：用于传递广播消息的数据结构。标准广播（Normal Broadcast）是完全异步的，所有接收器几乎同时接收广播，并且接收顺序是不确定的。
Android 通过接收广播int值来控制GPS开关
最新发布
qq_46687516的博客
07-25 709
Override} else {try {
Android笔试面试题AI答之Android系统与综合类（1）
学无止境，止于至善
07-25 881
答案仅供参考，来着文心一言、Kimi.ai。
纯前端使用ckeditor
05-25
CKEditor是一款功能强大的富文本编辑器，可以轻松地将其集成到...以上就是纯前端使用CKEditor的基本方法。您可以使用CKEditor的丰富功能来创建各种不同类型的文本编辑器，如带有图像上传和表格编辑功能的编辑器等等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值