如何使用CKeditor保存添加的属性
CKEditor是一个强大的富文本编辑器，可以用于在网页应用程序中创建和编辑内容。要保存添加的属性，可以按照以下步骤进行操作：
- 集成CKEditor：首先，将CKEditor的库文件引入到你的网页中。你可以从CKEditor官方网站下载最新版本的库文件，并将其解压到你的项目目录中。
- 创建编辑器实例：在网页中创建一个textarea元素，并使用CKEditor的API将其转换为富文本编辑器。你可以通过指定一些配置选项来自定义编辑器的外观和功能。
- 添加属性：使用CKEditor的API，你可以在编辑器中添加属性。可以通过以下步骤实现：
a. 获取编辑器实例：使用CKEditor的API获取编辑器的实例对象。
b. 获取编辑器内容：使用实例对象的方法，如getData()，获取编辑器中的内容。
c. 添加属性：将要添加的属性以HTML标签的形式插入到编辑器内容中。例如，可以使用<div>标签来包裹要添加属性的内容，并在<div>标签上添加属性。
d. 更新编辑器内容：使用实例对象的方法，如setData()，将更新后的内容重新加载到编辑器中。
- 保存属性：一旦你添加了属性并更新了编辑器的内容，你可以将编辑器中的内容保存到服务器或其他存储介质中。你可以使用前端技术，如AJAX，将编辑器内容发送到服务器端进行保存。
总结：
使用CKEditor保存添加的属性的步骤如下：
- 集成CKEditor，引入库文件。
- 创建编辑器实例，将textarea元素转换为富文本编辑器。
- 使用CKEditor的API获取编辑器实例，获取编辑器内容。
- 使用HTML标签添加属性到编辑器内容中。
- 使用CKEditor的API更新编辑器内容。
- 保存编辑器内容到服务器或其他存储介质中。
腾讯云相关产品推荐：
腾讯云提供了丰富的云计算产品和服务，以下是一些与CKEditor相关的产品推荐：
- 云服务器（CVM）：提供可扩展的虚拟服务器，用于部署和运行网页应用程序。 产品链接：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务，用于存储和管理编辑器内容。 产品链接：https://cloud.tencent.com/product/cdb_mysql
请注意，以上推荐的产品仅供参考，你可以根据实际需求选择适合的腾讯云产品。
相关·内容
xPage (Domino8.5.3)中的内置CKEditor总是将dir属性添加到文本容器的标记中，比如P或H2。
例如：
<p dir="ltr">test</p>
我可以从富文本元素设置或CKEditor自定义配置中更改方向"ltr“或"rtl”，但我根本无法删除此属性。
如果我使用简单的CKEditor，那么在我特别设置contentsLangDirection属性之前，这个属性是不存在的。
所以看起来xPage在任何情况下都会强制设置这个属性。
有人知道如何从xPage的内置CKEditor中删除它吗？
浏览 4提问于2012-09-06得票数 0
如何根据单击按钮/链接来启用或禁用div上的ckeditor.inline。
这就是我在jquery中实现它的方法，但使用angular无法解决。
$('.toggle-edit').click(function(e){
var id_editedDiv = $(this).data('editTarget');
var editedDiv = '#' + id_editedDiv;
if( $(editedDiv).attr('contenteditable') == 'true' )
{
浏览 0提问于2016-08-18得票数 0
我需要自定义CKEditor的工具栏与自定义按钮集。
我已阅读了这些问题/答案，并联系了有关资料来源：
如果您总是执行完整的页面刷新，它们所做的工作是有效的。但是，如果您对页面的某个部分进行了部分刷新--包括至少一个富文本控件(CKEditor版本4.3.2) --那么在之后，局部刷新 CKEditor会选择一个像'Full'这样的工具栏(我不知道，但我认为默认类型)作为工具栏类型来显示。
问题是整个dojo定制的IBM事情。它使您的toolbar dojo属性在部分刷新后被“遗忘/忽略”(但它仍然被设置！)。
任何有经验/知识的人，如何最好地解决这个问题，
浏览 8提问于2014-11-18得票数 1
import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styl
浏览 9提问于2018-01-01得票数 3
2回答
为此搜索了很多东西。我一直在尝试在CkEditor中添加占位符文本，使用的是它的一个插件-- ckeditor的“配置助手”插件。
如何在ckeditor中将默认占位符文本赋予文本区域？
浏览 3提问于2015-09-01得票数 3
3回答
我正在使用CKEDITOR插件来提供格式工具栏。所以我猜上面是由CKEDITOR提供的内置消息。
在我的web应用程序中，我希望用户在访问页面时使用空白文本区。CKEDITOR允许用户从上次编辑继续。如何禁用此功能？
我使用的是一个“可满足”的div。
浏览 4提问于2013-12-29得票数 2
1回答
我是使用ckeditor的新手。我已经安装了ckeditor。在编辑器中，显示在我的HTML页面中，我可以在那里写文章。但是我不知道如何保存它并在我的HTML页面中显示文章。下面是我的html代码：
<form method="post">
<p>Editor:
<textarea class='ckeditor' id="ckeditor" name="ckeditor" row="10" cols="80">
</textarea>
<s
浏览 0提问于2014-02-09得票数 0
5回答
我尝试以这种方式捕获CKEditor的保存按钮上发生的单击事件
var element = CKEDITOR.document.getById('CKEditor1');
element.on('click', function (ev) {
//ev.removeListener();
alert('hello');
return false;
});
但这不是working.when，我点击了CKEditor的保存按钮，然后出现了一个回发。如果可能的话，请帮助我正确的代码样本，以捕获点击事件发生
浏览 1提问于2013-08-20得票数 10
2回答
我在我的网站中使用CKEditor，这里我想删除页脚标签。我该怎么做呢？我正在使用CKEditor添加一些有用的内容。它工作得很好，但我不想显示页脚标签。它显示了p和div标签。如何从CKEditor中删除页脚p和div标记
浏览 2提问于2019-06-01得票数 1
我一直在使用CKEditor在我的开发网站上输入内容，但现在我担心移动到活动站点会抹掉我对这些文章所做的所有样式。也许这是个愚蠢的问题，因为我还没有在网上找到任何关于这个话题的东西。如果我在活动站点上安装了CKEditor模块，当我在那里传输我的内容时，它们的所有字体/颜色/样式/等等会被保留吗？提前感谢
浏览 0提问于2015-08-26得票数 0
如何通过wysiwyg模块向ckeditor添加fmath编辑器插件。链接(http://www.fmath.info/plugins/drupal/doc.jsp)提供了ckeditor模块的文档，但它没有解释wysiwyg模块的步骤。
浏览 0提问于2012-02-01得票数 0
10回答
您能提供一个关于如何使用CKEditor工具栏中的保存按钮通过AJAX设置CKEditor进行保存的示例吗？
我对创建一个CKEditor AJAX保存页面很感兴趣，但在他们的网站上没有看到任何示例。
谢谢!
浏览 0提问于2009-12-24得票数 6
3回答
我在我的7项目中使用了CKEditor 5。我跟踪了正式文档，并在编辑器内容使用'ChangeEvent'.更改时检索了数据。现在，只要单击“保存”按钮，我就想检索数据。
我在CKEditor的工具栏中没有保存按钮，如何添加它？
当我单击“保存”按钮时，如何检索数据？
我希望在表单中使用CKEditor，以便在单击submit按钮时检索数据。如何做到这一点？
以下是html代码：
<ckeditor [editor]="Editor" (change)="onChange($event)" >
</cke
浏览 0提问于2018-12-06得票数 4
回答已采纳
我正在用CKEditor存储一个colum数据。它将其存储在HTML标记的旁边。
当我检索要在CKeditor中显示的内容时，它以正确的格式正确地呈现。但是，当我打算在HTML标记之外显示内容时，例如在主页上显示保存的内容时，它会使用html标记来呈现它。
示例：
如何将其显示在正确的内容检查图像中，以显示其呈现方式
我保存Ckeditor内容的打字记录：
import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "
浏览 0提问于2020-02-23得票数 0
回答已采纳
3回答
如何使用jQuery适配器动态更改CKEditor的背景图像？我有一个图像列表，每当用户单击其中一个图像时，我希望用该图像更改编辑器区域的背景图像。我尝试的是：
$('#editor_content').ckeditor();
var editorInstance = $('#editor_content').ckeditor().editor;
$('img').click(function(ev){
editorInstance.setData('<style type="text/css"> body{
浏览 0提问于2015-01-28得票数 1
我正在使用Liferay版本6.1.20，但遗憾的是，在这个版本中，ckeditor4.0还没有实现。
有没有办法手动升级CKEditor？或者这是一个我不应该开始的工作，因为它的工作量很大？
我想手动更新CKEditor，因为我挂在上面的插件与旧版本的CKEditor不兼容。
我一直在网上找找看。但据我所知，目前还没有任何信息。我很想知道这是不是在试着用词？
浏览 2提问于2013-03-22得票数 0
回答已采纳
我正在使用ckeditor编辑我的html文本，这里我想限制ckeditor中的可编辑区域，我知道如何为ckeditor提供宽度和高度，但我不知道如何为ckeditor编辑区提供宽度和高度。
假设如果我给出700px的宽度，那么用户应该只输入最多700px的文本，然后它应该到达下一行。
我给出了如下内容
CKEDITOR.replace( 'divedit', {
toolbar: 'Basic',
uiColor: '#9AB8F3',
width: '700px',
height:'20
浏览 1提问于2014-01-27得票数 1
8回答
我正在尝试创建一个多步骤的表单，其中用户将填写在page1.php上的表单，并通过提交可以转到page2.php到下一个‘表单’。最简单的方法是什么？
下面是我的代码：
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
?>
<form id="pdf" method="post">
New project name:<input type="text" name="pr_name" placeholder="
浏览 0提问于2011-08-25得票数 1
回答已采纳
我使用以下循环将操作绑定到每个CKEDITOR实例上的焦点事件：
for (var i in CKEDITOR.instances) {
CKEDITOR.instances[i].on('focus', function() {
my_custom_function(this.name);
});
}
我想要更改这一点，使其仅在特定DOM元素内出现的CKEDITOR实例上运行。例如，使用jquery表示法，DOM元素可能是：
$("#container")
有什么想法？谢谢!
浏览 0提问于2011-11-10得票数 1
我使用bower来管理我的js包。我将CKEditor安装到了bower目录中，它工作得很好。
问题是:我应该如何向ckeditor添加外部插件？我在这里读到，通过使用extraPlugins属性，这是可能的。但显然我应该以某种方式下载插件并将其添加到ckeditor/plugins文件夹中。我对bower非常陌生，但据我所知，我不应该手动将任何文件或文件夹添加到bower目录中。相反，我应该使用bower install plugin_name或类似的东西。
所以，如果我简单地写成：
CKEDITOR.replace('pageContent', {
浏览 0提问于2014-08-19得票数 5
现在，使用，我可以在config.js中添加占位符属性。但是，由于我要添加到config.js中，这意味着所有实例都有相同的占位符文本，对吗？
好吧，我不希望我的用户的所有实例都有相同的占位符文本，因为我也注意到他还说：
该值可以在配置中设置，也可以作为替换元素的属性设置。
我想这意味着我们可以把“打字.”作为ckeditor1和“Blabla”的占位符文本作为ckeditor2的占位符文本。我该怎么做？还是他不是这个意思？
我尝试过几种方法，包括
var ckeditor = CKEDITOR.replace('ckeditor1');
ckedito
浏览 4提问于2015-02-03得票数 5
回答已采纳
我在ckeditor中添加了到img上下文菜单的链接，使用此代码。
如何获得有关图像的信息，在哪个用户上单击？例如，图像的id。或者这条路。以处理所选图像。
浏览 0提问于2017-02-02得票数 7
回答已采纳
我正在尝试将CKEditor与我的应用程序集成，我正在使用以下方法。
<textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>
<script type="text/javascript">
CKEDITOR.replace('editor1');
</script>
在JavaScript中，我使用下面的代码来设置和获取数据给ckeditor
function
浏览 2提问于2015-07-23得票数 1
回答已采纳
2回答
我想允许基本的<strong>，<em>和列表与ckeditor。
然而，我不想要<br>和段落标签，因为我nlb2我的内容，我希望它基本上是裸体。
通过谷歌，我发现我可以做到：
$(function() {
$('#description').ckeditor({
enterMode : CKEDITOR.ENTER_BR,
shiftEnterMode: CKEDITOR.ENTER_P,
toolbar:[['Bold', 'Italic',
浏览 1提问于2010-09-16得票数 2
回答已采纳
我和Django一起工作。要将富文本编辑器与我的站点集成，我使用来自的django-CKEditor
虽然它在管理面板的工作非常好，我想使用它在前端形式，让我的网站用户通过CKEditor编辑自己的文本。但我想不出.
这个django-ckeditor真的只能在管理面板中使用吗？如果它不是真的，如何使它在前端可用？或者其他富文本编辑器的建议，我可以在前面使用吗？
非常感谢！
浏览 1提问于2015-02-03得票数 0
回答已采纳
如何设置ckeditor grails使用数据库上传文件？
我只想使用数据库，因为我不能访问文件系统上传文件。
浏览 0提问于2013-02-15得票数 1
1回答
我正在尝试为CKEditor 4设置默认字体和字体大小 在CKEditor 4 documentation https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-font_style中找到此文件 例如，我想将默认字体更改为"Comic Sans MS“，将字体大小更改为"48” 像这样试过，但不起作用 ckeditorConfig.font_style = {
element: 'span',
styles: { 'font-family':
浏览 123提问于2020-08-25得票数 1
回答已采纳
2回答
我已经编写了自己的自定义插件，用于在CKEDITOR中插入图像。我禁用工具栏中的图像按钮。我使用editor.insertHtml()函数插入自定义插件中的图像。当我从工具集中删除标准图像按钮时，它将禁止在CKEDITOR框中插入图像标记。除<img/>标记外，所有其他html标记都被接受。
这是我的配置(没有config.toolbar中的“图像”)：
CKEDITOR.editorConfig = function( config )
{
CKEDITOR.plugins.addExternal('insert_blank','http://localh
浏览 4提问于2013-05-10得票数 1
回答已采纳
1回答
我是Angular4的新手
我想将CKeditor集成到Angular4中
因为我遵循 url，但是它是用于角2，而不是在角4中工作。
我在那儿查过了
System.config({
"map": {
"ng2-ckeditor": "npm:ng2-ckeditor",
},
"packages": {
"ng2-ckeditor": {
"main": "lib/index.js",
"defaultExtension": "js&
浏览 6提问于2017-09-01得票数 2
回答已采纳
我正在使用CKEditor 5作为React应用程序中的文本编辑器。我有一个页面上的按钮，当被点击时，将插入文本“按钮被点击”内的CkEditor。我如何才能做到这一点？我知道CKEditor有setData方法，但是我的按钮如何才能访问CKEditor呢？
我的ckeditor
<CKEditor editor={ClassicEditor} />
我的按钮
<Button onClick={this.handleClick}>Click Me</Button>
handleClick
handleClick = e => { /* setData
浏览 0提问于2020-03-21得票数 1
1回答
我有一个网络项目，允许用户使用CKEditor，这就是为什么我需要保护我免受任何XSS的攻击。如何尽量减少使用XSS“攻击”的风险？
我不知道这是否足够，我想不：
strip_tage(Input::get('text'), '<p><a><h1><h2>');
因此，问题是如何在服务器端从CKEditor中清除XSS，以及在CKEditor端需要做什么，哪些插件要删除(因为我删除了源代码插件，也许我也应该删除样式插件？？)？？
浏览 6提问于2013-12-22得票数 1
回答已采纳
我使用CKEditor将我的文本区域转换为wysiwyg。除了通过Ajax调用加载内容之外，所有这些都工作得很好。那我的CKEditor就不加载了。
我一直在寻找解决办法，但却找不到对我有用的办法。
我的Ajax调用基本上如下所示：
$.ajax({
type: "POST",
url: url,
success: function(data) {
$('#content').html(data);
$('.ckeditor').ckeditor();
}
}
浏览 5提问于2012-07-09得票数 5
回答已采纳
我尝试在Ajax选项卡中使用CKEditor，但工具栏没有显示
我将此添加到Web.config <add tagPrefix="CKEditor" assembly="CKEditor.NET" namespace="CKEditor.NET"/>
把这个<CKEditor:CKEditorControl ID="CKEditorControl1" runat="server" Toolbar=""></CKEditor:CKEditorControl>放到我的
浏览 0提问于2011-05-04得票数 1
回答已采纳
我在我的asp.net项目中使用了ckeditor.net动态链接库。
在我的一个母版页页面中，我使用了ckeditor：
<CKEditor:CKEditorControl ID="CKEditor1" BasePath="/ckeditor/" runat="server" AutoGrowMinHeight="120"></CKEditor:CKEditorControl>
然后，我在jquery的所有子目录上通过下面的代码将NewsDetail设置为'disabled‘：
$("Di
浏览 5提问于2014-07-19得票数 0
1回答
我正在为我的ckEditor使用这个HTML：
<textarea data-ck-editor="text" data-ng-model="modal.data.text"></textarea>
指令：
app.directive('ckEditor', [function () {
return {
require: '?ngModel',
link: function ($scope, elm, attr, ngModel) {
va
浏览 6提问于2013-10-30得票数 0
回答已采纳
1回答
从使用ckeditor 4的图像属性中禁用宽度和高度字段
CKEDITOR.replace('<%=txtCkEditor.ClientID %>'，{allowedContent:'img!src，alt;'})；
通过使用上述方法，它只显示宽度和高度隐藏的图像属性，其余控件也显示为可见的false。请建议我从图像属性窗口禁用宽度和高度字段的解决方案。提前谢谢。
浏览 3提问于2016-10-20得票数 0
回答已采纳
每当我调用checkDirty()时，我总是会变成真。运行下面的示例，只需单击“销毁”按钮。
$(document).ready(function() {
CKEDITOR.config.autoUpdateElement = false;
CKEDITOR.on('contentDom', function (event) {
event.editor.resetDirty();
});
CKEDITOR.on('instanceReady'
浏览 1提问于2015-03-12得票数 0
下一个问题就是问题。我下载了CKEditor 4并想导入到我的项目中。它与"index.html“中的CDN链接一起工作，但我希望使用没有外部链接。我的应用程序只能在本地主机上运行，我不想提供它。
我得到的错误消息如下：
未在'“IP...”“/ckeditor_4.5.11/ckeditor.js‘加载脚本，因为在给定'X-Content-Type: nosniff’时不允许使用非脚本MIME类型
因此，当我使用常规的cdn脚本导入时，它工作得很好，但如果我想使用没有外部url的脚本，它就不能正常工作。
not包已经安装，但这无关紧要。
我将此代码导入到我的Index
浏览 12提问于2018-02-13得票数 0
回答已采纳
我安装了彩色按钮模块及其编写器依赖项：
"drupal/colorbutton": "^1",
"drupal-ckeditor-libraries-group/colorbutton": "^4.14",
"drupal-ckeditor-libraries-group/panelbutton": "^4.14",
然后，我启用了模块，配置了Basic HTML文本表单，并将新按钮添加到工具栏中。
但是，我不认为按钮是经过身份验证的用户(管理员或普通身份验证用户)。
我重建了Drupal缓存，清除
浏览 0提问于2020-11-17得票数 -1
回答已采纳
1回答
我将ckeditor嵌入到我的一个pages....but中，我不知道如何在ckeditor中连接某些按钮来执行特定的操作。最重要的是，当单击保存按钮来保存文档时，我该如何判断？
浏览 0提问于2010-06-19得票数 0
回答已采纳
1回答
我想知道如何将具有特定类别的html转换为具有特定样式的html。例如，如果原始的html是<p class="ql-align-center">text</p>，我想将其转换为<p style="text-align: center;">text</p>。我确实看过ckeditor5文档，但我只是迷惑了，因为其中包含了太多的信息。 我这样问的原因是因为我目前正在将我的富文本编辑器从quill更改为ckeditor5。ckeditor5添加了一些类来应用一些样式，而ckeditor5只是内联样式(一些样式可以用类
浏览 36提问于2019-12-09得票数 0
回答已采纳
我在配置CKeditor时遇到问题。我想做“如何允许除...之外的一切”方案在CKEditor中，正如在文档中所写的，我需要在配置中写入：
config.allowedContent = {
$1: {
// Use the ability to specify elements as an object.
elements: CKEDITOR.dtd,
attributes: true,
styles: true,
classes: true
}
};
config.disallowedConte
浏览 0提问于2014-10-23得票数 2
2019.07.19更新：
问题已通过使用
$_REQUEST['editor1']
而不是$_POST'editor1‘。不完全确定原因。希望它能对遇到这个奇怪问题的人有所帮助。
===========================================
问题描述：
我正在将CKeditor集成到我的HTML表单中。Ckeditor已成功显示在表单上，我可以输入一些数据。但是，当我试图发布表单以便存储在数据库中时，我注意到数据库条目缺少所有HTML的左括号和右括号。我试着在网上搜索，但没找到。敬请指教。
我的数据库字段是文本类型。
我用TinyMCE替换了
浏览 1提问于2019-07-18得票数 0
我在我的yii2项目中使用了dosamigos\ ckeditor \CKEditor，我想在配置中更改ckeditor的语言！
我如何解决我的问题？
这是我用_form.php编写的代码
<?php
use dosamigos\ckeditor\CKEditor;
<?=
$form->field($model, 'text')->widget(CKEditor::className(), [
'options' => ['rows' => 6],
// '
浏览 12提问于2017-08-21得票数 0
回答已采纳
1回答
我无法在Selenium中记录CKeditor操作。我在我的测试用例中添加了以下命令，但我的问题是，在我的页面上，我有一个按钮来保存/发送一些数据(也来自ckeditor )，当Selenium单击Save按钮时，ckeditor中的书面数据就消失了。
focus | class=cke_show_borders
typeKeys | class=cke_show_borders | testing content
runScript | CKEDITOR.instances["editor1"].setData('testContent');
有什么帮
浏览 0提问于2013-06-19得票数 4
在我看来，标题是不言而喻的。基本上，假设用户填写ckeditor richtextfield，如下所示：
#app/models.py
from django.db import models
from ckeditor.fields import RichTextField
class App_Model(models.Model):
content = RichTextField()
现在让我们假设一个用户离开了页面。内容将不会被保存。我希望保存内容，无论是cookies还是服务器，这样用户就可以返回并从他离开的地方开始。我如何做到这一点，最好是以最简单的方式。
谢谢。
浏览 25提问于2021-02-27得票数 3
1回答
CKEditor输出规则
、、、
有没有办法为ckeditor对html所做的更改添加规则？
就像我希望使用<br />而不是以<p>$nbsp;</p>的形式输出它一样，不要在<p>标记中包装<style></style>，让它不修改空白，并在放入时保留所有回车返回。
最重要的是，我正在寻找某种方式来允许添加php。我正在使用的CMS需要一些页面上的php。我编写了所有的代码，但客户端能够进入并编辑文本，但她不知道html，因此ckeditor，有时会将带有php的页面更改为ckeditor，这样就完全混淆了代码。
有什么办法吗？
浏览 2提问于2011-07-11得票数 0
3回答
我正在使用CKEditor在一个FOS\CKEditor-bundle 1.2的symfony项目中。我希望包含一个CKEditor的整个部分在焦点上有一个边框，类似于您如何在Stackoverflow上写或回答一个问题。使用一个更老的和一个JSFiddle，我已经走了这么远：
Js
// Set focus and blur listeners for all editors to be created.
CKEDITOR.on( 'instanceReady', function( evt ) {
var editor = evt.editor,
b
浏览 0提问于2018-11-19得票数 0
回答已采纳
我想在DynamicData网站上使用CKEditor。我找到的所有示例都是旧版本的CKEditor。
那么如何将CKEditor与asp.net dyamica数据网站集成呢？
任何帮助都将不胜感激。
İY
浏览 0提问于2012-06-07得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
