标签: wysiwyg

我正在寻找包含 WordPress 管理区域中所见即所得编辑器的字体样式 CSS 的样式表。目前，在可视化编辑模式下，字体显示为 Georgia。然而，正文复制在前端如果Helvetica。我的客户在看到 Georgia 时感到“困惑”，并且更愿意看到 Helvetica 中所见即所得的副本。

如何将新样式应用到所见即所得编辑器？

我想弄清楚如何创建一个带有 3 个按钮的 textarea：粗体、斜体、下划线。我不能使用任何 WYSIWYG 编辑器，因为我已经测试了其中的大部分，但没有一个适合我的需求。（例如，大多数都是可配置的，并且可以让我选择拥有 3 个按钮，但是当我在字段中粘贴格式化文本时会出现问题。即使我设置了所有内容，例如使用 tinymce，我也会遇到问题。）

我真的需要一个简单的、基本的、带有粗体、斜体、下划线的文本编辑器，如果我在 textarea 中复制和粘贴格式化文本，我不希望它像一个富文本编辑器一样，我希望它像一个真正的textarea，它将自动删除所有格式。人们可能会说我可以使用正确配置的 WYSIWYG 编辑器来做到这一点，但答案是否定的。我花了很多时间试图将文本编辑器配置为仅接受粗体、斜体、下划线，并且在所有著名的 WYSIWYG 编辑器中遇到了许多错误/错误。我不是程序员，我是质量分析师，所以我习惯于发现错误。

关于如何“创建”具有粗体、斜体、下划线功能并且只接受这些功能的文本区域有什么建议吗？（不是富文本编辑器）。使用 Javascript，如果可能，我想避免使用 JQuery。

我正在尝试为特定用途做一些所见即所得的文本框，所以我不需要通常的所见即所得，我需要像 [@ 左右那样插入的按钮。

我想添加一些按钮，将它们插入文本框。

还有其他想法吗？

我现在正在寻找一个月并且变得非常沮丧。

我就是喜欢蟒蛇。

因此，在做了很多基于控制台的工作之后，我还想做一些图形用户界面。

我知道大多数框架（wxpython、glade、tk 等）。

但是：我不想亲自为 GUI 本身编写代码！手工声明每个元素，考虑网格并进行跟踪和错误，以找出需要移动对象多少像素才能将其放置在正确的位置。好吧，对我来说，这听起来就像 20 世纪 90 年代的事，而且一点也不有趣。

因此，简单地说，我正在寻找一种解决方案，允许我以图形方式设计 GUI（所见即所得），并具有基于事件的 Python 代码链接。

几乎所有主要语言都具有这一点：对于 C/C++，它们无疑是最能做到这一点的 IDE/工具。对于 Java，有带有 Wwing 的 Netbeans（我想要的示例；如果 Netbeans 中的 UI 设计器可以输出 jython 代码，那就太理想了，但不行：支持 python，但不支持 UIdesign）。甚至 Mono/Visual Basic 等都有类似的工具。

那么为什么它们对 python 来说毫无意义呢？

PS，请不要发表诸如“如果您是真正的程序员，您可以手动完成以获得更清晰的代码”之类的评论。如果我想要一些非常具体的东西，我会手动编辑它，但是手动设计标准 UI 是浪费时间。

高级文本编辑器似乎在textarea字段中提供文本编辑按钮,可以类似于粗体,斜体,引号和添加图片按钮.我很清楚地知道如何添加文本编辑器(如wysiwig,tinymce一个内等)Content management systems(Drupal的是,Joomla),但我不知道我们是否可以添加那些API为了我们的包含一个文本字段简单的HTML页面.

有没有人知道如何添加这些API？

我正在尝试向 Summernote 编辑器添加字体大小，但没有成功。如果我删除['fontsize', ['8', '9', '10', '11', '12', '14', '18']],并使用，['fontsize', ['fontsize']],我只会得到一种尺寸，即 13。我正在尝试获取尺寸列表。

 <script>
 $(document).ready(function() {
   $('#image_body').summernote({
     toolbar: [
       // [groupName, [list of button]]
       ['style', ['bold', 'italic', 'underline', 'clear']],
       ['font', ['strikethrough', 'superscript', 'subscript']],
       //['fontsize', ['fontsize']],
       ['fontsize', ['8', '9', '10', '11', '12', '14', '18']],
       ['color', ['color']],
       ['para', ['ul', 'ol', 'paragraph']],
       ['height', ['height']]
     ]
   });
});

我编写了一个自定义链接模块来处理内部链接等。该模块还向 A 标记添加了一些类，以便它们可以以不同的方式显示。但一旦再次实例化，Quill 就会删除这些类。

我已经发现您需要一个自定义归因者。但我无法让它工作。
为了保持简单，我创建了一个沙箱（没有我的模块）。

这是代码：

<!-- ... -->
<div id="editor">
  <a href="/test" class="btn">Foo</a>
</div>
<!-- ... -->

import Quill from "quill";
import "quill-paste-smart";

import "quill/dist/quill.snow.css";

const Parchment = Quill.import("parchment");

let LinkClass = new Parchment.Attributor.Class("link", "ql-link", {
  scope: Parchment.Scope.INLINE,
  whitelist: ["btn"]
});
Quill.register({ "attributors/class/link": LinkClass }, true);

new Quill("#editor", {
  theme: "snow",
  modules: {
    toolbar: ["bold", "italic", "underline", "link", "clean"]
  }
});

我想显示一些html从数据库中获取的内容quill editor。似乎html很好（在<p>段落中显示）并且绑定到quill editorvia v-model，但它只是不显示：

<template>
  <div id="text-editor" class="text-editor">
    <quill-editor :modules="modules" :toolbar="toolbar" v-model:content="store.re.body" contentType="html"/>
    <p>{{store.re.body}}</p>
  </div>
</template>


<script setup>
import BlotFormatter from 'quill-blot-formatter'
import store from "../../../js/store";

store.re.body = ''

const modules = {
    module: BlotFormatter,
}

const toolbar = [
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    [{ 'size': ['small', false, 'large', 'huge'] }],
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    [{ 'align': [] }],
    [{ 'list': …

Ember.JS和CKEDITOR之间存在冲突.如果我使用Ember.js,工具栏(模态窗口)不起作用.如果我尝试按下例如粘贴按钮,那么我得到以下错误消息,窗口没有模态窗口.

Uncaught TypeError: Cannot read property 'type' of undefined

如果我删除Ember.Js,那么CKeditor工作正常.

在jsfiddle上查看问题的现场演示 http://jsfiddle.net/HEhMq/13/

这就是我将CKEDITOR嵌入到我的ember模板中的方法:

App.HTMLTextArea = Ember.TextArea.extend({
    didInsertElement: function() {
        this._super();
        var self = this;
        var elementId = self.get('elementId');

        var edit = CKEDITOR.replace( elementId, {
            extraPlugins : 'autogrow',
            autoGrow_maxHeight : 800,
            // Remove the Resize plugin as it does not make sense to use it in conjunction with the AutoGrow plugin.
            removePlugins : 'resize'
        });

        edit.on('blur', function(e) {
                if (e.editor.checkDirty()) {
                        self.set('value', edit.getData() );
                }
        });
    }
});

使用此代码,编辑器可以正常加载,并更新Ember值.只是工具栏按钮不起作用.

有人有同样的问题吗？

所以我有一个来自jqueryscript.net插件的bootstrap wysiwyg编辑器,我试图在字体大小下拉列表中提供更多字体选项.所以我进入JS并找到它的var并将其从小型,中型,大型,大型更改为更精确的尺寸,如10px,11px,12px等.但是当我进入编辑器测试它时,它是仍然使用旧的字体大小,所以当我像5px-10px一样,它是中等大小的..等等.我看了看,看了一眼不太深入的JS并且无法找到它是如何拉动那些为了我的生命!有没有人知道如何在这个下拉列表上正确调整字体大小？谢谢!!

我把代码放到了一个jsfiddle,因为它在这里太长了,但是它无法在它中运行.我不得不删除js中print函数的document.write以使其保存.

http://jsfiddle.net/wfaLa3h0/3/

code here