WKWebView with CKEditor Save Editor HTML Contents

Hello everyone,


I am struggling to add WKWebView and CKEditor in my app.


CKEditor is like a text editor on a webpage allowing a user to create tables and bold text.


I have successfulled added it, however I need to "save" the user's custom HTML content into a variable which I will then send to a server.


Scenario:

1. User enters custom info into CKEditor.

2. User clicks Save button (on ViewController, outside of WKWebView)

3. Save button saves HTML to an NSString Variable.


Any help appreciated.


Best regards,


Robert Lee

iOS Developer

Hello,


I found the solution to my problem.


Below I have included my code. I hope this helps anyone who has struggled with getting this working as I have.


EditorToolViewController.h:

#import <UIKit/UIKit.h>
@import WebKit;


@interface EditorToolViewController : UIViewController <WKNavigationDelegate>


// Header
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
@property (weak, nonatomic) IBOutlet UIButton *summaryButton;


// Body
@property (weak, nonatomic) IBOutlet UIView *container;
@property (strong, nonatomic) NSString *editorContentHTML;
// - Summary
@property (strong, nonatomic) NSString *summaryContentHTML;
@property (strong, nonatomic) NSString *packStringSummaryValue;
@property (strong, nonatomic) NSString *userStringSummaryValue;
@property (strong, nonatomic) NSString *nameStringSummaryValue;


// Footer
@property (weak, nonatomic) IBOutlet UIToolbar *toolbar;
@property (weak, nonatomic) IBOutlet UIBarButtonItem *revertButtonItem;
@property (weak, nonatomic) IBOutlet UIBarButtonItem *saveButtonItem;


@end


EditorToolViewController.m:

#import "EditorToolViewController.h"
#import "SummaryViewController.h"
@interface EditorToolViewController () {
   
}
/
@property (nonatomic, strong) WKWebView *webView;
/
@property (strong, nonatomic) NSString *savedUserHTML;
/
@property (strong, nonatomic) NSString *revertContentHTML;
@end
@implementation EditorToolViewController
#pragma mark - Main
- (void)awakeFromNib
{
    [super awakeFromNib];
   
}
- (void)viewDidLoad {
    [super viewDidLoad];
   
    /
    self.savedUserHTML = @"";
    self.revertContentHTML = self.editorContentHTML;
   
}
-(void)viewWillAppear:(BOOL)animated {
   
}
-(void)viewDidAppear:(BOOL)animated {
   
    /
   
    [self setupWebViewInView:self.container];
   
    [self adjustWebView];
   
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    /
}
-(BOOL)prefersStatusBarHidden{
    return YES;
}
#pragma mark - Header
#pragma mark Summary
- (IBAction)summaryButtonPressed:(UIButton *)sender {
   
    /
}
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
   
    /
    if ([segue.identifier isEqualToString:@"SummarySegue"]) {
       
        SummaryViewController *summaryViewController = [segue destinationViewController];
        summaryViewController.packValue     = self.packStringSummaryValue;
        summaryViewController.userValue     = self.userStringSummaryValue;
        summaryViewController.nameValue     = self.nameStringSummaryValue;
        summaryViewController.contentHTML   = self.summaryContentHTML;
   
    }
}
#pragma mark - Body
#pragma mark WebView
-(void)setupWebViewInView:(UIView *)view {
   
    NSString *customHTML = self.editorContentHTML;
   
    /
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc]init];
   
    /
    configuration.userContentController = [self setUserContentControllerWithHTML:customHTML];
   
    CGRect webViewFrame = CGRectMake(0, 0, view.frame.size.width, view.frame.size.height);
   
    /
    self.webView = [[WKWebView alloc] initWithFrame:webViewFrame configuration:configuration];
   
    self.webView.navigationDelegate = self;
    [view addSubview: self.webView];
   
}
-(WKUserContentController *)setUserContentControllerWithHTML:(NSString *)html {
   
    NSString *customHTML = html;
   
    /
    NSString *sourceInjectNewHTMLContent = [NSString stringWithFormat:@"var content = document.getElementById('editor1'); \
                                            content.innerHTML = '%@';", customHTML];
    WKUserScript *scriptInjectNewHTMLContent = [[WKUserScript alloc] initWithSource:sourceInjectNewHTMLContent injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
   
    /
    /
    /
    /
    NSString *sourceFoundation = @"var meta = document.createElement('meta'); \
    meta.name = 'viewport'; \
    meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'; \
    var head = document.getElementsByTagName('head')[0];\
    head.appendChild(meta);";
    WKUserScript *scriptFoundation = [[WKUserScript alloc] initWithSource:sourceFoundation injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
   
    /
    WKUserContentController *userContentController = [[WKUserContentController alloc]init];
    [userContentController addUserScript:scriptFoundation];
    [userContentController addUserScript:scriptInjectNewHTMLContent];
   
    return userContentController;
}
-(void)adjustWebView {
   
    /
   
    /
    /
   
    /
    [self webViewLoadHTMLFile:@"defaultEditor"];
   
    self.webView.allowsBackForwardNavigationGestures = true;
   
}
-(void)webViewLoadURL:(NSString *)string {
   
    NSURL *url = [NSURL URLWithString:string];
    [self.webView loadRequest:[NSURLRequest requestWithURL:url]];
   
}
-(void)webViewLoadHTMLFile:(NSString *)filename {
   
    NSString *path = [[NSBundle mainBundle] pathForResource:filename ofType:@"html"];
    NSString * stringHTML;
   
    @try {
       
        stringHTML = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
        [self.webView loadHTMLString:stringHTML baseURL:nil];
       
    } @catch (id exception) {
       
        stringHTML = nil;
       
    }
}
#pragma mark - Footer
#pragma mark Revert
- (IBAction)revertButtonItemPressed:(UIBarButtonItem *)sender {
   
    /
    [self revertEditorHTMLContents:^(NSString *result) {
        NSString *editorContents1 = result;
        NSLog(@"%@",editorContents1);
    }];
   
}
-(void)revertEditorHTMLContents:(void(^)(NSString* result))onFinish {
   
    __block NSString *content;
   
    /
    NSString *script = [NSString stringWithFormat:@"(CKEDITOR.instances['editor1'].setData(\"%@\"));", self.revertContentHTML ];
   
    [self.webView evaluateJavaScript:script completionHandler:^(id _Nullable result, NSError * _Nullable error) {
       
        content = (NSString *)result;
       
        if (error) {
            NSLog(@"%@",error);
        }
       
        if (onFinish) onFinish(content);
    }];
   
}
#pragma mark - Save
- (IBAction)saveButtonItemPressed:(UIBarButtonItem *)sender {
   
    /
    [self getEditorHTMLContents:^(NSString *result) {
        NSString *editorContents1 = [self textToHtml:result];
        NSLog(@"%@",editorContents1);
    }];
   
}
-(void)getEditorHTMLContents:(void(^)(NSString* result))onFinish {
   
    __block NSString *content;
   
    /
    NSString *script = @"(CKEDITOR.instances['editor1'].getData());";
   
    [self.webView evaluateJavaScript:script completionHandler:^(id _Nullable result, NSError * _Nullable error) {
       
        content = (NSString *)result;
       
        if (error) {
            NSLog(@"%@",error);
        }
       
        if (onFinish) onFinish(content);
    }];
   
}
- (NSString*)textToHtml:(NSString*)htmlString {
   
    if (!htmlString) return @"ERROR";
   
    htmlString = [htmlString stringByReplacingOccurrencesOfString:@"&amp;" withString:@"&" ];
    htmlString = [htmlString stringByReplacingOccurrencesOfString:@"&lt;" withString:@"<" ];
    htmlString = [htmlString stringByReplacingOccurrencesOfString:@"&gt;" withString:@">" ];
    htmlString = [htmlString stringByReplacingOccurrencesOfString:@"&quot;" withString:@""""];
    htmlString = [htmlString stringByReplacingOccurrencesOfString:@"&#039;" withString:@"'" ];
   
    htmlString = [htmlString stringByReplacingOccurrencesOfString:@"</p><p>" withString:@"\n"];
    /
    while ([htmlString rangeOfString:@"  "].length > 0) {
        htmlString = [htmlString stringByReplacingOccurrencesOfString:@"  " withString:@"  "];
    }
    return htmlString;
}
@end

Hi rleeDev,


I am struggling for the same , I am working with swift language . Need to show CKEditor on WebView with all toolbar options and saving the content to server .

Could you please provide source code for this . Will be helpful.

WKWebView with CKEditor Save Editor HTML Contents
 
 
Q