标签: ckeditor

我正在使用 CK 编辑器并使用 jQuery 实现。我在 ckeditor config.js 中隐藏了链接选项，这样工具栏中就不会出现链接选项。当我输入 URL 或链接时，在单击事件中，它将链接（网页）加载到我的页面/div 中。我还通过删除 href 来限制它。现在，在 URL 上双击，它会显示一个链接对话框，其中包含“链接类型”、“协议”、“URL”和“确定取消”按钮等选项。现在我想限制对话框。即：我不想弹出对话框。双击应该像在普通文本中一样工作。有人可以帮助我吗？我也尝试过“config.removeDialogTabs = 'image:advanced;link';” “config.removeDialogTabs = '链接：上传；图像：上传'；”

CKEDITOR.on('dialogDefinition', 函数 (ev) {

            var dialogName = ev.data.name;
            var dialogDefinition = ev.data.definition;

            switch (dialogName) {
                case 'image': //Image Properties dialog      
                    dialogDefinition.removeContents('advanced');
                    break;
                case 'link': //image Properties dialog          
                    dialogDefinition.removeContents('advanced');
                    break;
            }
        });

它不起作用。

我在引导模式中使用 ckeditor。ckeditor 中的数据应在 ajax 调用后动态加载。我无法在 ckeditor 中加载数据。代码 ：

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">Thank you Message</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-name" class="control-label">Recipient:</label>
                <input type="text" class="form-control" id="recipient-name">
              </div>
              <div class="form-group">
                <label for="recipient-name" class="control-label">Subject:</label>
                <input type="text" class="form-control" id="subject">
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">Message:</label>
                <?php $ckeditor->editor('message', '', array('id'=>'editor1')); ?>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn …

CKEDITOR与<textarea>标签一起使用时，它不起作用。

 <textarea id="editor1" name="description" class="form-control" cols="10" rows="10" required></textarea>

 <script>
      CKEDITOR.replace('editor1');
 </script>

任何建议？

我可以从工具栏中删除每个按钮，但不能删除这个图像选择器按钮。

我尝试使用 removePlugins: 'pickimage,image' 和 removeButtons: 'Image' 以及配置中的更多变化来删除它，我可以在其中删除其他按钮。

任何提示或帮助表示赞赏。

这个按钮：

我的页面中有一组组件，如下所示：

BlogEntryPointComponent包含NewBlogComponent和BlogEditComponent

两者NewBlogComponent并BlogEditComponent使用以下代码：

import BlogEditor from '../../../../js/ckeditor/blogeditor.ts'

export default {
  components:{
    ckeditor: BlogEditor.ckeditor
  },
  data(){
    return{
       editor: BlogEditor.editor,
       editorConfig: BlogEditor.config
    }
  },
  ...

所以现在我安装了，BlogEntryPointComponent但问题是这导致了错误ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated

该错误页面的帮助谈论使用两种不同的构建在一个页面上; 我想我在这种情况下......但这是两个不同的独立组件；怎么会这样 ？

所以我尝试按照文档的建议从源代码构建编辑器，但我遇到了同样的问题。

编辑器是两个组件中相同的导入文件。

这是编辑器：

import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapterPlugin from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';
import LinkPlugin from …

在 CKEditor5 中，我正在创建一个插件来插入一个span元素来显示工具提示。这个想法是显示一个带有（脚）注释的工具提示，而元素本身将显示一个增量数字。在 CKEditor4 我做了这样的事情：

CKEDITOR.dialog.add( 'footnoteDialog', function( editor ) {
    return {
        title: 'Footnote Properties',
        minWidth: 400,
        minHeight: 100,
        contents: [
            {
                id: 'tab-basic',
                label: 'Basic Settings',
                elements: [
                    {
                        type: 'text',
                        id: 'content',
                        label: 'Content of footnote',
                        validate: CKEDITOR.dialog.validate.notEmpty( "Footnote field cannot be empty." )
                    }
                ]
            }
        ],
        onOk: function() {
            var dialog = this;

            var footnote = editor.document.createElement( 'span' );
            footnote.setAttribute('class', 'footnote');
            footnote.setAttribute('data-toggle', 'tooltip');
            footnote.setAttribute( 'title', dialog.getValueOf( 'tab-basic', 'content' ) );
            footnote.setText('[FN]');

            editor.insertElement( footnote …

编辑：我在 Github 上打开了一个问题：https : //github.com/ckeditor/ckeditor5-editor-classic/issues/98

我花了大约 2 天的时间试图弄清楚这一点。

编辑器工作正常，但是当我尝试添加图像时出现错误：

filerepository-no-upload-adapter：未定义上传适配器。阅读更多：https : //ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

我浏览了几个小时的文档，但我找不到解决方案。您可以在我尝试遵循的文档中看到以下步骤。

这是我的代码：

import React, { Component } from 'react'; 
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

console.log(ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName ));

class EditorComponent extends Component {
    constructor(props) {

      super(props);

      this.state = {
        id: props.id,
        content: props.content,
        handleWYSIWYGInput: props.handleWYSIWYGInput,
        editor: ClassicEditor
      }

    } 

    render() {
        return (
            <div className="Editor-content">
                <CKEditor
                    editor={ this.state.editor }
                    data={this.state.content}
                    onInit={ editor => {
                        // You can store the "editor" and use …

我正在保存媒体（视频）文件作为我从 ckeditor5 媒体选项收集的数据的一部分，它工作得很好。在另一个页面中请求相同的已保存媒体文件时，我无法显示它。我将如何显示此媒体（视频）数据

数据与 ckeditor 生成的 html 标签一起存储，因此在我v-html用来显示其他内容（例如<p></p>,<h1></h1>等）的模板上，但未显示视频文件。

在查询数据时，这是它的格式

"<figure class=\"media\"><oembed url=\"https:\/\/www.youtube.com\/watch?v=OZo_NsIFIdU\"><\/oembed><\/figure>"

这就是我在使用v-html...任何想法时遇到的问题？提前致谢。

我想在我的反应项目中实现 CKEditor。但是，我在尝试加载它时收到一个错误。我一直在关注所有官方文档。我不知道为什么，无论如何这是我的代码

import React from 'react';

class MyEditor extends React.Component {
    state = {loading: true};

    componentDidMount() {
        this.CKEditor = require("@ckeditor/ckeditor5-react");
        this.ClassicEditor = require("@ckeditor/ckeditor5-build-classic");
        this.setState({ loading: false }); 
    }

    render() {
        return ({this.CKEditor && (<this.CKEditor editor={this.ClassicEditor} data="<p>Hello from CKEditor 5!</p>"
                onInit={ editor => {
                    // You can store the "editor" and use when it is needed.
                    console.log( 'Editor is ready to use!', editor );
                } }
                onChange={ ( event, editor ) => {
                    const data = editor.getData();
                    console.log( { event, editor, …

我已经实现了一个自定义数学插件并将其集成到 ck5 中。这个插件将数学乳胶转换为图像方程，我可以使用以下代码将转换后的数学方程图像渲染到 ck5 编辑器中。

editor.model.change(writer => {
  const imageElement = writer.createElement('image', {
    src: data.detail.imgURL
  });
  editor.model.insertContent(imageElement, selection);
});

仍然在这里一切正常。当我尝试将图像标签中的原始乳胶方程值存储为自定义属性时（属性名称为data-mathml）。它去除了自定义属性。所以我浏览了文档并尝试但无法添加自定义属性。

下面是我的代码：

class InsertImage extends Plugin {

    init() {
        const editor = this.editor;
        const view = editor.editing.view;
        const viewDocument = view.document;

        // Somewhere in your plugin's init() callback:
        view.addObserver( ClickObserver );

        editor.ui.componentFactory.add('insertImage', locale => {
            const view = new ButtonView(locale);
            view.set({
                label: 'Add Equations',
                withText: true,
                tooltip: true
            });

            // Callback executed once the image is clicked.
            this.listenTo(view, 'execute', …