textEditorDemo:基于swift的一个富文本编辑器

TextEditorDemo

swift:textEditorDemo一个简单的富文本编辑器

一个简单的富文本编辑器

(IPhone 5s Xcode 6.3 swift 1.2)

实现并解决了一些基本功能:

  1. 更改字体大小,粗体,下划线,斜体字。并进行了数据的存储 更多请查看网友StringX的文章:http://www.jianshu.com/p/ab5326850e74/comments/327660#comment-327660
  2. 在TextView中添加照片,以及照片存储
  3. 实现键盘隐藏和弹出
  4. 实现默认提示文字效果:点击进行编辑时提示文字自动消失
  5. 解决改变文字属性,TextView自动滑到顶部问题
  6. 让TextView滑到光标所在点
  7. 利用自动布局 实现点击按钮底部工具栏隐藏到右端 ps:没有动画效果。。
  8. 简单封装了提示文字的功能 更多请查看网友johnlui的开源项目:https://github.com/johnlui/SwiftNotice
  9. 设置点击隐藏导航栏,设置滑动隐藏导航栏

    重要说明:

    这个Demo还有一些BUG:创建新的一个文本就插入图片,保存时会崩掉。给已有文本添加图片就可以正常保存。我在网上到处找了好久也不知道怎么解决,反正我觉得莫名其妙。。如果你解决了希望能共享,谢谢!O(∩_∩)O~~

    导入的两个framework是用于选取照片,以及拍照的

    联系方式:

    邮箱:[email protected] QQ:962429707

    还有我的微博号:我的微博

    by lifubing in CUIT

项目地址

github地址

如果有更新微博上会发消息的:我的微博

1. 更改字体:

//更改字体大小:
self.text.typingAttributes[NSFontAttributeName] = UIFont.systemFontOfSize((CGFloat)(self.fontSize))
//下划线:
self.text.typingAttributes[NSUnderlineStyleAttributeName] = 1
//粗体:
self.text.typingAttributes[NSFontAttributeName] = UIFont.boldSystemFontOfSize((CGFloat)(self.fontSize))
//斜体:
text.typingAttributes[NSObliquenessAttributeName] = 0.5

2. 插入图片:

    /*
    //选取照片
    */
    @IBAction func photeSelect(sender: AnyObject) {
        self.text.resignFirstResponder()
        var sheet:UIActionSheet
        if(UIImagePickerController.isSourceTypeAvailable(UIImagePickerControllerSourceType.Camera)){
            sheet = UIActionSheet(title: nil, delegate: self, cancelButtonTitle: "取消", destructiveButtonTitle: nil,otherButtonTitles: "从相册选择", "拍照")
        }else{
            sheet = UIActionSheet(title:nil, delegate: self, cancelButtonTitle: "取消", destructiveButtonTitle: nil, otherButtonTitles: "从相册选择")
        }
        sheet.showInView(self.view)
    }
    func actionSheet(actionSheet: UIActionSheet, clickedButtonAtIndex buttonIndex: Int) {
        var sourceType = UIImagePickerControllerSourceType.PhotoLibrary
        if(buttonIndex != 0){
            if(buttonIndex==1){                                     //相册
                sourceType = UIImagePickerControllerSourceType.PhotoLibrary
                self.text.resignFirstResponder()
            }else{
                sourceType = UIImagePickerControllerSourceType.Camera
            }
            let imagePickerController:UIImagePickerController = UIImagePickerController()
            imagePickerController.delegate = self
            imagePickerController.allowsEditing = true              //true为拍照、选择完进入图片编辑模式
            imagePickerController.sourceType = sourceType
            self.presentViewController(imagePickerController, animated: true, completion: {
            })
        }
    }

    func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [NSObject : AnyObject]){
        var string:NSMutableAttributedString
        string  = NSMutableAttributedString(attributedString: self.text.attributedText)
        var img = info[UIImagePickerControllerEditedImage] as! UIImage
        img = self.scaleImage(img)
        var textAttachment= NSTextAttachment()
        textAttachment.image = img
        var textAttachmentString  = NSAttributedString(attachment: textAttachment)

        var countString:Int = count(self.text.text) as Int
        string.insertAttributedString(textAttachmentString, atIndex: countString) //可以用这个函数实现 插入到光标所在点 ps:如果你实现了希望能共享
        text.attributedText = string
        /*
        //
        */
        //string.appendAttributedString(textAttachmentString)
        picker.dismissViewControllerAnimated(true, completion: nil)

    }

    func scaleImage(image:UIImage)->UIImage{
        UIGraphicsBeginImageContext(CGSizeMake(self.view.bounds.size.width, image.size.height*(self.view.bounds.size.width/image.size.width)))
        image.drawInRect(CGRectMake(0, 0, self.view.bounds.size.width, image.size.height*(self.view.bounds.size.width/image.size.width)))
        var scaledimage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return scaledimage

    }

3. 实现键盘隐藏和弹出

     /*
    //此bool 标志是为了让键盘 出现和隐藏 成对出现,否则会出现跳出两次的情况.我也只有用这样的办法解决 = =
    // ps:如果你有更好的解决办法,希望能与我分享哦!上面有一个联系方式的
    */
    var bool:Bool = true
    func handleKeyboardWillShowNotification(notification: NSNotification) {
        if bool {
            keyboardWillChangeFrameWithNotification(notification, showsKeyboard: true)
            println("---show")
            bool = !bool
        }
    }
    func handleKeyboardWillHideNotification(notification: NSNotification) {
        if !bool {
            keyboardWillChangeFrameWithNotification(notification, showsKeyboard: false)
            println("---hide")
            bool = !bool

        }
    }

    func keyboardWillChangeFrameWithNotification(notification: NSNotification, showsKeyboard: Bool) {
        println("4")
        let userInfo = notification.userInfo!
        let animationDuration: NSTimeInterval = (userInfo[UIKeyboardAnimationDurationUserInfoKey] as! NSNumber).doubleValue
        // Convert the keyboard frame from screen to view coordinates.
        let keyboardScreenBeginFrame = (userInfo[UIKeyboardFrameBeginUserInfoKey] as! NSValue).CGRectValue()
        let keyboardScreenEndFrame = (userInfo[UIKeyboardFrameEndUserInfoKey] as! NSValue).CGRectValue()

        let keyboardViewBeginFrame = view.convertRect(keyboardScreenBeginFrame, fromView: view.window)
        let keyboardViewEndFrame = view.convertRect(keyboardScreenEndFrame, fromView: view.window)
        var originDelta = abs((keyboardViewEndFrame.origin.y - keyboardViewBeginFrame.origin.y))
        println("the origin:\(originDelta)")
        // The text view should be adjusted, update the constant for this constraint.
        if showsKeyboard {
            textViewBottomLayoutGuideConstraint.constant += (originDelta)
            self.toolBarLayOut.constant += originDelta
        }else {
            textViewBottomLayoutGuideConstraint.constant -= (originDelta)
            self.toolBarLayOut.constant -= originDelta
        }
        UIView.animateWithDuration(animationDuration, delay: 0, options: .BeginFromCurrentState, animations: {
            self.view.layoutIfNeeded()
            }, completion: nil)

        // Scroll to the selected text once the keyboard frame changes.
        self.text.scrollRangeToVisible(self.text.selectedRange)              //让TextView滑到光标所在地方
    }

4. 实现默认提示文字效果:点击进行编辑时提示文字自动消失

     /*
    // 实现默认提示文字效果:点击文字则会自动消失。
    */

    func textViewShouldBeginEditing(textView: UITextView) -> Bool {
        if !isThereHavedata {
            text.text = ""
            text.textColor = UIColor.blackColor()
            isThereHavedata = true
        }
        return true
    }

5. 解决改变文字属性,TextView自动滑到顶部问题

    self.text.layoutManager.allowsNonContiguousLayout = false   //用于解决改变文字属性,TextView自动滑到顶部问题

####6.让TextView滑到光标所在点

    self.text.scrollRangeToVisible(self.text.selectedRange)
####7.利用自动布局 实现点击按钮底部工具栏隐藏到右端
 @IBAction func toright(sender: UIBarButtonItem) {
    if self.toRight.constant < 0{                               //简单判断左移还是右移
        self.Toolbar.layer.cornerRadius = 22                    //改成圆角
        self.toRight.constant += (text.bounds.width - 10)
        sender.image = UIImage(named: "fa-left")                //改变图片
    }else {
        self.Toolbar.layer.cornerRadius = 0                     //恢复原来不是圆角那样
        self.toRight.constant -= (text.bounds.width - 10)
        sender.image = UIImage(named: "fa-right")
    }
}

8.简单封装了提示文字的功能

    //复制showtext.swift文件到工程
    Notice.showText("减小字体", fontsize: fontSize,obliqueness: 0)//弹出提示

9.设置点击隐藏导航栏,设置滑动隐藏导航栏

self.navigationController?.hidesBarsOnTap = false           //设置点击隐藏导航栏,false为取消
    self.navigationController?.hidesBarsOnSwipe = true          //设置滑动隐藏导航栏

10.解决UITextView经常出现光标不在最下方的情况

        /*
        使用UITextView的时候经常出现光标不在最下方的情况。。。(iOS8)
        解决方法:
        1、首先去除所有的Padding:
                self.text.textContainerInset = UIEdgeInsetsZero
                self.text.textContainer.lineFragmentPadding = 0

        2、然后在委托方法里加上一行:
                func textViewDidChange(textView: UITextView) {
                self.text.scrollRangeToVisible(self.text.selectedRange)
            }
            ps:委托方法在最下边。
        */
        self.text.textContainerInset = UIEdgeInsetsZero
        self.text.textContainer.lineFragmentPadding = 0

项目地址

github地址

https://github.com/lfb-cd/TextEditorDemo

如果有更新微博上会发消息的:我的微博

效果浏览:

(gif图片大约10MB):

时间: 2024-10-12 03:55:11

textEditorDemo:基于swift的一个富文本编辑器的相关文章

如何做一个富文本编辑器

很久以前就想做一个富文本编辑器,但是感觉比较难,一直没有实现.直到了解了html5的contenteditable属性可以设置一个div为可编辑状态,利用这个特性做富文本编辑器就比较简单了 首先 认识一下 contenteditable 它是一个属性 可以这样使一个DIV的编辑状态被激活 <div contenteditable="true"></div> 然后这个div就可以被编辑了 而我们要想获得它的html源码可以使用innerHTML来取得 举个例子如下

基于bootstrsp的jquery富文本编辑器的手册说明

重点:当在页面插入文本编辑器后,无法用js/jq的方式去将某些值写入到文本编辑器,如:$("textarea").val("111");$("textarea").text("111");... Summernote提供了指定的方式:$("textarea").Summernote().code('111');这是赋值,取值也可这样:$("textarea").Summernote().

vue集成百度UEditor富文本编辑器

在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是我将百度富文本编辑器放到vue项目中使用.效果图如下 废话不多说. 1.使用vue-cli构建一个vue项目.然后下载UEditor源码.地址:http://ueditor.baidu.com/website/ 把项目复制到vue项目的static文件下.目的是让服务可以访问到里面的文件,打开UEd

django富文本编辑器

-------------------tinymce富文本编辑器1.下载安装 1.在网站pypi网站搜索并下载"django-tinymce-2.4.0" 2.解压:tar zxvf django-tinymce-2.4.0.tar.gz 3.进入解压后的目录,工作在虚拟环境,安装: python setup.py install 2.应用到项目 1.在settings.py中为INSTALLED_APPS添加编辑器应用 INSTALLED_APPS = ( ... 'tinymce'

【实践】简洁大方的summernote 富文本编辑器插件的用发——实例篇

实例化后的summernote 是这样子的 很漂亮对吧,而我做成页面效果是这样的: 先说说实例化一个summernote 的方法把,其实也不难,jq 选择器选择一个要变成富文本编辑器的元素然后调用 summernote 方法传入一个对象作为参数便可,参数是一个对象,属性就是这个富文本的一些样式属性,如下: 上面的属性是一些比较常用的属性,更多属性可以查看官方文档.特别注意一点的是callbacks 属性,它的作用是summernote 编辑器里面的一些功能要实现的回调方法,这里我的需求只是上传图

使用百度富文本编辑器

插件下载地址:http://ueditor.baidu.com/website/download.html 具体引用: 把下载的文件完全的额引入到你的项目中,然后编辑页面内容: <!--加载编辑器的容器--> <script id="container" style="height: 700px" type="text/plain">           初始化内容 </script> <!--配置文件-

富文本编辑器代码编辑实时高亮

最近想做一个富文本编辑器添加代码并且产生高亮的效果.首先寻找富文本编辑器插件,有如UEditor.kindeditor.xhEdito等等插件.网上有挺多介绍的博客,在这就不详细介绍这些了.这几款编辑器我都试过了,UEditor适用SyntaxHighlighter高亮插件,而kindeditor与xhEdito适用prettyprint.当然,这些插件都是开源的可以自己修改.我在这几款插件中换了又换,其中的代码编辑都不理想. UEditor: kindeditor: xhEdito: 尝试修改

django之百度Ueditor富文本编辑器后台集成

Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因为百度富文本编辑器Ueditor没有对python的支持 步骤1: 在官网下载Ueditor的任意版本代码:http://ueditor.baidu.com/website/download.html#ueditor 步骤2: 将下载的代码放入到 django 项目中 步骤3:前端引用 在前端HTM

tinymce 富文本编辑器 编写资料

tinymce官方文档: 粘贴图片插件 博客搬运地址 使用Blob获取图片并二进制显示实例页面 tinymce自动调整插件 是时候掌握一个富文本编辑器了——TinyMCE(1) XMLHttpRequest 2.0的家臣们 URL.createObjectURL和URL.revokeObjectURL 如何使用 blob:http:// 隐藏一个mp3文件的真实地址? https://www.z-u-i-d-a-i-m-a.com/question/3913274460982272.htm 使用