javascript实现可编辑样式的文本

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript实现可编辑样式的文本相关的知识,希望对你有一定的参考价值。

怎么样可用做一个可以自己设置样式的输入框
就是输入框里可以加粗选择文本,和颜色就直接要网页上就可以看到效果了
就像这里的效果一个
麻烦各位大侠 说明这个的原理
就简单的代码演式更好
先在此感谢了
我学过javascript

你要的是所见即所得html编辑器,简单来说需要几个基本步骤:

1,需要一个可以编辑同时又可显效果的编辑框。textarea不行,它只能用来输入纯文本,不能显示颜色、斜体之类的文字样式,就像记事本。
你可以使用iframe来实现,修改iframe的designMode属性使其可以被编辑。

<iframe id="myEditer" width="100%" height="150px"></iframe>
<script>myEditer.document.designMode = 'on';</script>

这样你就可以在这个iframe区域里写字了。

2,选中要添加样式的文字。通常我们用WORD编辑一段文字的样式时,一般是先打字,再编辑样式。所以你需要一个选中要处理文本的方法。JS的selection.createRange()可以选中文本,返回一个对象,你可以通过访问该对象的text属性得到被选中的文本。

<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" onclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold()
var sel = myEditer.document.selection.createRange();
alert(sel.text);

</script>

3,改变被选中文本的样式。selection.createRange()选中文本,返回一个对象,该对象有一个方法execCommand(),可以用来改变被选中文本的样式。

<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" onclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold()
var sel = myEditer.document.selection.createRange();
//alert(sel.text);
sel.execCommand("Bold")

</script>

execCommand()的常用用法:
字体--宋体、黑体、楷体等
execCommand("fontname","",字体)
字号--字号大小
execCommand("fontsize","",字号)
加重
execCommand("Bold")
斜体
execCommand("Italic")
下划线
execCommand("Underline")
删除线
execCommand("StrikeThrough")
居左
execCommand("JustifyLeft")
居右
execCommand("JustifyRight")
居中
execCommand("JustifyCenter")
剪切
execCommand("Cut")
拷贝
execCommand("Copy")
粘贴
execCommand("Paste")
取消操作--IE5.0以后可以无限取消
execCommand("Undo")
重复操作
execCommand("Redo")

把上面的每个用法用按钮来实现,你就已经完成了一个简单的可视文本编辑器。
参考技术A 文本框里面的文本都有其属性的,就是input的style,你只需把你需要的设置成变量就行了,然后通过js控制

另一个简单的方法><B color="red">Hello, world</B>
<b>是加粗的,把不是文本框的文本放中间

SwiftUI 中的多行可编辑文本字段

【中文标题】SwiftUI 中的多行可编辑文本字段【英文标题】:Multiline editable text field in SwiftUI 【发布时间】:2019-10-05 19:08:39 【问题描述】:

我希望在 macOS 的 Swift UI 中创建一个可编辑的多行文本框。我想创建一个语法高亮文本编辑器,所以它会是多行的,并且可以在所有行中更改样式。这在当前状态下的框架是否可行?我在网上几乎找不到任何关于它的文档。

【问题讨论】:

看起来 SwiftUI 现在在这里有一个 TextEditor 组件:developer.apple.com/documentation/swiftui/texteditor 但它不支持在整个行中更改样式,例如颜色 【参考方案1】:

它很有用,这是我第一个使用 SwiftUI 获得 NSTextView 的解决方案:

import SwiftUI
import os

let uiLog = OSLog(subsystem: "com.visual-science.CryptiK", category: "UI")

class  EditorCoordinator : NSObject, NSTextViewDelegate 
  let textView: NSTextView;
  let scrollView : NSScrollView
  let text : Binding<NSAttributedString>

  init(binding: Binding<NSAttributedString>) 
    text = binding

    textView = NSTextView(frame: .zero)
    textView.autoresizingMask = [.height, .width]
    textView.textStorage?.setAttributedString(text.wrappedValue)
    textView.textColor = NSColor.textColor

    scrollView = NSScrollView(frame: .zero)
    scrollView.hasVerticalScroller = true
    scrollView.autohidesScrollers = false
    scrollView.autoresizingMask = [.height, .width]
    scrollView.documentView = textView

    super.init()
    textView.delegate = self
  

  func textDidChange(_ notification: Notification) 
    switch  notification.name 
    case NSText.didChangeNotification :
      text.wrappedValue = (notification.object as? NSTextView)?.textStorage ?? NSAttributedString(string: "")
    default:
      os_log(.error, log: uiLog, "Coordinator received unwanted notification")
    
  



struct DataTextEditorView: View, NSViewRepresentable 
  typealias Coordinator = EditorCoordinator
  typealias NSViewType = NSScrollView

  let text : Binding<NSAttributedString>

  func makeNSView(context: NSViewRepresentableContext<DataTextEditorView>) -> DataTextEditorView.NSViewType 
    os_log(.info, log: uiLog, "%@", context.coordinator.scrollView)
    return context.coordinator.scrollView
  

  func updateNSView(_ nsView: NSScrollView, context: NSViewRepresentableContext<DataTextEditorView>) 
    os_log(.debug, log: uiLog, "%@", context.coordinator.self)
    os_log(.debug, log: uiLog, "%@", text.wrappedValue)
  

  func makeCoordinator() -> EditorCoordinator 
    os_log(.info, log: uiLog, "makeCoordinator")
    let coordinator =  EditorCoordinator(binding: text)
    return coordinator
  


如果像我一样,你只需要编辑一些没有属性的文本,你可以将 NSAttributedString 替换为 String 并针对这种更简单的情况调整代码。

【讨论】:

这里有一点很重要,SwiftUI 结构被创建了很多时间,但是协调器被缓存了一些......然后一切都真正由协调器处理,而不是每次文本时都创建滚动视图+文本视图改变:)【参考方案2】:

您可以在 SwiftUI 中使用多行 TextField(您只需在其上调用 .lineLimit(N) 即可支持多行),但目前不支持具有多种单独样式的文本。 TextField 只有一个字体和样式。

不过,您可以自己滚动它:创建一个提供 NSTextViewNSViewRepresentable 实现并将其绑定到 NSMutableAttributedText 属性。您需要自己处理所有文本视图模型同步和绑定更新,但这当然是可行的。

【讨论】:

以上是关于javascript实现可编辑样式的文本的主要内容,如果未能解决你的问题,请参考以下文章

Draft.js一个用React实现的富文本编辑器

js点击修改按钮后要修改的地方出现文本框怎么弄?

仅将样式应用于可编辑内容中的选定文本 <p>

有没有办法使文本区域部分可编辑? (仅使部分文本可编辑)

contentEditable div 中的粗体选定文本,使用纯 JavaScript,不使用 jQuery 等库

完全可定制的富文本编辑框架——Slate.js